CODEWITHSUNDEEP
expo
S. F. Griffin
S. F. Griffin

Reputation: 65

Expo react-native trouble with keyboard covering input

I am having trouble with the keyboard covering input fields in my views when I run my app in expo on my android device (I do not have an iOS device to test on).

I have tried the react-native KeyboardAvoidingView and the third-party react-native-keyboard-aware-scroll-view but neither did anything to fix the problem.

I knew that the Native-Base demo app, which is called Kitchen Sink, had forms in it so I looked at it and found that the version from the Google Play store worked fine. However, when I viewed the expo version of the app I found that the 'Permanent Address' field on the 'Form' view gets covered by the keyboard, while it smoothly scrolls into view on the Google Play version of the app.

Does anybody know why the expo version does not work properly? Does anybody know if expo generally struggles with keyboards covering input fields?

Is there a general solution keyboard covering in expo?

Upvotes: 2

Views: 3679

Answers (1)

brentvatne
brentvatne

Reputation: 8036

I changed the NativeBase Kitchen Sink app to have the following configuration. The same thing applies on any Expo app:

"expo": {
  "name": "NativeBase Kitchen Sink",
  "description": "Example of NativeBase components",
  "slug": "native-base-kitchen-sink",
  "version": "1.0.0",
  "sdkVersion": "18.0.0",
  "androidStatusBar": {
    "backgroundColor": "#000000"
  }
}

The key part is "androidStatusBar" with the "backgroundColor" set. This will make the layout of the app automatically adjust as the keyboard appears.

You can try it at: https://exp.host/@community/native-base-kitchen-sink -- go to the "Stacked Label" example. You can see the source for it and try the demo, running with Create React Native App, at https://github.com/brentvatne/StackOverflow44876951

Upvotes: 5

Related Questions