const Item = ({ item }) => (
    <TouchableOpacity
          onPress={() => this.navigation.navigate(
            "carProfile", 
          {item: item}
        )}>
  <View style={styles.item}>
    <Text style={styles.title}>{item.name}</Text>
    <Text style={styles.details}>{item.details}</Text>
  </View>
        </TouchableOpacity>
);
const List = (props,navigation) => {
  const renderItem = ({ item }) => {
    if (props.searchPhrase === "") {
      return <Item item={item} />;
    }
    if (item.name.toUpperCase().includes(props.searchPhrase.toUpperCase().trim().replace(/\s/g, ""))) {
      return <Item item={item} />;
    }
    if (item.details.toUpperCase().includes(props.searchPhrase.toUpperCase().trim().replace(/\s/g, ""))) {
      return <Item item={item} />;
    }
  };

  return (
    <SafeAreaView style={styles.list__container}>
      <View
        onStartShouldSetResponder={() => {
          props.setClicked(false);
        }}
      >
        <FlatList
          data={props.data}
          renderItem={renderItem}
          keyExtractor={(item) => item.id}
        />
      </View>
    </SafeAreaView>
  );
};

export default List;

the error is continuing to be there despite me trying to put navigation container in different positions. I want to send the user to the carProfile page, where the data passed in item is reused. This way user can know about the selection they are looking for

CodePudding user response：

Use this way

onPress={() => this.props.navigation.navigate(
            "carProfile", 
          {item: item}
)}

CodePudding user response：

The navigation is inside the props, not as a second argument. Below is a classic example. And also note, you cannot extract navigation prop for child components, it will only work on Main components(Screens).

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

If you want to use navigation inside child components, you can use the navigation hooks.

import { useNavigation } from "@react-navigation/native";
function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}