TypeError: undefined is not an object (evaluating 'route.params')

user_13390598 0
Viewed 6411

I have a Drawer Navigator set up, with various screens.

On one screen, I have a FlatList with a simple TouchableOpacity like below:

 <TouchableOpacity
              onPress={() =>
                navigation.navigate("ViewProject", {
                  screen: "viewProject",
                  params: { projectID: item.projectID },
                })
              }
            >
 </TouchableOpacity>

The navigation works, going to the viewProject screen, but no matter what I seem to try the route.params just doesn't seem to exist.

  export default function viewProject({ route }) {
  const projID = route.params?.projectID ?? 0; // ERRORS with TypeError: undefined is not an object (evaluating 'route.params')
  console.log(projID);

}

I'm using the latest React Native, Navigation etc and TypeScript.

My only success is setting the initialRouteParams on the createStackNavigator that feeds into the drawer, and yet that's only accessible via navigation.state.params:

const screens = {
  viewProject: {
    screen: viewProject,   
    navigationOptions: ({ navigation }) => {
      return {
        headerTitle: () => (
          <Header navigation={navigation} title={"View Project"} />
        ),
      };
    },
  },
};

const viewProjectStack = createStackNavigator(screens, {
  initialRouteParams: { projectID: 23 }, // This works, but it's static and I can't change it  
});

Thanks in advance. Stewart

react-navigation react-native reactjs
1 Answers

You can pass like this:- 

<Button
title="Go to Details"
onPress={() => {
  /* 1. Navigate to the Details route with params */
  navigation.navigate('Details', {
    itemId: 86,
    otherParam: 'anything you want here',
  });
}}

/>

and receive like this:-

function DetailsScreen({ route, navigation }) {
 /* 2. Get the param */
 const { itemId } = route.params;
const { otherParam } = route.params;
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>itemId: {JSON.stringify(itemId)}</Text>
 <Text>otherParam: {JSON.stringify(otherParam)}</Text>
  );
  }

source

Hope it helps!!!

user_104074850
Related