calebpanza commented 1 year ago

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.

https://github.com/gorhom/react-native-bottom-sheet/assets/45076058/d174db89-8a98-4300-84d7-c369b5301ce0

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%.

https://github.com/gorhom/react-native-bottom-sheet/assets/45076058/082d6fa2-1a22-4977-953d-39316582cab7

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.

https://github.com/gorhom/react-native-bottom-sheet/assets/45076058/6631c344-3952-4063-8cd2-bec27ee1573a

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

2023 11 30 02

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 commented 1 year ago

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 :

https://github.com/gorhom/react-native-bottom-sheet/assets/4061838/5186401a-b6a8-4980-97ac-b64f3fde63e0

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

calebpanza commented 1 year ago

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 commented 12 months ago

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 commented 12 months ago

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

alikhan866 commented 11 months ago

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 commented 11 months ago

@calebpanza could you test https://github.com/gorhom/react-native-bottom-sheet/pull/1675, it should address the issue

alikhan866 commented 11 months ago

@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 commented 10 months ago

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!