In this episode we will see two interesting aspects about the React Navigation. How to customize the header and also, if you would want, use redux.

Changing the Header

If you would want to create a button in your header, it's very easy.

  • You just need to pass the header information in your navigationOptions:
  header: {
    right: <Button title="Info" />
  }

Here is the SecondScreen of our application. We've just added a button at the right side of the header.

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  Button,
  View
} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

const SecondScreen = ()  => {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        THIS IS THE SECOND SCREEN!
      </Text>
    </View>
  );
}

SecondScreen.navigationOptions = {
  title: 'Second Screen Title',
  header: {
    right: <Button title="Info" />
  }
};

export default SecondScreen

If you would want to change the title, depending of your state, you can change the title key and get the state.

 title: ({ state }) => `This is the title from ${state.params.parameterFromAnotherScreen}`

How to connect with Redux

React Navigation allow us to use Redux. We just need to pass the navigator

The community is still changing some of the ways to integrate with redux, what we will show here is something standard and probably will not change in the next months.

We will look over an example in the source code.

  • We are sharing our navigation state with our application.
  • Our application has login/logout
  • According wheater the user is logged in or not, we need to change the routes

First thing:

  • Connect with redux and pass our navigator
const AppWithNavigationState = connect(state => ({
  nav: state.nav,
}))(({ dispatch, nav }) => (
  <AppNavigator navigation={addNavigationHelpers({ dispatch, state: nav })} />
));
  • Wraps AppWithNavigationState
 <Provider store={this.store}>
    <AppWithNavigationState />
  </Provider>
  • Handle the reducers
const AppReducer = combineReducers({
  nav: (state = initialNavState, action) => {
    if (action.type === 'Login') {
      return AppNavigator.router.getStateForAction({ type: 'Back' }, state);
    }
    if (action.type === 'Logout') {
      return AppNavigator.router.getStateForAction({ type: 'Navigate', routeName: 'Login' }, state);
    }
    return AppNavigator.router.getStateForAction(action, state);
  },
  auth: (state = initialAuthState, action) => {
    if (action.type === 'Login') {
      return { ...state, isLoggedIn: true };
    }
    if (action.type === 'Logout') {
      return { ...state, isLoggedIn: false };
    }
    return state;
  },
});

Each navigator router has a getStateForAction that we can call in our reducer.

This is the way our Navigator can work with redux.

Resources