32

i try to pass props on stacknavigator, here my code

const MainCart = StackNavigator({
  Cart: {
    screen: CartScreen
  },
  Checkout: {
    screen: COScreen
  }

  /* how to pass 'myprops' in this area? */

});


export default class ReactNative_RefreshControl extends Component {

  constructor(props) {
    super(props)
  }

  render() {
    console.log('ReactNative_RefreshControl this.props.myparam : ' + this.props.myparam);
    return <MainCart myprops = {
      this.props.myparam
    }
    />;

    //https://reactnavigation.org/docs/navigators/stack#Navigator-Props
  }


}

how to pass 'myprops' on StackNavigator area?

thanks

2

9 Answers 9

39

React Navigation < 5

If you want to pass props in that place you have to use it like this.

const MainCart = StackNavigator({
 Cart: {
    screen: props=> <CartScreen {...props} screenProps={other required prop}>
 },
 Checkout: {
    screen: COScreen
 }

If you want to pass props when navigating the solution by Sagar Chavada is useful

React Navigation - 5

You have to either use React Context(recommended) or a render callback to solve this. Documentation link

Below example shows how to do with React Context

In your parent of the navigator file create a context

<AppContext.Provider value={other required prop}>
   <YourNavigator/>
</AppContext.Provider>

In your navigator file

const YourNavigator = () => (
  <AppStack.Navigator>
     <AppScreen.Screen name={"routeName"} component={AppContextWrapper}/>
  </AppStack.Navigator>

const AppContextWrapper = ({ navigation, route }) => (
  <AppContext.Consumer>
    {(other required prop) => (
       <YourScreenComponent {...other required prop}/>
    )}
  </AppContext.Consumer>
);

another easy (not recommended) - Callback method

<Stack.Screen name="Home">
  {props => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>

Note: By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use React.memo or React.PureComponent for your screen components to avoid performance issues.

7
  • This is not working for me, I am able to see only navigation props.
    – Pushpendra
    Commented Jun 21, 2018 at 6:28
  • What are the props you are sending? Commented Jun 21, 2018 at 10:23
  • 1
    @shan Added for React Navigation 5 Commented Apr 17, 2020 at 13:14
  • 1
    @AshwinMothilal thanks for the answer. It looks like hack/workaround. Does the RN5 have a more convenient way to do this?
    – shan
    Commented Apr 18, 2020 at 18:02
  • 3
    @shan I have added an example for one more way but using React Context library is the recommended way. Commented Apr 19, 2020 at 6:06
23

For those who are looking for React Navigation 5

<Stack.Navigator initialRouteName="LoginScreen" headerMode="none">
 <Stack.Screen name="LoginScreen" component={LoginScreen} initialParams={{'key':'value'}} />
 <Stack.Screen name="CodeVerificationScreen" component={CodeVerificationScreen} initialParams={{'key':'value'}} />
</Stack.Navigator>

You can receive initial params in login.js

console.log(this.props.route.params.key)
10
**React-navigation v3**

in your click event do like this:

    onPressed(movie){
        this.props.navigation.navigate(
          'screen',
          {movie: movie}
        });
      }

<TouchableHighlight onPress={() => this.onPressed(movie)}>

and in other screen you can set like this:

export default class NavigateTo extends Component {
  constructor(props){
    super(props);

    this.state = {
        name: this.props.navigation.state.params.movie.title,
        year: this.props.navigation.state.params.movie.year
    }
  }

movie is a json object that contain title, year, release date, earning, poster, etc..

this one is for old navigation:

onPressed(movie){
    this.props.navigator.push({
      id:'page2',
      movie: movie
    });
  }

and in second screen:

this.state = {
        name: this.props.movie.title,
        email: this.props.movie.year
    }

now you can see the difference

if this not work than try like this

<Button title="Second" onPress={() => navigate("MainCart",{},
  {
    type: "Navigate",
    routeName: "Checkout",
    params: {name:"Jo"}
  }
)} />

check this for nested stack navigation https://github.com/react-community/react-navigation/issues/143

2

In my case I wanted to pass a function to show toast with conte for every component, I ended up achieving it by using screenProps and overriding each component:

export default class App extends React.Component {
  constructor(props) {
  super(props);
}

showToast = (text) => {
  this.refs.toast.show(text, DURATION.FOREVER);
};

render() {
  return <Provider store={store}>
    <View style={styles.wrapper}>[
      <MyAppNavigator showToast={this.showToast}/>,
      <Toast ref="toast"/>
      ]
    </View>
  </Provider>;
  }
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1
  }
});


const createNavigator = (screenProps) => {
  const toastWrapper = (Component, props, screenProps) => {
    return <Component {...props} screenProps={screenProps}/>
  };
  return createStackNavigator({
    login: {
      screen: props => toastWrapper(LoginView, props, screenProps),
      navigationOptions: () => {
        return {header: null}
      }
    },
    map: {
      screen: props => toastWrapper(FieldMap, props, screenProps),
      navigationOptions: () => ({
        title: 'Map'
      })
    }
  })
};

const MyAppNavigator = (props) => {
  const AppNavigator = createNavigator(props);
  return <AppNavigator/>
};

Then from my component:

this.props.screenProps.showToast("Logging you in");
2

Lets assume you want to pass the parameter myTheme via props through the navigation. On React Navigation 5 you can do so

...    
const myTheme = {...}
 return(
        <ProfileStack.Navigator initialRouteName='ProfileWithSettings'>
           <ProfileStack.Screen name={'ProfileWithSettings'}>
                {props => <ProfileWithSettings {...props} theme={myTheme}/>}
           </ProfileStack.Screen>
        <ProfileStack.Navigator/>
    );

on the ProfileWithSettings component you could then refer to myTheme as follows:

this.props.theme
0

I need to send props from main component to StackNavigator and then passing down to it's component, I used screenProps to do that.

Your main function should look like this:

render() {
    return <MainCart screenProps={this.props.params}
    />;
  }

After that in navigator screen you can access it like this:

this.props.screenProps.params
2
  • Both are correct but both are different things, you are sending screenProps from component to StackNavigator. I'm sending screenProps from StackNavigator to component. Commented Jun 22, 2018 at 6:10
  • yeah my problem was like sending props from the main component to stack navigator further passing down them to navigator's components.
    – Pushpendra
    Commented Jul 16, 2018 at 7:17
0

My previous answer holds if you are trying to access the app level from a navigation view, however, if you want to simply change the header or something like that you don't have to pass the params to your navigator.

A little bit of React magic:

export default class ReactNative_RefreshControl extends Component {
  constructor(props) {
    super(props)
  }

  //this function will override the navigation options specified in MainCart component
  static navigationOptions = ({navigation}) => {
    return {
      headerTitle: navigation.state.params.name,
      headerRight: <Button onPress={navigation.state.params.onClick}/>
    };
  };

  componentDidMount() {
    this.props.navigation.setParams({
      name: "name",
      onClick: this.onClick
    });
  }
  ...
}
0

For Passing params from children of one stackNavigator to children of another stackNavigator in v5 react-navigation

const SecondStackNavigator = props => {
const stackOptions = {};
return (
  <Stack.Navigator headerMode={"none"} screenOptions={stackOptions}>

    <Stack.Screen name={"market"}>{() => <SecondScreen {...props} />}
   //Here the props is passed with spread operator to children 

  </Stack.Screen>

); };

0

For everybody who is finding a solution for react-navigation 6.x:

According to react-navigation doc:

Passing params to a previous screen​

Params aren't only useful for passing some data to a new screen, but they can also be useful to pass data to a previous screen too. For example, let's say you have a screen with a create post button, and the create post button opens a new screen to create a post. After creating the post, you want to pass the data for the post back to previous screen.

To achieve this, you can use the navigate method, which acts like goBack if the screen already exists. You can pass the params with navigate to pass the data back:

function HomeScreen({ navigation, route }) {
  React.useEffect(() => {
    if (route.params?.post) {
      // Post updated, do something with `route.params.post`
      // For example, send the post to the server
    }
  }, [route.params?.post]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Create post"
        onPress={() => navigation.navigate('CreatePost')}
      />
      <Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
    </View>
  );
}

function CreatePostScreen({ navigation, route }) {
  const [postText, setPostText] = React.useState('');

  return (
    <>
      <TextInput
        multiline
        placeholder="What's on your mind?"
        style={{ height: 200, padding: 10, backgroundColor: 'white' }}
        value={postText}
        onChangeText={setPostText}
      />
      <Button
        title="Done"
        onPress={() => {
          // Pass and merge params back to home screen
          navigation.navigate({
            name: 'Home',
            params: { post: postText },
            merge: true,
          });
        }}
      />
    </>
  );
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.