Screen goes blank in react native app with react-navigation library
See original GitHub issueDescribe the bug The screen goes blank in react native app with react-navigation library
Code snippet
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={register({ require: () => require('./DetailsScreen') })} />
</Stack.Navigator>
</NavigationContainer>
);
}
Contents of Details screen: import { Button, Text, View } from ‘react-native’; import React from ‘react’;
export function DetailsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Gpo Screen</Text>
<Button
title="Go to Details... again"
onPress={() => navigation.push('Details')}
/>
</View>
);
}
I have used the code shared above to try the bundle splitting and it did not work
Environment:
- Mac 11.0.1
- iOS simulator - 8
- iOS 14.0
- JSC
- Library version “react-navigation”: “4.4.3”, “react-native-bundle-splitter”: “^1.0.9”, “@react-navigation/native”: “5.1.7”, “react”: “16.9.0”, “react-native”: “0.61.5”, “@react-navigation/drawer”: “5.5.1”, “@react-navigation/material-top-tabs”: “5.2.14”, “@react-navigation/native”: “5.1.7”, “@react-navigation/stack”: “5.2.14”,
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (4 by maintainers)
Top Results From Across the Web
Empty screen in react native app after adding react navigation
after adding react navigation to my app , my app was just giving plane white screen. so anyone knows how I can fix...
Read more >Common mistakes - React Navigation
Common mistakes. This section attempts to outline issues that users frequently encounter when first getting accustomed to using React Navigation and serves ...
Read more >Getting Started with React Navigation v6 and TypeScript in ...
When you have a complex mobile application structure or many screens in your ... React Navigation library is one of the most used...
Read more >Expo React native new EAS build blank white screen ... - Reddit
So my app.js is literrally copied and pasted from the react-navigation website version 6. I get a blank white screen after the splash...
Read more >Navigating Between Screens - React Native
Mobile apps are rarely made up of a single screen. ... an alternative to React Navigation, the following library provides native navigation ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@radhakrishnant2s I created an example on snack: https://snack.expo.io/frQvTTGIP Everything works fine.
I think the problem was in this line:
export function DetailsScreen({ navigation }) {
It should be:
export default function DetailsScreen({ navigation }) {
or if you don’t like the usage of
default export
- you can pass an extractor toregister
functioncomponent={register({ require: () => require('./DetailsScreen'), extract: 'DetailsScreen' })}
Let me know, whether it works for you or not 😉
Hi @sammiepls
Are you using
extract
property?The syntax should be the same: