React Navigation - Can't get the header updated

Question

I have the following code on my react native application but cannot get the screen header updated when I am navigating to the Dashboard Screen after login. This is so simple but since I don't get what is wrong here I am posting this.

After login call I navigate to the Dashboard.

this.props.navigation.navigate('Dashboard', {
     title: 'Dashboard'
})

My DashboardScreen.js is as follows.

This is exactly like in the documentation from react navigation library.

class DashboardScreen extends React.Component {
    static navigationOptions = ({navigation}) => {
        const {params} = navigation.state;

        let title = navigation.state.params.title ? navigation.state.params.title : 'This is Sparta!';

        return {
            title: title
        };
    };

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <ScrollView>
                <Card>
                    <Text>Dashboard Screen</Text>
                </Card>
            </ScrollView>
        )
    }
}

My base StackNavigator.

const StackNavigator = createStackNavigator({
    Login: {
        screen: LoginScreen
    },
    Dashboard: {
        screen: DashboardScreen
    }
}, {
    initialRouteName: "Login",
});

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <StackNavigator/>
        )
    }
}

export default App;

I'm new to react native so react navigation is also new to me. Tried out various methods including passing additional props with navigationOptions.

Can someone point out the exact problem? Thanks in advance.

It is there in the question. I navigate like this code below this.props.navigation.navigate('Dashboard', { title: 'Dashboard' }) It navigates but doesn't update the header. — buddhiv

Kosalram Rama Krishnan Kosalram Rama Krishnan · Accepted Answer · 2018-08-23T14:53:38

class DashboardScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: this.props.navigation.state.params.title
        };
    }

    render() {
        return (
            <ScrollView>
                <Card>
                    <Text>{this.state.title}</Text>
                </Card>
            </ScrollView>
        )
    }
}

I hope this will help you.

React Navigation - Can't get the header updated

1 Answers