CODEWITHSUNDEEP
reactjsreact-nativereact-reduxstack-navigator
hitarth
hitarth

Reputation: 33

How to pass props in StackNavigator

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.

Upvotes: 3

Views: 4606

Answers (3)

cYee
cYee

Reputation: 2184

The accepted answer is outdated for React Navigation v5 and v6

screenProps is no longer available, which caused several problems.

Use react context instead

Quote from react-navigation 5.x,

Due to the component based API of React Navigation 5.x, we have a much better alternative to screenProps which doesn't have these disadvantages: React Context. Using React Context, it's possible to pass data to any child component in a performant and type-safe way, and we don't need to learn a new API!

Alternatively, you may use routeProps

Passing parameters to routes. v6 doc

navigation.navigate('RouteName', { /* params go here */ })

In case you are new to context

Here is how you may use context to pass props.

Example:

  import React from 'react'

  // Create context outside of your component
  // which can be export to your child component
  const MyContext = React.createContext()

  export default function MyParentComponent() {
    const myContext = {
      whatIWhatMyChildToKnow: 'Hi, I am your father.',
    }
    return (
      <MyContext.Provider value={myContext}>
         // Dont pass your own props to your navigator 
         // other than RNavigation props
        <YourStackNavigator>
          ...stack logic
        </YourStackNavigator>
      </MyContext.Provider>
    )
  }

  // access your context value here
  function MyChildScreen() {
    const { whatIWhatMyChildToKnow } = React.useContext(MyContext)
    // will display 'Hi, I am your father.'
    return <span>{whatIWantMyChildToKnow}</span>
  }

Upvotes: 4

Kunal
Kunal

Reputation: 604

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>

Upvotes: 1

Anthony
Anthony

Reputation: 6502

I think you may want screenProps, from the docs:

const SomeStack = StackNavigator({
  // config
});

<SomeStack
  screenProps={/* this prop will get passed to the screen components as 
  this.props.screenProps */}
/>

Upvotes: 0

Related Questions