CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-stackreact-navigation-bottom-tabreact-navigation-v5
Ali
Ali

Reputation: 514

Passing params in React Navigation 5

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!

Upvotes: 3

Views: 15348

Answers (5)

Pranay
Pranay

Reputation: 304

send

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

receive in YourScreenName.js 

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

Upvotes: 0

Santosh Kumar
Santosh Kumar

Reputation: 580

In Functional Component write simple logic like this:-

  1. In the parent component
<TouchableOpacity onPress={()=>navigation.navigate('childRoute', {data_Pass_to_Child: "Hello I am going to child component"})}>
  1. 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.

Upvotes: 0

Mr.Ghamkhar
Mr.Ghamkhar

Reputation: 567

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

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

Upvotes: 1

Bilal Ahmad
Bilal Ahmad

Reputation: 859

/* 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/

Upvotes: 5

Ali
Ali

Reputation: 514

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

Upvotes: 3

Related Questions