CODEWITHSUNDEEP
reactjsreact-nativeecmascript-6react-navigation
AlxVallejo
AlxVallejo

Reputation: 3238

React Native: Passing props to nested navigation

I'm using the slick React Navigation and following the nested navigation recipe here, but i don't know how to pass 'this' to my navigation. Sorry for my ignorance.

Here is my general structure outline:

class MyApp extends Component {
  render() {
    return (
      <StackNavigation
        screenProps={this.state}
      />
    )
  }
}

const MainScreenNavigator = TabNavigator(
  {
    Awesome: { screen: Awesome } // How do I pass this.state?
  }
)

const routesConfig = {
  Home: { screen: MainScreenNavigator },
  Profile: { screen: Profile }
}

const StackNavigation = StackNavigator(routesConfig, {initialRouteName: 'Home'})

So how do I pass this.state to my MainScreenNavigator?

Upvotes: 1

Views: 6017

Answers (2)

Edwin Vargas
Edwin Vargas

Reputation: 1237

According to this, you can pass an extra option to the StackNavigator in the StackNavigatorConfig. Something like this:

const StackNavigation = StackNavigator(routesConfig, StackNavigatorConfig)

... where the StackNavigatorConfig is an object like:

{ initialRouteName: 'Home', initialRouteParams: {...this.state} }

And that is gonna pass all your state to the initial route of your navigator.

For any other route you can do:

this.props.navigation.navigate('SomeScreen', {<the-greatest-object-for-pass-down>})

And that is gonna pass the-greatest-object-for-pass-down to SomeScreen.

Finally, you can access to that params for both (the initial and any other screen) with this.props.navigation.params.

Upvotes: 5

Sricharan Kambhammettu
Sricharan Kambhammettu

Reputation: 308

not sure if you can pass the state as-is. However the params you passed can be accessed by the next screen as follows.. you can try this

  this.props.navigation.state.params.<<property passes>>

Upvotes: 3

Related Questions