CODEWITHSUNDEEP
react-nativereact-native-ios
Varun Gupta
Varun Gupta

Reputation: 3112

KeyboardAvoidingView doesn't move the view high enough while selecting some TextInput box towards the bottom of the screen

This is for iOS app created using react-native. I am using KeyboardAvoidingView in a form which contains a few TextInput fields. I have observed that the view is not moved high enough to accommodate the keyboard when a TextInput field towards the bottom of the screen is selected.

I created a snack that demonstrates this behavior (Link below). I have also observed that in some cases, the view is moved high enough on one iPhone but not the other. Initially, the problem was reported for iPhone 6S Plus in which users reported that the view is not moved high enough to accommodate the keyboard and in such cases, they are not able to see what they are typing the input box. When I was trying to create a snack to reproduce the problem, I found that I was able to reproduce that even on an iPhone 5s.

https://snack.expo.io/ry15dng2-

In the above snack, if you click on the TextInput box with value jug, you should see that the keyboard overlaps the input box and it is not clearly visible. I am sorry for the quality of the snack. I just tried to create a minimal example to reproduce the problem.

How can I fix this problem?

Upvotes: 5

Views: 4035

Answers (1)

Wasabi Fan
Wasabi Fan

Reputation: 1863

I also experienced this issue (on Android). They key is this prop in the KeyboardAvoidingView:

/**
 * This is the distance between the top of the user screen and the react native view,
 * may be non-zero in some use cases. The default value is 0.
 */
keyboardVerticalOffset: PropTypes.number.isRequired,

The view does not automatically identify the offset between the top of the app frame and the top of the KeyboardAvoidingView that you are rendering, so it doesn't shift itself enough if that number is nonzero.

To fix this, either add an explicit keyboardVerticalOffset if it's known, like this...

<KeyboardAvoidingView behavior={"position"} keyboardVerticalOffset={Constants.statusBarHeight}>

... or move the KeyboardAvoidingView to the root of your component tree so that there is no offset above it.

Upvotes: 5

Related Questions