Navigate Between Screen React Native

Question

I'm coming from ReactJS and a bit confused about how to navigate between screens in react native.

I'm using these react-navigation and react-navigation-stack versions:

"@react-navigation/native": "^5.8.10", "@react-navigation/stack": "^5.12.8"

So I have 2 screens already:

SplashScreenContainer

 import React from 'react'; import {Text, View} from "react-native-reanimated"; class SplashScreenContainer extends React.PureComponent { redirectToHome = () => { const {navigation} = this.props; navigation.navigate('HomeContainer'); } render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text onPress={() => this.redirectToHome}> Splash Screen </Text> </View> ) } } export default SplashScreenContainer;

HomeScreenContainer

 import React from 'react'; import {Text, View} from "react-native-reanimated"; class HomeScreenContainer extends React.PureComponent { render() { return ( <View> <Text>Home Screen</Text> </View> ) } } export default HomeScreenContainer;

and here's my app js to render the screens inside NavigationContainer:

App.js

 import React from 'react'; import {SafeAreaView} from "react-native-safe-area-context"; import {NavigationContainer} from '@react-navigation/native'; import {createStackNavigator} from '@react-navigation/stack'; const SplashScreenContainer = React.lazy(() => import('./app/containers/SplashScreenContainer')); const HomeContainer = React.lazy(() => import('./app/containers/HomeContainer')); const Stack = createStackNavigator(); class App extends React.PureComponent { render() { return ( <SafeAreaView> <NavigationContainer> <Stack.Navigatior> <Stack.Screen name='SplashScreenContainer' component={() => <SplashScreenContainer {...this.props} />}/> <Stack.Screen name='HomeContainer' component={() => <HomeContainer {...this.props} />}/> </Stack.Navigatior> </NavigationContainer> </SafeAreaView> ) } } export default App;

After I run with npm run ios command, the console gives me this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I don't understand what is this error about, what am I missing here? how can I navigate between the screens in react-native?

Any help will be much appreciated. Thank You.

Regards

Answer 1

Well, I made it works. Here are the changes I made:

1. Remove SafeAreaView from App.js
2. Add {Suspense} in App.js because I forgot that React.lazy depends on Suspense
3. Use SafeAreaView in Home and SplashScreen imported from 'react-native'

App.js

 import React, {Suspense} from 'react'; import {SafeAreaView, Text} from 'react-native'; import {NavigationContainer} from '@react-navigation/native'; import {createStackNavigator} from '@react-navigation/stack'; const SplashScreenContainer = React.lazy(() => import('./app/containers/SplashScreenContainer')); const HomeContainer = React.lazy(() => import('./app/containers/HomeContainer')); const Stack = createStackNavigator(); const Loading = () => { return ( <SafeAreaView> <Text>Loading</Text> </SafeAreaView> ) }; const Routes = () => { return ( <NavigationContainer> <Stack.Navigator initialRouteName='SplashScreenContainer'> <Stack.Screen name='SplashScreenContainer' component={SplashScreenContainer} options={{ headerShown: false }} /> <Stack.Screen name='HomeContainer' component={HomeContainer} options={{ headerShown: false }} /> </Stack.Navigator> </NavigationContainer> ) } class App extends React.PureComponent { render() { return ( <Suspense fallback={<Loading/>}> <Routes/> </Suspense> ) } } export default App;

SplashScreenContainer.js

 import React from 'react'; import {Button, SafeAreaView} from 'react-native'; class SplashScreenContainer extends React.PureComponent { constructor(props) { super(props); } redirectToHome = () => { const {navigation} = this.props; navigation.navigate('HomeContainer'); }; render() { return ( <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Button onPress={() => this.redirectToHome()} title='Go To Home Screen'/> </SafeAreaView> ) } } export default SplashScreenContainer;

HomeScreenContainer.js

 import React from 'react'; import {Button, SafeAreaView} from 'react-native'; class HomeContainer extends React.PureComponent { redirectToSplash = () => { const {navigation} = this.props; navigation.navigate('SplashScreenContainer'); }; render() { return ( <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Button onPress={() => this.redirectToSplash()} title='Go To Splash Screen'/> </SafeAreaView> ) } } export default HomeContainer;

Everything's working now, I'm able to switch between SplashScreen and HomeScreen when button is clicked/tapped.