React Native Stack.Navigator does't work on Android - react-native

Question

I have an issue with Stack.Navigator on Android. It just doesn't work by some strange reason.
There is simple code:
import React from 'react';
import {createNativeStackNavigator} from '#react-navigation/native-stack';
import {ROUTES} from '../../constants/routes';
import {AuthScreen, LoginScreen, RegisterScreen} from './screens';
export const Unauthorized = () => {
const Stack = createNativeStackNavigator();
return (
<Stack.Navigator
initialRouteName={ROUTES.ROUTE_AUTH}
screenOptions={{headerShown: false}}>
<Stack.Screen name={ROUTES.ROUTE_AUTH} component={AuthScreen} />
<Stack.Screen name={ROUTES.ROUTE_LOGIN} component={LoginScreen} />
<Stack.Screen name={ROUTES.ROUTE_REGISTER} component={RegisterScreen} />
</Stack.Navigator>
);
};
Looks simple. AuthScreen component also is simple:
import React from 'react';
import {SafeAreaView, StyleSheet, Text} from 'react-native';
export const AuthScreen = () => {
return (
<SafeAreaView>
<Text style={styles.text}>Auth screen</Text>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
text: {
color: 'red',
},
});
There is a App.tsx:
import 'react-native-gesture-handler';
import React from 'react';
import {SafeAreaView, StatusBar, useColorScheme} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {ApolloProvider} from '#apollo/client';
import client from './src/apollo';
import {SplashScreen} from './src/screens';
const App = () => {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
return (
<ApolloProvider client={client}>
<SafeAreaView style={backgroundStyle}>
<SplashScreen />
<StatusBar backgroundColor="white" barStyle="dark-content" />
</SafeAreaView>
</ApolloProvider>
);
};
export default App;
But screen is empty when app is Running.
But if I remove Stack.Navigator at all then the content gets visible
Any notes with dependencies or MainActivity I have done.
There is deps:
"#apollo/client": "^3.7.1",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"#react-navigation/stack": "^6.0.11",
"graphql": "^16.6.0",
"react": "18.1.0",
"react-hook-form": "^7.39.1",
"react-native": "0.70.4",
"react-native-bootsplash": "^4.3.3",
"react-native-gesture-handler": "^2.8.0",
"react-native-mmkv-storage": "^0.8.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.10.0"
I spent 4 hours and I have no more ideas how to get Stask.Navigator to show content....
I tried to use
import {createStackNavigator} from '#react-navigation/stack'
const Stack = createStackNavigator()
instead of createNativeStackNavigator
I tried to change versions. Nothing helped.

Answer 1

give flex:1 style to SafeAreaView in App.js