CODEWITHSUNDEEP
react-nativeexpo
Rajat Saxena
Rajat Saxena

Reputation: 3915

React Navigation blank screen

I recently updated my Expo app to React Navigation 1.0.0-beta.19. Since then, it has been showing me only white screen. What can be the issue?

Here is the snack for reproduction. https://snack.expo.io/@rajat1saxena/react-navigation-test

Screen: enter image description here

Upvotes: 1

Views: 10646

Answers (3)

Sathyanarayanan Dhanushkodi
Sathyanarayanan Dhanushkodi

Reputation: 159

I resolved this issues by removing the SafeAreaView enclosing the ReactNavigator.

Code with issue:

<SafeAreaView>
 <NavigationContainer>
  <Stack.Navigator>
     <Stack.Screen name="Home" component={Home} />
  </Stack.Navigator>
 </NavigationContainer>
</SafeAreaView>

Code without issue:

 <NavigationContainer>
  <Stack.Navigator>
     <Stack.Screen name="Home" component={Home} />
  </Stack.Navigator>
 </NavigationContainer>

Hope it helps someone.

Upvotes: 2

AMOL PATIL
AMOL PATIL

Reputation: 97

Thanks Evan Bacon!

By removing alignItems: 'center' my issue is resolved.

Just compare below 2 App.js files..

App.js with issue

<View style={styles.container}>
<StatusBar style="auto" />
<SafeAreaProvider>
    <NavigationContainer theme={DefaultTheme}>
        <StackNavigator /> // My Stack Navigator Component
    </NavigationContainer>
</SafeAreaProvider>

const styles = StyleSheet.create({container: {flex: 1, alignItems: 'center', justifyContent: 'center' }});

working App.js

<View style={styles.container}>
<StatusBar style="auto" />
<SafeAreaProvider>
    <NavigationContainer theme={DefaultTheme}>
        <StackNavigator /> // My Stack Navigator Component
    </NavigationContainer>
</SafeAreaProvider>

const styles = StyleSheet.create({container: {flex: 1, justifyContent: 'center' }});

The main difference is in the styles of container. If we add alignItem: 'center' in your app.js return <View></View> you will face the same issue.

Just remove alignItem: 'center' from parent <View></View> and it will work.

Upvotes: -2

Evan Bacon
Evan Bacon

Reputation: 731

You can fix this by removing the line: alignItems: 'center'

Your container styles should look like this: 

container: {
  flex: 1,
  justifyContent: 'center',
  paddingTop: Constants.statusBarHeight,
  backgroundColor: '#ecf0f1'
}

The view is using a undetermined width, when you use alignItems: 'center' it will push your content to the center. Because there is no set width the width will be 0!

By removing or changing alignItems you allow flex to fill the view.

Upvotes: 11

Related Questions