How to pass props in StackNavigator

Question

const MainNavigator = StackNavigator({
  Home: {
    screen: Tabs
  },

  Collection_Products : {
    screen : Collection_Products,
    navigationOptions :  ({ navigation }) => ({

      title : `${navigation.state.params.name.toUpperCase()}`
    }),
  },

  MainProduct : {
    screen : (props) => <MainProduct {...props} />,
  },

});


export default class MainNav extends React.Component {
  constructor() {
    super();
    this.state = {
      checkout: { lineItems: { edges: [] } }
    };

  }

 method1 = (args) => {

}
  render() {

    return (
      <View style={{flex: 1}}>
       <MainNavigator checkout= {this.state.checkout} method1 = {this.method1}/>
      </View>
    );
  }
}

I am using react native to build application. I want to pass method 1 to different child components. How can I pass method1 function in MainProduct Component? With the syntax I am using I am only able to pass navigator props to child components.

Answer 1

You need to send the props as below. You need to send props name as 'screenProps' literally then only it is send. Yeah, This is little strange. I tried to change the name of the props, it did not get trough.

const propsForAll = {
checkout:/*your checkout data */, 
method1: /**Your medhod1*/
}

<View style={{flex: 1}}>
       <MainNavigator screenProps={propsForAll}/>
      </View>