undefined 不是 onPress 的 object（评估 this.props.navigation.navigate）

Question

I'm new to react native and getting this error:

undefined is not an object (evaluating this.props.navigation.navigate)

This is a very common error, but the cause can be different as I'm unable to fix it by seeing other answers to similar questions.

I have a screen that has this code:

function MyClientsScreen(props) {

    return (
        <Stack.Navigator>
            <Stack.Screen name='Clients' component={ClientSrc} options={{
                title: 'My Clients',
                headerRight: () => (
                    <TouchableOpacity onPress={() => props.navigation.navigate('AddClients')}>
                        <Image source={require('../assets/addClient.png')} style={styles.addBtnImg} />
                    </TouchableOpacity>
                ),
            }} />
            <Stack.Screen name='AddClients' component={AddClientSrc} options={{
                title: 'Add New Client',
                headerRight: () => (
                    <TouchableOpacity>
                        <Text style={styles.headerButtton}>Save</Text>
                    </TouchableOpacity>
                )
            }} />
        </Stack.Navigator>
    );
}

The headerRight button on the current screen should navigate to AddClients (which is inside the stack navigation) when pessed.

navigation is not defined anywhere and I was able to do it when I had the button code inside a function that I made const ClientSrc = ({ navigation }) => {... but when I moved the button as a headerRight button, the onPress started throwing the error.

Answer 1

In order to get a navigation prop that component should be part of navigation.

You can handle this differently like below

<Stack.Screen name='Clients' component={ClientSrc} options={({ navigation }) => ({
                title: 'My Clients',
                headerRight: () => (
                    <TouchableOpacity onPress={() => navigation.navigate('AddClients')}>
                        <Image source={require('../assets/addClient.png')} style={styles.addBtnImg} />
                    </TouchableOpacity>
                ),
            })} />

The options passes navigation to the function that is given you can use that and get access to navigation.