CODEWITHSUNDEEP
react-nativereact-navigation
Matthew Dejager
Matthew Dejager

Reputation: 329

React Navigation(v2) How to pass props to my TabNavigator and send those props to a screen

I am new to React-Native and React. I am trying to implement a simple Tab Navigation on my mobile app using React Navigation (v2)

Basically there are two files:

Router.js

// imports...

const Tabs = TabNavigator(
{
  Logs: { 
      screen: Logs,
      // here I would like to recieve the jwt and pass it as a param to the logs screen
     },
  NewRide: { 
      screen: NewRide
     }
},
 {navigationOptions: ...}
} 
export default tabs;

LoggedIn.js

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

render() {
        return (
            <View>
                <Tabs jwt={this.props.jwt} /> // here I pass the jwt as a prop
            </View>
        );
}

What I am trying to do is pass a prop named jwt from my LoggedIn class located in LoggedIn.js to Tabs located in Router.js . From the Tabs call I would ultimately like to send the Jwt received as a prop to the Logs screen.

Im not sure how to to recieve the Jwt in the Router.js file and pass it to the logs screen. Any help regarding this would be hugely appriciated as i have been stuck on this for a good two days. Kind regards Matt.

Upvotes: 2

Views: 1508

Answers (1)

bennygenel
bennygenel

Reputation: 24660

You can pass a global parameter to the navigation which can be available in every screen for that navigation.

screenProps - Pass down extra options to child screens

Sample

const SomeTab = TabNavigator({
  // config
});

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

Upvotes: 2

Related Questions