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('./screens/SplashScreenContainer'));
const HomeScreenContainer = React.lazy(() => import('./screens/HomeScreenContainer'));
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='HomeScreenContainer'
component={HomeScreenContainer}
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('HomeScreenContainer');
};
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 HomeScreenContainer 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 HomeScreenContainer;
I am new to React Native application development. I am facing issues while trying to import screens in App.js file but it keeps on giving me an error called "Unable to resolve module './screens/SplashScreenContainer'.
How can I resolve this error?