How to import class in React Native

Viewed 82
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?

0 Answers
Related