CODEWITHSUNDEEP
react-nativenavigationreact-navigation
modmoto
modmoto

Reputation: 3280

How to avoid bad Code with StackNavigator in React Native Navigation

I am just starting to learn React Native and in my Navigation I noticed something that i would consider a Code smell and I would like to know, how I could make this better.

So I am using react-navigation and a StackNavigator. I do have some Views, that you have to navigate in a row, like View1 -> View2 -> View 3, etc. But to navigate from the View2 to View3, I usually hand the navigation item in the params, so I am able to acces it again in the other views. So i usually end up with code like this:

navigateToDetailPage() {
    const {navigation} = this.props.navigation.state.params;

    navigation.navigate('GameSessionDetailPage', {
        navigation: navigation
    });
}

I am not using Redux right now, so far, as i wanted to understand the fundamentals first. But would this be a case where i should put the navigation into the redux store? From what I understood, redux should reflect your application state and not be a big data/object dump. But I feel like I am getting into a long chain of "navigation object passing" that seems fragile and very coupled to me. Is there some best practice you guys would reccomend?

Upvotes: 0

Views: 72

Answers (1)

aqwert
aqwert

Reputation: 10789

You don't need to pass through the navigation object. It will get added to the next components props automatically

navigateToDetailPage() {
    const {navigation} = this.props;

    navigation.navigate('GameSessionDetailPage');
}

Then in GameSessionDetailPage you will have this.props.navigation available.

No need to use Redux here.

Upvotes: 1

Related Questions