Skip to content

How to handle Emoji picker layout coordination with KeyboardStickyView #1441

@ForgQi

Description

@ForgQi

Thank you for your amazing work on this library! It has been very helpful.

I am trying to implement a Telegram-like message input component. I have a specific scenario regarding the coordination between the system keyboard and a custom Emoji picker:

  • I am using freeze to lock the layout when the keyboard rises, and I manually set the height for KeyboardStickyView during this state. This part works great.
  • When the keyboard is not visible and the user clicks the "Emoji" button, I need the message list and input area to offset upwards (avoiding the emoji picker), just as they would avoid the system keyboard. I'm not entirely sure how to trigger this avoidance manually.
  • Furthermore, when the emoji button is clicked, its icon changes into a "Keyboard" button. Coordinating this smooth transition (switching between the System Keyboard and the custom Emoji panel back and forth) is quite complex and highly prone to layout flickering / UI jumping.
    What is the best practice to manually trigger or simulate the "keyboard avoidance" behavior for a custom component like an emoji picker?

Request:
Could you please provide a minimal example in the documentation or a demo on how to implement an Emoji Picker that integrates seamlessly with KeyboardStickyView?

Specifically, how to make the KeyboardStickyView recognize the emoji picker's height as if it were a keyboard height, and how to coordinate the layout to avoid flickering when toggling the states.

This would be extremely helpful for beginners and developers building chat interfaces. Thank you for your time and effort!

Metadata

Metadata

Assignees

Labels

KeyboardStickyView 🩹Anything related to KeyboardStickyView componentenhancementNew feature or request

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions