[v4] When Text Inputs become focused, the highest snap point is ALWAYS expanded to

[calebpanza]

Bug

When building out a sheet with a Text Input, the sheet will always expand to the highest snap point when the Text Input is focused.

Environment info

Library	Version
@gorhom/bottom-sheet	^4
react-native	0.72.6
react-native-reanimated	~3.3.0
react-native-gesture-handler	~2.12.0

Steps To Reproduce

For example, I might have a sheet with the following snap points:
[100, 'CONTENT_HEIGHT']

When I focus the Text Input, the Bottom Sheet expands to the CONTENT_HEIGHT.

screen-20231130-120825.2.mp4

I want to be able to offer the user a chance to further expand the text input, so I update the snap points:
[100, 'CONTENT_HEIGHT', '90%']

Now, though, when I focus the Text Input, the Bottom Sheet will always expand to the 90%.

screen-20231130-120633.2.mp4

Describe what you expected to happen:
I'm expecting to be able to have the Text Input focus to the minimum required height for the size of my content unless the user specifies otherwise. The effect that I'm trying to achieve is similar to Slack's interface for text input. Some screenshots and examples are provided below.

screen-20231130-122651.2.mp4

What we're trying to achieve (this is a Figma prototype)

Reproducible sample code

I put together this repo that includes an Expo app that you can see the code examples from the recordings above. Running the app is as simple as yarn && yarn start and works with Expo Go.

[gorhom]

Thanks for the detailed issue @calebpanza 🙌

this seemed to be a good feature request, i have drafted a new keyboard behaviour avoid and it would look like :

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-11-30.at.18.57.23.mp4

i will need to iron it out and submit a CR by this weekend.

[calebpanza]

Wow this is great! Thanks so much for looking into it so quickly. Are you thinking of making this a prop that could be configured on the Bottom Sheet?

If I were to have an accessory (like a button, maybe) trailing the text input on the bottom, would that element get cut off given the avoid behavior?? You could see this kind of thing play out in the gif that I posted where you have the "Public" button below the text input.

[calebpanza]

Hey @gorhom just wanted to throw this out there. I was also having an issue where every time I focused on the Text Input on Androids, the entire Bottom Sheet would dismiss. Did some digging and found this solution as an open PR. When I implemented it, it also resolved the problem that we're discussing in this issue.

[calebpanza]

Any progress here? More than happy to jump in and help if there's a branch/PR up!

[alikhan866]

I'm facing the exact same problem..

@calebpanza thank you so much for posting this bug.. just to confirm this is happening on IOS aswell right ?

@gorhom Can we expect this to be picked up soon ? would really appreciate it :)

[gorhom]

@calebpanza could you test #1675, it should address the issue

[alikhan866]

@gorhom I have tested by installing "@gorhom/bottom-sheet": "^5.0.0-alpha.6",

It still doesn't work.. still when text input is focused it snaps to highest snap point

also now I have to explicitly pass enableDynamicSizing={false} it seems to be defaulting to true when it should default to false as per the docs.

Appreciate you looking into this so quickly :) thanks alot

cc @calebpanza

[calebpanza]

So sorry to have missed this. Was out for the holidays. I'd be happy to pull the 5.0 alpha and test this out!

[spthomas5]

Hi, I was wondering if there was a solution to this? I'm currently on "^4.6.1"