Weird behaviour with react-navigation@next and react-native-safe-area-context

[atulmy]

Weird behaviour with react-navigation@next and react-native-safe-area-context view the following GIF:
The safe area is not applied and also the screen keeps shifting

import * as React from 'react'
import { Text, View, Button } from 'react-native'
import { NavigationNativeContainer } from '@react-navigation/native'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context'
import { createStackNavigator } from '@react-navigation/stack'

function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details!</Text>
    </View>
  );
}

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {/* other code from before here */}
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function SettingsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {/* other code from before here */}
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

const HomeStack = createStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Details" component={DetailsScreen} />
    </HomeStack.Navigator>
  );
}

const SettingsStack = createStackNavigator();

function SettingsStackScreen() {
  return (
    <SettingsStack.Navigator>
      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
      <SettingsStack.Screen name="Details" component={DetailsScreen} />
    </SettingsStack.Navigator>
  );
}

const Tab = createMaterialTopTabNavigator();

export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          <NavigationNativeContainer>
            <Tab.Navigator>
              <Tab.Screen name="Home" component={HomeStackScreen} />
              <Tab.Screen name="Settings" component={SettingsStackScreen} />
            </Tab.Navigator>
          </NavigationNativeContainer>
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

Package versions:
"@react-navigation/core": "^5.0.0-alpha.22",
"@react-navigation/material-top-tabs": "^5.0.0-alpha.17",
"@react-navigation/native": "^5.0.0-alpha.15",
"@react-navigation/stack": "^5.0.0-alpha.36",
"react-native-gesture-handler": "^1.5.0",
"react-native-reanimated": "^1.4.0",
"react-native-safe-area-context": "^0.6.0",
"react-native-screens": "^2.0.0-alpha.11",
"react-native-tab-view": "^2.10.0",

[joshualimpj]

I am not sure if this would help you, but instead of using "react-native-safe-area-context", perhaps try:
import {SafeAreaView} from 'react-native';
It works fine for me.

[atulmy]

@joshualimpj yup I tried it but as the React Native docs says:

The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later.

react-native-safe-area-context supports both the platforms.

[Fahido]

I'm also experiencing this. I've narrowed it down to being an issue in particular with Tab.Navigator. When using Stack.Navigator it renders completely fine, even without wrapping the component in SafeAreaView or SafeAreaProvider

[JoeLeung32]

Downgrade to 0.5.0 will fix your problem
"react-native-safe-area-context": "0.5.0",

[satya164]

Closing since this looks like an issue with react-native-safe-area-context rather than React Navigation. Please open an issue on the library's repo if you are still having problems.