Search code examples
androidreactjsanimationreact-nativeflicker

Keyboard white flickering with React Native


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.

Solution

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