React Native - Hide component of fixed position when keyboard opens up

user_6051241 0
Viewed 426

I have a list of elements and a sticky button, fixed at the bottom of the screen. So when the user scrolls down in the list the button stays at the bottom. This works perfectly fine but when I open up my keyboard, the button is pushed up as well, hiding the other elements which are on the top of the screen.

Can I place my button somehow that it remains sticky on the screen but when the keyboard is opened up it doesn't get pushed up?

My current (hacky) implementation is that I am hiding the button when the keyboard opens up but I don't like it very much.

react-native-flatlist react-native css javascript
2 Answers

you must be using any library for keyboard like react-native-keyboard-spacer or etc so you can disable that for that specific screen, another hacky implementation @mikasa

user_118346260

i assume you are wrapping your component with a KeyboardAvoidingView, that would explain your button getting pushed up, so you should consider passing false to "enabled" prop when your keyboard is open, this will cause the keyboard overlay your button. you can check out the docs here https://reactnative.dev/docs/keyboardavoidingview#enabled

user_154582430
Related