Cannot read property of 'navigate' of undefined-CodePudding

I am trying to make a stack navigator using reactstack navigation. When the button clicks, it appears on the detail screen only, the title of the page is detail. I am not yet to parsing data array to the next screen, it just tries to navigate the screen into the detail screen, and gets this error. I am new to react. Please help me solve this problem.

import React from 'react'
import {Button, StyleSheet, ScrollView, Text, View} from 'react-native'
import {useState, useEffect} from 'react'
import axios from 'axios'


const Item = ({id, user_id, title, onPress, navigation}) => {
  
    return (
        <View style={styles.container}>
            <Text style={styles.text}>Id :{id}
            </Text>
            <Text style={styles.text}>User Id :{user_id}
            </Text>
            <Text style={styles.text}>Tittle :{title}
            </Text>
            <View style={styles.container}>
                <Button onPress={() => navigation.navigate('Detail')} title='Detail'></Button>
            </View>
            <View style={styles.line}></View>
        </View>
    )

}


const Berita = () => {
    const [users,
        setUsers] = useState([]);


    useEffect(() => {
        getData();
    }, []);

    const selectItem = (item) => {
        console.log('Selected item: ', item)
    }

    const getData = () => {
        axios
            .get('https://gorest.co.in/public/v1/posts')
            .then(res => {
                console.log('res: ', res);
                setUsers(res.data.data);
            })
    }

    return (
        <ScrollView style={styles.container}>
            {users.map(user => {
                return <Item key={user.id} id={user.id} user_id={user.user_id} title={user.title}/>
            })}
        </ScrollView>

    )
}

export default Berita

const styles = StyleSheet.create({
    container: {
        padding: 15
    },
    text: {
        color: "black",
        marginTop: 5,
        fontStyle: 'italic',
        fontSize: 18,
        fontFamily: 'Arial'
    },
    line: {
        height: 1,
        backgroundColor: 'black',
        marginVertical: 20
    },
    title: {
        fontSize: 25,
        fontWeight: 'bold',
        textAlign: 'center',
        color: "black"
    },
    tombol: {
        padding: 10
    }

})

This is the stack screen navigator code

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const DetailBerita = () => {
    return (
        <Stack.Navigator >
            <Stack.Screen
                name='Berita'
                component={Berita}
                options={{
                headerTitleAlign: 'center'
            }}/>
            <Stack.Screen
                name="Detail"
                component={Detail}
                options={{
                headerTitleAlign: 'center'
            }}/>
        </Stack.Navigator>
    )
}

CodePudding user response：

It appears that you are using Stack Navigators with different screen names, but you didn't send it. If possible, can you send that file, I would be able to help you a bit better. But from what I have I can try and explain how Stack navigation works. With this line of code:

navigation.navigate('Detail')

You specify that you want to navigate to the screen named "Detail", if you want to navigate to another screen then you can change it to the name of the screen. Let's say you want to navigate to your home screen, and its named "Home" in your Stack.Navigation component. Simply change your navigation to the following:

navigation.navigate('Home')

CodePudding user response：

navigation.navigate('Berita')

Try this then.