(‘navigation.navigate’) undefined is not an object

I’m working on the TouchaleOpacity with onPress to navigate to screen called ‘SignInScreen’, but isn’t work … (onPress={() => navigation.navigate(‘SignInScreen’)}) That error TypeError: undefined is not an object (evaluating ‘navigation.navigate’). Please help me fix this problem. I’ve done many stuff but still I can’t’ fix it.

IMPORTS

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

const WelcomeScreen = ({navigation}) => {
    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Animatable.Image 
                animation="bounceIn" duration={1500} source={require('../assets/logo1.png')} style={styles.logo} resizeMode="stretch"/>
            </View>
            <Animatable.View style={styles.footer} animation="fadeInUpBig">
                <Text style={styles.title}>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={['#d60939', '#ad022a']} style={styles.signIn} title="Go to SignInScreen">
                        <Text style={styles.textSign}>Get Started</Text>
                        <MaterialIcons name="navigate-next" color="#fff" size={20}/>
                    </LinearGradient>
                </TouchableOpacity>
                </View>
            </Animatable.View>
        </View>
    );
}

const {height} = Dimensions.get("screen");
const height_logo = height * 0.28;

const styles = StyleSheet.create({
    background: {
        flex: 1,
        justifyContent: "flex-end",
        alignItems: 'center',
    },
    container: {
        flex: 1, 
        backgroundColor: '#cfcfcf'
    },
    loginButton: {
        width: '100%',
        height: 60,
        backgroundColor: '#242222',
    },
    registerButton: {
        width: '100%',
        height: 60,
        backgroundColor: '#0d0c0c',
    },
    logo: {
        width: height_logo,
        height: height_logo,
    },
    button: {
        alignItems: 'flex-end',
        marginTop: 30
    },
    header: {
        flex: 2,
        justifyContent: 'center',
        alignItems: 'center'
    },
    footer: {
        flex: 1,
        backgroundColor: '#fff',
        borderTopLeftRadius: 30,
        borderTopRightRadius: 30,
        paddingVertical: 50,
        paddingHorizontal: 30
    },
    logoContainer: {
        position: 'absolute',
        top: '20%',
        alignItems: 'center',
    },
    title: {
        color: '#05375a',
        fontSize: 30,
        fontWeight: 'bold'
    },
    text: {
        color: 'grey',
        marginTop:5
    },
    signIn: {
        width: 150,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 50,
        flexDirection: 'row'
    },
    textSign: {
        color: 'white',
        fontWeight: 'bold'
    },
    apptitle: {
        fontWeight: "bold",
        color: 'white',
        textShadowColor: 'rgba(0, 0, 0, 0.75)',
        textShadowOffset: {width: -1, height: 1},
        textShadowRadius: 10,
        padding: 5,
        borderRadius: 10,
        fontSize: 40,
        letterSpacing: 10,
    },
    info: {
        fontWeight: "bold",
        color: 'white',
        top: 20,
        borderRadius: 10,
        fontSize: 20,
        textAlign: 'center',
    },
    logindetails: {
        width: '70%', 
        height: 60, 
        backgroundColor: 'white', 
        textAlign: 'center',
        borderRadius: 50,
        margin: 5,
        color: 'black',
        bottom: '27%',
    },
})


export default WelcomeScreen;

OUTPUT

Uncaught Error: undefined is not an object (evaluating 'navigation.navigate')

SingInScreen what I want to navigate

import React from 'react'
import { View, Text, Button, StyleSheet } from 'react-native'

const SignInScreen = () => {
    return (
        <View>
            <Text>SignInSreen</Text>
            <Button title="Click Here" onPress={() => alert('Button Clicked!')}/>
        </View>
    )
}

export default SignInScreen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
})