How to use navigation.navigate() in map function-CodePudding

I'm trying to display a list of TouchableOpacity to navigate to an other page with navigation.navigate(...).

I'm using map to display the list but I can't navigate, the onPress don't work with this error message : "undefined is not an object (evaluating 'navigation.navigate')

What am I doing wrong ?

function PopupMenuAction ({navigation}) {
   return (
        <>
            <TouchableOpacity style={style.shape1to2} onPress={() => resizeBox(1)}>
                <Text style={style.subtext}>Add <Text style={{ color: layouts.secondary }}> </Text></Text>
            </TouchableOpacity>
            <Modal transparent visible={visible}>
                <SafeAreaView style={{ flex: 1 }} onTouchStart={() => resizeBox(0)}>
                    <Animated.View 
                    style={[
                        style.popUp,
                            { opacity: scale.interpolate({ inputRange: [0, 1], outputRange:[0, 1]}) },
                            { transform: [{ scale }]},
                        ]}
                    >
{/* THERE IS THE CODE WHERE IT DONT WORK 

=>>>*/}

                        {actions.map((op, i) => (
                            <TouchableOpacity style={[
                                style.option,
                                { borderBottomWidth: i === actions.length - 1 ? 0 : 1 }]}
                                key={i}
                                onPress={() => navigation.navigate('CreateReaction')}
                            >
                                <Text style={{ fontFamily: "Title-Font", fontSize: 15 }}>{op.title}</Text>
                            </TouchableOpacity>
                        ))}

                        
                    </Animated.View>
                </SafeAreaView>
            </Modal>
        </>
    )
}

CodePudding user response：

Believe navigation does not exist in your functional components because the error indicates it is undefined.

Try to import the useNavigation() hook from react-navigation library and use the returned navigate function.

import { useNavigation } from '@react-navigation/native';

function PopupMenuAction ({navigation}) {

   const { navigate } = useNavigation()

   return (
      // rest of your code
   )

docs: https://reactnavigation.org/docs/use-navigation/