Fix jittering / flickering interface when navigating in react-native

November 9, 2019

I’ve had an issue in a react-native project where the interface kept jumping around or flickered when navigating between screens with react-navigation.

Whenever you press a button on the bottom-tab-navigator or when you navigate to another screen, the whole UI flicker. Or rather, the UI jumps around a couple of pixels when initially rendering the new screen. It’s very visible when the header height changes.

At first I thought the issue was with the top navigation header, that the lack of a fixed height was the problem.

I tried adding a fixed height, tried absolute positioning, and all the other tricks that I have. None of them worked, the problem persisted.

React-native’s SafeAreaView

My setup is a pretty simple react-native app, but I do have a custom header component (overriding the built-in react-navigation header).

Finally after a bit of experimenting, I found the issue at hand. I was importing the SafeAreaView from react-native, and this was the root of my problems.

import { SafeAreaView } from 'react-native';

The SafeAreaView is used as a padding element that adds the necessary space, above and below an element, so it doesn’t interfere with the native UI in a device. An example of that would be the camera-notch on an Iphone.

It seems that the official SafeAreaView, provided by react-native, is not directly compatible with react-navigation. But instead you need to use the rather undocumented SafeAreaView made available by react-navigation (which itself comes from react-native-safe-area-view).

import { SafeAreaView } from 'react-navigation';

Conclusion

This seemingly small change completely fixed all of my issues, I’m not sure exactly what, internally, the differences are between the two functions. I’d venture to guess that the native SafeAreaView has some kind of delay (maybe it’s a promise that takes time to resolve?). But after applying the change, the elements on the screen stays put after screen transitions.

Anyway, hope this helps somebody else as well.

Tags