cannot read property navigate of undefined - react-native

Question

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

Answer 1

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