Blank screen after building app in React Native

Question

After installing and customizing my basic react navigation setup, After building the app a blank screen appears with no errors in the console.

I added {{flex:1}} to the SafeAreaView I tried uninstalling, deleting node modules, gradle clean and nothing is working.

Navigation.js file

import *as React from "react";
import IndexScreen from "./Screens/Index";
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';
import { SafeAreaView } from "react-native-safe-area-context";
const Stack = createNativeStackNavigator();

const Navigation = () => {
    <SafeAreaView style={{flex:1}}>
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Index">
                <Stack.Screen name="Index" component={IndexScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    </SafeAreaView>
    
}
export default Navigation;

App.js file

import React from 'react';
import Navigation from './src/Navigation';

const App = () =>{
  return (
      <Navigation />
  )}

export default App;

Answer 1

First thing you don't use SafeAreaView unless you have wrap you app with the SafeAreaProvider first. Second you don't need to do that for the navigation cause the navigation have it built in.

So first replace import { SafeAreaView } from "react-native-safe-area-context"; to import { SafeAreaProvider } from "react-native-safe-area-context";

And change where you use SafeAreaView to SafeAreaProvider . Also remove the style there you won't need it.

The SafeAreaView depends of the SafeAreaProvider context to be able to get the job done. You can't use the view with the context wrap around you app.

Answer 2

In the Navigation you are not actually returning anything. It needs to be like this:

const Navigation = () => (<SafeAreaView style={{flex:1}}>
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Index">
                <Stack.Screen name="Index" component={IndexScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    </SafeAreaView>)