Home How to trigger render() method when navigating back with `react-navigation`?
Reply: 0

How to trigger render() method when navigating back with `react-navigation`?

user1490 Published in July 15, 2018, 9:10 pm

I have a simple app with two screens inside a StackNavigator:

export const AppNavigator = StackNavigator({
    Main: { screen: MainPage },
    ChooseColor: { screen: ChooseColorPage }
}, {
    initialRouteName: 'Main',

Upon pressing a button, the app navigates to ChooseColorPage:

class MainPage extends Component {

    onChooseColor() {
        const { navigation } = this.props;
        navigation.navigate('ChooseColor', {});

Then, the user can choose a color by pressing a button, which triggers a navigation back to the MainPage:

class ChooseColorPage extends Component {

    onSelectColor(colorKey) {
        // this updates the state inside a `ColorReducer`
        this.props.colorChanged({ colorKey });
        const { navigation } = this.props;

I want the MainPage to update based on the chosen color, however the render() method is not called on back navigation.

Question: Under which cases is the render() method called when navigating between screens with react-navigation?

I would have assumed that updating the state in the ColorReducer would have been enough to trigger a render() call in MainPage but this does not happen.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.300328 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO