Keyboard white flickering with React Native

Question

When showing and hiding the keyboard in my React Native app there is a white flickering where the keyboard goes, see this:

https://photos.app.goo.gl/Bwmin9T1R4OAO9tB3

I'm making my first app using React Native, so I'm not sure if this is "expected" behaviour (if this is just the way things look with React Native) or if there is anything I can do to fix it.

• Everything starting from the animated icon down to the USD field is wrapped in a <KeyboardAvoidingView behavior="padding"> (I tried removing it and still see the flickering).
• I use Keyboard from "react-native" to listen to "keyboardDidShow" and "keyboardDidHide", and use Animated from "react-native" to perform the animation on the icon.

Answer 1

If your're using Expo, you can use a library called expo-system-ui to set the background color:

import * as SystemUI from 'expo-system-ui';
//...
await SystemUI.setBackgroundColorAsync("black");

Docs

Answer 2

using android:windowSoftInputMode="adjustPan" fixed it for me.

Solution found in this comment.

Answer 3

If you're using Expo and you're still having this issue, changing the softwareKeyboardLayoutMode in the app.json worked for me.

"android": {
    "softwareKeyboardLayoutMode": "pan",
    ...(other properties)
}

Answer 4

Updating to a newer version of create-react-native-app which utilizes Expo seems to have fixed the issue.