Search code examples
react-nativereact-navigationrouteparams

Reactnavigation params error "undefined is not an object evaluating route.params"


I get the error mentioned in the title and solutions like this one do not seem to work.

The user starts on screen 1 and then goes to several other screens before ending up on screen 1 again. When the user goes to screen 1 (again) I want to pass some params (and somehow use thos params to force a re-render of that component). This is my code:

Screen 1

function Screen 1(props, { route, navigation }) {
...
const { itemId } = route.params;
  console.log(itemId);

Screen X (the last screen the user visits before going back to screen 1)

      onPress={() => {
            props.navigation.navigate("Screen_1", { itemId: Doe });
          }}

Solution

  • You cannot mix destructuring of props and the props object at the same time, hence the statement

    function Screen1(props, { route, navigation }) { ... }
    

    is not valid.

    You need to either destructure everything you need from props or use the props object.

    function Screen1({ route, navigation }) {
    
        const { itemId } = route.params
    }
    

    or

    function Screen1(props) {
        const { itemId } = props.route.params
    }