Dynamically change header title in react native navigation

Question

For a school assignment we're creating an app in react native with react navigation and redux. Because all of us are new to react we have an issue we are unable to resolve.

We want to change the title of the header when a certain button is clicked. The first time we click a button it changes the header title just fine. The problem arrises when we press a different button, the header doesn't change. Note that no matter what option we choose, we always go to the same screen.

import React from 'react';
import { createStackNavigator, createAppContainer, createDrawerNavigator } from 'react-navigation';
import {connect} from 'react-redux';
import { store } from '@redux/MyStore';
import { Ionicons } from '@expo/vector-icons';

import ScannerScreen from '@screens/ContactScreen';
import EventsScreen from '@screens/ListScreen';

const ContactStack = createStackNavigator({
    Contact: {
        screen: ContactScreen,
        navigationOptions: ({navigation}) => ({
            headerStyle: {backgroundColor: '#fa8231'},
            headerTitleStyle: {fontSize: 18},
            title: store.getState().setupState.title,
            headerLeft: <Ionicons 
            name="md-menu" style={{marginLeft:10}} 
            size={28} 
            onPress={() => navigation.toggleDrawer()} /> //menu button
        })
    }
});

// Code to create stack for the ListStack

const DrawerStack = createDrawerNavigator({
    Contact: ContactStack,
    List: ListStack
});

 const PrimaryNavigation = createStackNavigator({
    ListStack: {
        screen: ListStack,
        navigationOptions: {
            header: null,
        }, 
    },
    DrawerStack: {
        screen: DrawerStack,
        navigationOptions: {
            header: null,
        }, 
    },  
},
{
    initialRouteName: 'ListStack',
});

const AppContainer = createAppContainer(PrimaryNavigation);

class AppNavigation extends React.Component {
  render() {
    return <AppContainer/>
  }
}

export default (AppNavigation)

We did get it working when we put the title bar in the DrawerNavigator, but since we want the Drawer in from of the header that is not an option. My speculation is that the stack is created once with a certain title and never gets updated when switching screens using the DrawerNavigator but we have no clue how to fix that.

Thanks in advance!

score 0 · Answer 1 · answered Mar 21 '20 at 19:27

From what I understand you need to change the title when a screen is loaded in stack.So you could use some like:

class ScreenInContactStack extends React.Component{
    //Constryctor
    static navigationOptions = ({navigation}) => ({
        title: (navigation.state.params || {}).title || 'Chat! ',
    });
    //Remaining Logic
}

and while calling

this.props.navigation.navigate('ScreenInContactStack', {title: yourTitle + ' ',});

Don't know why but the Appbar condense the title to like yourTi.. to avoid this add a space to the title.

score -1 · Answer 2 · answered Mar 19 '19 at 19:10

Try this:

map title as a prop to force ContactStack to re-render whenever it changes

class ContactStack extends React.Component {
  render() {
    const { title } = this.props.setupState;

    const Stack = createStackNavigator({
      Contact: {
          screen: ContactScreen,
          navigationOptions: ({navigation}) => ({
              headerStyle: {backgroundColor: '#fa8231'},
              headerTitleStyle: {fontSize: 18},
              title,
              headerLeft: <Ionicons 
              name="md-menu" style={{marginLeft:10}} 
              size={28} 
              onPress={() => navigation.toggleDrawer()} /> //menu button
          })
      }
    });

    return <Stack />;
  }
}

const mapStateToProps = ({ setupState }) => ({setupState});

export default connect(mapStateToProps)(ContactStack);

Dynamically change header title in react native navigation

2 Answers2

Linked