2

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?

S. F. Griffin
  • 65
  • 1
  • 5

1 Answers1

5

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

brentvatne
  • 7,603
  • 4
  • 38
  • 55
  • Massive thank you! I asked about this last night on Slack and here and got a first hint on Slack by the time I finished writing this question. I had to leave in a hurry, but I have come back today and you have given a complete and perfect answer. This perfectly fixed my problem. I'm new to both react-native and expo, but am now very impressed with the community. Again, thank you! – S. F. Griffin Jul 03 '17 at 20:37
  • Thanks! You just saved me some hours. – diegoprates May 30 '18 at 16:08
  • Thanks a lot. I don't know why is working when it is added this property, but it works in my case. In others react native I have used a native module but that module is not possible to use with Expo, it is my first Expo app. ;) I think, you are same @brentvatne from one issue I had to need to solve, and you gave us key answer in github Expo repo. Second time you saved me :) – Xopsy Mar 06 '20 at 13:20