February 17, 2020
Ryan Atkinson
I recently went down the rabbit hole trying to fix an issue I was having with a seemingly simple react-navigation implementation of a TabNavigator. I followed the docs exactly and didnāt have anything out of the ordinary in my code (or so I thought). The issue was that every time I selected a new tab of the tab navigator, the screen would ājumpā as it was rendering.
ā
It looked like this:
It would happen so fast that it didnāt seem like a big deal at first, but as the issue persisted it became an increasing frustration. I couldnāt find or think of anything that would cause this problem, and the GitHub issues page for react-navigation gave me no help either. Part of the issue was also that people would probably use a lot of different nomenclatures to describe the issue, whether it be ājankā, or ājumpingā or āstutteringā. But the biggest issue was that I really didnāt understand the problem well enough to even compose a proper search for the solutionā¦
ā
After taking a QuickTime video of the screen jumping, and playing it in slow motion to see what exactly was happening, I noticed that the additional padding above the StatusBar was briefly disappearing during the jump. Interesting. This got me thinking about the usage of React Nativeās SafeAreaView since that is what provides the additional padding on the top.
ā
I looked at the official documentation, https://facebook.github.io/react-native/docs/safeareaview but there wasnāt anything interesting there. Searching the react-navigation documentation for āSafeAreaViewā yielded this: https://reactnavigation.org/docs/1.x/handling-iphonex/.
ā
š This section jumped out at me:
Boom! I stumbled on to the react-native-community page for SafeAreaView, which differs from the primary documentation: https://github.com/react-native-community/react-native-safe-area-view. The react-native-community SafeAreaView does expose the forceInset prop, and documents it as follows:
Sometimes you will observe unexpected behavior and jank because SafeAreaView uses onLayoutā¦
ā
ā
With these changes in place our app looks like it should:
ā
I hope this helps some of my fellow react native developers!
ā