react native - Pass Props StackNavigator

Question

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
  }


}

Answer 1

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.