cannot read property navigate of undefined-CodePudding

I am getting this error cannot read the property of navigate when try to navigate to the SignInScreen

this is the splash screen that have created

import React from 'react';
import { 
    View, 
    Text, 
    TouchableOpacity, 
    Dimensions,
    StyleSheet,
    StatusBar,
    Image
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import LinearGradient from 'react-native-linear-gradient';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { useTheme } from '@react-navigation/native';

const SplashScreen = ({navigation}) => {
    const { colors } = useTheme();

    return (
      <View style={styles.container}>
          <StatusBar backgroundColor='#009387' barStyle="light-content"/>
        <View style={styles.header}>
            <Animatable.Image 
                animation="bounceIn"
                duraton="1500"
            source={require('../assets/logo.png')}
            style={styles.logo}
            resizeMode="stretch"
            />
        </View>
        <Animatable.View 
            style={[styles.footer, {
                backgroundColor: colors.background
            }]}
            animation="fadeInUpBig"
        >
            <Text style={[styles.title, {
                color: colors.text
            }]}>Stay connected with everyone!</Text>
            <Text style={styles.text}>Sign in with account</Text>
            <View style={styles.button}>
                
            <TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}>
                <LinearGradient
                    colors={['#08d4c4', '#01ab9d']}
                    style={styles.signIn}
                >
                    <Text style={styles.textSign}>Get Started</Text>
                    <MaterialIcons 
                        name="navigate-next"
                        color="#fff"
                        size={20}
                    />
                </LinearGradient>
            </TouchableOpacity>
            </View>
        </Animatable.View>
      </View>
    );
};

export default SplashScreen;

this is the main App.js FILE WHICH IS THE ROOT FILE

 const Drawer = createDrawerNavigator();

// const [isEnabled, setIsEnabled] = React.useState(false);


export default function App() {

  return (
    <PaperProvider theme={PaperDarkTheme}>
      <SplashScreen />
     
    </PaperProvider> 
  );
}

CodePudding user response：

Looks like you missed to wrap main Navigation container and then drawer this can work :

    import * as React from 'react';
    import { Button, View } from 'react-native';
    import { createDrawerNavigator } from '@react-navigation/drawer';
    import { NavigationContainer } from '@react-navigation/native';
    
    
    const Drawer = createDrawerNavigator();
    
    // const [isEnabled, setIsEnabled] = React.useState(false);
    
    
    export default function App() {
    
      return (
        <PaperProvider theme={PaperDarkTheme}>
         <NavigationContainer>
          <Drawer.Navigator initialRouteName="splash">
             <Drawer.Screen name="splash" component={SplashScreen } />
              {// other Screens}
          </Drawer.Navigator>
         </NavigationContainer>
         
        </PaperProvider> 
      );
    }