CODEWITHSUNDEEP
react-nativereact-navigation
Emerald
Emerald

Reputation: 874

Nagivating to different screen does not call any function

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 :

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?

Upvotes: 2

Views: 1198

Answers (3)

Vinil Prabhu
Vinil Prabhu

Reputation: 1289

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.

Upvotes: 0

Jaydeep Galani
Jaydeep Galani

Reputation: 4961

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

Upvotes: 0

neydroid
neydroid

Reputation: 1951

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;

Upvotes: 1

Related Questions