Screen goes blank in react native app with react-navigation library

Describe 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>
    );
}

Repo for reproducing https://snack.expo.io/?platform=android&name=Hello React Navigation | React Navigation&dependencies=%40expo%2Fvector-icons%40*%2C%40react-native-community%2Fmasked-view%40*%2C%40react-navigation%2Fbottom-tabs%40^5.8.0%2C%40react-navigation%2Fdrawer%40^5.9.0%2C%40react-navigation%2Fmaterial-bottom-tabs%40^5.2.16%2C%40react-navigation%2Fmaterial-top-tabs%40^5.2.16%2C%40react-navigation%2Fnative%40^5.7.3%2C%40react-navigation%2Fstack%40^5.9.0%2Creact-native-paper%40^4.0.1%2Creact-native-reanimated%40*%2Creact-native-safe-area-context%40*%2Creact-native-gesture-handler%40*%2Creact-native-screens%40*%2Creact-native-tab-view%40^2.15.1&sourceUrl=https%3A%2F%2Freactnavigation.org%2Fexamples%2F5.x%2Fmultiple-push.js

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”,

[kirillzyusko]

@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 to register function

component={register({ require: () => require('./DetailsScreen'), extract: 'DetailsScreen' })}

Let me know, whether it works for you or not 😉

[kirillzyusko]

Hi @sammiepls

Are you using extract property?

The syntax should be the same:

register({ loader: () => import('./DetailsScreen'), extract: 'DetailsScreen' })