React-native-reanimated-bottom-sheet: Keyboard push BottomSheet to top (TextInput)

Created on 3 May 2020  路  10Comments  路  Source: osdnk/react-native-reanimated-bottom-sheet

Hey,

First, thank you! The Bottomsheet is really cool and I really like it.
I created 2 TextInputs inside the Bottomsheet. When I open the Keyboard the BottomSheet is pushed to the top. Any ideas how I can fix this? I couldn't find any solution and already tried wrapping with Scrollview / KeyBoardAvoidingView

Bottomsheet with Inputs:
WhatsApp Image 2020-05-03 at 14 10 34

When pressing inside a TextInput:
WhatsApp Image 2020-05-03 at 14 10 34 (1)

Thank you so much for your help!

Most helpful comment

I already tried that. Did not work for me. You can also checkout the duplicate, there I posted my code. Maybe you can help me.

I will close this as its a duplicate of #203

All 10 comments

Hey @mleister97 did you find any solution to this? Seeing it as well

@oferRounds Unfortunately not.
There are many solutions like wrapping it with a KeyboardAvoidingView, replacing all flex:1 with height:100%, or using android:windowSoftInputMode="adjustPan" in Androidmanifest.xml.

As I am using expo and I cannot escape, the last solution is not an option for me. Also @ljmocic mentioned, that just resnapping should also work.
Sadly non of the solutions work for me. I would still be very happy if someone can provida an example.

You can also have a look at this one: #203
Please notify me when you found a working solution!

@mleister97 thank you for this detailed answer! I鈥檒l have a look on the other issue, and will keep you posted if find any solution! Thank you again!

Duplicate of #203

You are right, but have you found any solution?

Use heights instead of flex fixes it for me. Do not swap the bottom sheet in scrollviews either

Please share an example, i can't fix this

In your code, you have your bottom sheet in a parent view right

You have to use height there too and in the render content

I already tried that. Did not work for me. You can also checkout the duplicate, there I posted my code. Maybe you can help me.

I will close this as its a duplicate of #203

Setting the device screen height to the BottomSheet's parent container worked for me. I posted an example code in the referred thread #203

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Saad-Bashar picture Saad-Bashar  路  6Comments

sebqq picture sebqq  路  4Comments

praneeth-hiver picture praneeth-hiver  路  4Comments

ardyfeb picture ardyfeb  路  5Comments

ShaikIrfan1739 picture ShaikIrfan1739  路  3Comments