Proper navigation in react-native

Question

Having a bit of a struggle with understanding how to properly implement navigation in RN. The following code should be enough to see the current situation.

HeaderConnected is a component with a menu button which has a custom navigate prop to be able to open the Drawer menu (However, I believe this is not a proper way to pass navigate).

– Problem
HeaderConnected is in Main.js

– Expected
HeaderConnected to be above Navigator

App.js

// ...
import { DrawerNavigator } from "react-navigation";

export const Navigator = DrawerNavigator({
    Main: { screen: Main },
    Edit: { screen: EditScreen },
});
export default class App extends React.Component {
    render() {
        return (
            <Provider store={createStore(reducer)}>
                <Navigator />
            </Provider>
        );
    }
}

Main.js

export class Main extends React.PureComponent {
    static navigationOptions = {
        drawerLabel: "Main",
    };
    render() {
        return (
            <View style={styles.container}>
                <HeaderConnected
                    navigate={this.props.navigation.navigate}
                /> // <--- This should be moved above <Navigator /> in App.js
                <PostsConnected />
            </View>
        );
    }
}

Of course, you could create another wrapper to hold both Navigator and HeaderConnected which you would then pass to Provider. However, this didn't work for me.

After reading react-navigator docs it seems there are several ways to handle this, alas not sure what would be the best/optimal way.

Guilherme Cronemberger · Accepted Answer · 2017-10-07 11:17:00Z

2

I had this problem in a recent project and worked it around by building a wrapper as you said, try using this code:

    const mapNavigationStateParamsToProps = (SomeComponent) => {
      return class extends Component {
        static navigationOptions = SomeComponent.navigationOptions; // better use hoist-non-react-statics
        render() {
          const { navigation: { state: { params } } } = this.props
          return (
             <View style={{ flex: 1 }}>
               <HeaderConnected
                    navigate={this.props.navigation.navigate}
                />
               <SomeComponent {...params} {...this.props} />

             </View>
      )
    }
  }
}

then on your Navigator:

export const Navigator = DrawerNavigator({
    Main: { screen: mapNavigationStateParamsToProps(Main) },
    Edit: { screen: mapNavigationStateParamsToProps(EditScreen) },
});

I'm not sure if it is the best/optimal way, but it works for me.

answered Oct 7, 2017 at 11:17

Guilherme Cronemberger

8146 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Guilherme Cronemberger Over a year ago

Wait, just now i understood that you want the component to be above the Navigation Header, i think my code won't help you.

Roland Jegorov Over a year ago

That would be ideal to not render the same component (Header) in each screen (imagine 20). But your approach I believe does the trick, just renders header in each screen, doesn’t it?

Guilherme Cronemberger Over a year ago

Kinda, but if you just want to change the header, it's actually simpler, react-navigation allows custom headers. I thought you wanted something to always be under the header, sorry.

Roland Jegorov Over a year ago

I ended up using your code cause react-navigation custom headers are not what I'm looking for. Plus, Header is only available for StackNavigator.

Collectives™ on Stack Overflow

Proper navigation in react-native

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related