Passing params in React Navigation 5

Question

I'm trying to pass a few params between a Tab Navigator. Below is the structure of my program. In bold are the routes

App(Tab Navigator): { Main(stack) & Filter(screen) }

Main(Stack Navigator): { Home(screen) & MediaDetails(screen) }

I have a button on the screen associated with Filter which has an onPress() function. I'm passing a few params(but let's only consider the param to for the sake of this question).

this.props.navigation.navigate('Home', {
    to: this.state.to,
}

Now in the screen associated with Home, I'm reading the param inside the state like this:

state = {
    to: this.props.route.params.to
}

Inside App.js, I've set the initial value of to to be '2020' like this:

<Stack.Screen 
    name="Home" 
    component={HomeScreen}                 
    initialParams={{
       to: '2020'
    }}
/>

The initial value is indeed set to 2020. I press the button. Let's say I'm setting to to 1900. Just before this.props.navigation.navigate executes, I console.log(this.state.to) the value and it is indeed updated to 1900. However, as the screen changes to Home, the value reverts back to 2020(observed via console.log)

Could someone point out the cause for this spooky behavior? I've been trying to debug this for many hours with no luck. React Navigation 5 is pretty new as well so couldn't find anything similar online. Any help will be greatly appreciated. Thank you for reading all the way.

Edit: Issue has been resolved and full code has been removed!

Thanks for showing interest. I've included the full code now. — Ali, Feb 14 '20 at 03:46
Use debugger instead of console.log https://stackoverflow.com/questions/11284663/console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-ch — Siraj Alam, Feb 18 '20 at 20:44

score 5 · Answer 1 · answered Jun 26 '20 at 23:29

/* 1. Navigate to the Details route with params */

onPress={() => {
      navigation.navigate('Details', {
        itemId: 86,
        otherParam: 'anything you want here',
      });
    }}

/* 2. Get the param */

const DetailsScreen = ({ route, navigation }) => {
   const { itemId } = route.params;
   const { otherParam } = route.params;
   return (
    <View></View>
    );
};

for more info: https://reactnavigation.org/docs/params/

if it is class Component how to get param – pavan kvch Oct 18 '20 at 12:51 — pavan kvch, Oct 18 '20 at 12:51

Ali · Accepted Answer · 2020-04-10T08:42:18.123

3

I solved this problem by updating the state in shouldComponentUpdate().

This bug was due to the state not being updated as the screen remained mounted.

This was possible because of ravirajn22 on GitHub who explained to me the reasoning behind this bug and a possible solution.

Link to the answer: https://github.com/react-navigation/react-navigation/issues/6863

edited Apr 10 '20 at 08:42

answered Feb 19 '20 at 17:58

Ali

484
3
5
16

can you post that answer or at least a link to it? – Variag Apr 10 '20 at 08:32
1

I’ve posted the link now. Thank you! – Ali Apr 10 '20 at 08:43

score 1 · Answer 3 · answered Oct 19 '20 at 06:46

1

As it is stated Here, you can do it like this:

navigation.navigate('otherStackName', {
  screen: 'destinationScreenName',
  params: { user: 'jane' },
});

answered Oct 19 '20 at 06:46

Mr.Ghamkhar

557
8
12

score 0 · Answer 4 · edited Apr 22 '21 at 09:17

In Functional Component write simple logic like this:-

In the parent component

<TouchableOpacity onPress={()=>navigation.navigate('childRoute', {data_Pass_to_Child: "Hello I am going to child component"})}>

In the child component

const Chat = ({route}) => { 
    console.log(route.params.data_Pass_to_Child);
    return(whatever based on your UI)
}

Note: Replace childRoute with your route name and also replace data {data_Pass_to_Child: "Hello I am going to child component"} with whatever data you want to pass.

score 0 · Answer 5 · answered Aug 06 '21 at 15:45

0

send

props.navigation.navigate('YourScreenName', {
    your_key: any_value
});

receive in YourScreenName.js

var valueReceived = props.navigation.state.params.your_key;

answered Aug 06 '21 at 15:45

chris

194
2
10

Passing params in React Navigation 5

5 Answers5