Nagivating to different screen does not call any function

Question

I am using react navigation to create a drawer in my application. I noticed this occurrence when navigating to different screen.

Let's say I have this stack in my app :

Stack A
Stack B
Stack C

When I am at the Stack A and will navigate to Stack B for the first time enter, Stack B will read the componentDidMount() and here I will set a state (which is to connect to rest server to call out data from database).

From the Stack B, I will navigate to Stack C for the first time enter too and it works fine by reading the componentDidMount() too. Then I made some changes from Stack C (example: deleting data) which will affect the data in Stack B.

Now I am from Stack C and navigate back to Stack B (enter for the second time) but it won't read the componentDidMount() anymore. And so, my data will not be updated until I pull down the screen to refresh it.

How should I make the screen be able to read the componentDidMount() every time when enter to the screen?

score 1 · Accepted Answer · answered Feb 21 '19 at 04:46

What you need in this case is to listen to NavigationEvents because the components are already mounted, but didFocus will be called each time the view get the focus.

Here's an example code from the docs:

import React from 'react';
import { View } from 'react-native';
import { NavigationEvents } from 'react-navigation';

const MyScreen = () => (
  <View>
    <NavigationEvents
      onWillFocus={payload => console.log('will focus',payload)}
      onDidFocus={payload => console.log('did focus',payload)}
      onWillBlur={payload => console.log('will blur',payload)}
      onDidBlur={payload => console.log('did blur',payload)}
    />
    {/* 
      Your view code
    */}
  </View>
);

export default MyScreen;

I read the documentation and this is the only way to do it. Took some time to understand it though. Thank you! — Emerald, Feb 21 '19 at 07:28

score 0 · Answer 2 · answered Feb 21 '19 at 04:48

This is what stack navigator does, it want again load whole screen.

It just stores everything for you so that when you navigate back everything is there in whatever state you left the screen.

For example, you scrolled to half on particular screen and navigated to other screen, now you came back and you will find your screen half scrolled where you left.

so it will do nothing when you came back.

Note: If screen is navigated in past and exist in current stack then navigating to screen again will not call any lifecycle methods.

So for your case,

you can pass a method reference to navigation params. and call it before you navigate.

like this,

let say you are in screenB and wanna call a method methodSuperCool=()=>{...} which resides in screenA from which you navigated to current screen.

for this you will have to pass method reference in params when you navigate to screenB from screenA.

this.props.navigation.navigate('screenB',{methodSuperCool:this.methodSuperCool});
//this to be write in screenA

now in screenB before you naviagte to screenA call this,

 this.props.navigation.state.params.methodSuperCool() // this can also have params if you like to pass
 this.props.navigation.navigate('screenA') // or goBack() method will also work

Thank you for the answer but I know this method and for some reason I cannot use this method as I am placing my drawer (sidemenu) at another file and include it to every screen in my app. So when I want to navigate to other screen, I cannot set this method. — Emerald, Feb 21 '19 at 05:11
@Emerald you can put this method in both screen and drawer and from screen you can call it(drawer method) using ref. — Jaydeep Galani, Feb 21 '19 at 05:30

score 0 · Answer 3 · answered Feb 21 '19 at 05:32

Navigating back from Stack C to Stack B wont call componentDidMount() as the components were already mounted when Stack B was first created.

you can do is reset the navigation stack when navigating from Stack B to Stack C like this

const stackCAction = StackActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName: 'StackC' })],
});

dispatching with

this.props.navigation.dispatch(stackCAction);

note going back wont be possible doing this.

alternately you can pass a callback function from Stack B to Stack C to refresh.

Check this link for full answer.

Nagivating to different screen does not call any function

3 Answers3