Question 33651 in React native Question posted in
The official React Native documentation can be found here.

Blank screen after building app in React Native

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;
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search