SafeAreaView working not well in TabNavigator

[arthurssss]

The sample code from https://snack.expo.io/BJ6-M8pEG

When the SafeAreaView in the TabNavigator, it's margin from the parent is not correct

[brentvatne]

cc @davepack

[satya164]

Hey! Can you update your snack to demonstrate the issue you're having? The snack doesn't match your screenshot.

[TheAlmightyBob]

We see this same behavior. I don't have a Snack available right now, but I can add:

• This is specific to the React Native SafeAreaView. The SafeAreaView implementation provided by React Navigation does not currently exhibit this problem. However, the React Native version seems like the "correct" way since it is leveraging the native iOS support...
• From very brief analysis, it seems most likely due to the tab navigator laying out all of the tab pages on one long view and just moving the content offset to the current tab. Hence iOS is applying the safe area margins to that outer view, not the inner content (so the left tab gets only a left margin, the right tab gets only a right margin... if there was a middle tab in these screenshots, it would have no margins). I'd be curious how something like a native iOS paged scrollview handles this.... I'd guess that the outer view would need to be SafeArea-aware and pass that info to the tab content....

[dvshub]

I am seeing the same issue. Are there any updates on this?

[TheAlmightyBob]

I tried to create a Snack but that seems compatible with neither react-navigation nor iPhoneX.

But repro is very simple: Run exp init and choose tabs type of project. Then go to each Screen file, add import { SafeAreaView } from "react-native";, and wrap the existing render contents in SafeAreaView style={{ flex: 1 }}.

(the issue affects all three tabs, although it can be slightly harder to see on the Home tab simply due to the centered content)

[davepack]

Sorry for my delay in getting to this. Your analysis is right on, the react-navigation tab view is one of the particular cases that pushed me to create the js version of SafeAreaView. I think ideally the forceInset api should be implemented in the native version, but I don't have the expertise, time, or motivation to do it! FWIW, I think it's perfectly fine for you to use the js, non-native version :-) In my own projects I will use the native version until I find a case that it breaks, then I pull in the js version.

[davepack]

So to sum up, the solution to this issue is to use the js version of SafeAreaView.

import { SafeAreaView } from 'react-navigation';
// or
import SafeAreaView from 'react-native-safe-area-view';

[TheAlmightyBob]

Actually we have multiple other issues w/ the JS version, I'll be reporting those next...

[brentvatne]

moving to umbrella issue