TheMilkMan
TheMilkMan

Reputation: 285

KeyboardAvoidingView adding extra space or doing nothing-- not working as expected

I'm using a keyboardAvoidingView in my project, and I can get it to either add too much whitespace, pushing the actual page up to about halfway up the screen OR it does nothing at all and the keyboard just covers everything it normally would. I cannot get it to behave as anticipated.

I've tried wrapping the contents of App.js with a KeyboardAvoidingView, I've tried wrapping each individual page with a KeyboardAvoidingView, and I've tried various iterations of props. These include...

<KeyboardAvoidingView
behavior="padding"
enabled
style={{flexGrow:1, height:'100%'}}
>
...
</KeyboardAvoidingView>

<KeyboardAvoidingView
behavior="padding"
enabled
style={{flexGrow:1'}}
>
...
</KeyboardAvoidingView>

<KeyboardAvoidingView
behavior="padding"
enabled
style={{flexGrow:1'}}
keyboardVerticalOffset={100}
>
...
</KeyboardAvoidingView>

<KeyboardAvoidingView
behavior="padding"
enabled
style={{flexGrow:1'}}
keyboardVerticalOffset={-100}
>
...
</KeyboardAvoidingView>

<KeyboardAvoidingView
behavior="padding"
enabled
style={{flex:1'}}
keyboardVerticalOffset={-100}
>
...
</KeyboardAvoidingView>

You get the idea. I've also done all of these with behavior='height' and with no behavior at all. Same results-- either too much extra space or no effect at all.

I've checked several other asked questions, nearly all of them suggest changing the behavior or adding keyboardVerticalOffset={100} but again, neither works. I have seen that Navigation.Stack can cause issues if used in App.js, but that makes no sense why it doesn't work individually then.

I currently have it wrapping App.js and that only works on one page for some reason, all the others it has no effect on. This really isn't a problem for most of the app because I just worked around it and kept all the inputs higher up on the page (not ideal) but for the messaging component this is not an option. Nothing seems to work on iOS. Does anyone have suggestions?

Upvotes: 4

Views: 783

Answers (0)

Related Questions