CODEWITHSUNDEEP
reactjsreact-nativereact-navigationreact-native-navigation
Mehdi Laziri
Mehdi Laziri

Reputation: 1

Passing props using nested StackNavigators and TabNavigators in React-Native

export default class Home extends React.Component {
      static navigationOptions = {  headerLeft: null, header: null};
      constructor(props){
         super(props);
         this.state = {
           userID: this.props.navigation.getParam('userId')
         };
       }
      render() {
        userId = this.props.navigation.getParam('userId');
        return <HomeNav userId={this.state.userId}/>;
      }
    }


    const HomeNav = TabNavigator({
    MyEvents: { screen: props => <MyEvents userId={userId}/>},
      MyTickets: { screen: props => <MyTickets userId={userId}/>},
    }, {tabBarPosition:'bottom'});

My Screens Structure is:

I know how to pass the userId from login to home(you can see me retrieving it above). I have tried many ways to pass the userID to my tab navigator then to its children. The way I tried above works, but I want to know how to do this properly and be able to access navigation props in MyTickets and MyEvents. Thank you.

Upvotes: 0

Views: 290

Answers (1)

Kosalram Ramakrishnan
Kosalram Ramakrishnan

Reputation: 818

export default class Home extends React.Component {
    static navigationOptions = {
        headerLeft: null,
        header: null
    };
    constructor(props) {
        super(props);
        this.state = {
            userID: this.props.navigation.getParam('userId')
        };
    }
    render() {
        userId = this.props.navigation.getParam('userId');
        return <Home userId = {
            this.state.userId
        }
        />;
    }
}

const Home = (props) => {
    const user = {
        id: props.userId
    }
    return ( <
        HomeNav screenProps = {
            user
        }
        />
    );
}


const HomeNav = TabNavigator({
    MyEvents: MyEvents,
    MyTickets: MyTickets,
}, {
    tabBarPosition: 'bottom'
});

Now in MyEvents and MyTickets tabs you can access the value as

const { screenProps } = this.props;
const userId =screenProps.id;

Hope it helps!

Upvotes: 4

Related Questions