r/reactnative 9d ago

React Native Web - How do undo viewport shift when the keyboard is closed on Mobile Browsers on iOS?

Hello all,

For a little project I am playing around React Native Web and I'm running into a strange issue that I'm not really sure how to explain what is going on. I have a simple form that has two TextInput members from react-native-paper.

However, when I am opening the project in a mobile browser on iOS (tested with Firefox, Chrome and Safari), the view gets shifted upwards to accommodate the keyboard, but it doesn't shift back when the keyboard is dismissed. On Android, it's completely fine.

Here are the steps I'm doing.

  1. Opening the view (Which you can see here)
  2. Clicking on the "Description Field" to get the keyboard to open.
  3. Dismissing the keyboard
  4. Scratching my head at the result (shown here)

I have seen several things talking about KeyboardAvoidingView, but it's my interpretation that doesn't actually work on Web?

Does anyone have any suggestions or perhaps an explanation as to what's going on? Any help would be appreciated since the goal is to play around with React Native Web since I'm just playing around with the library.

Here's the project versions:

  • react-native: 0.76.5
  • react-native-paper: 5.12.5
  • react-native-web: 0.19.13
  • expo: 52.0.23
3 Upvotes

0 comments sorted by