React navigation goBack() and update in previous screen

Question

I have two screens. Each screen contains three child class. Yes, I am using the tab of each screen. In my first screen let say. Main-screen has -> ScreenA, ScreenB, ScreenC. And my DetailScreen has -> ScreenD, ScreenE, ScreenF

Now from my ScreenA i have push to go to ScreenD. The code is here :

  this.props.navigation.navigate('DetailScreen', {
            onNavigateBack: this.refresh.bind(this)
   })

 refresh(commentText) {
        alert('alert me')
    }

In my ScreenD i have one button to go back. And update the values in my ScreenA:

 this.props.navigation.state.params.onNavigateBack(this.state.commentText); 
 this.props.navigation.goBack();

But always i am getting error like :

Undefined is not an object (evaluating 'this.props.navigation.state')

Any help would be great. My objective is to update my screen A, when i come back from screen D

My mainScreen :

 <ScreenA navigation={this.props.navigation}  tabLabel= "ScreenA" props = {this.props} tabView={this.tabView}/>
 <ScreenB navigation={this.props.navigation}  tabLabel= "ScreenB" props = {this.props} tabView={this.tabView}/>
<ScreenC navigation={this.props.navigation}   tabLabel= "ScreenC" props = {this.props} tabView={this.tabView} goToPage={ () => this.goToPage(2) }/>

DetailScreen:

 <ScreenD navigation={this.props.navigation}  tabLabel= "ScreenD" props = {this.props} tabView={this.tabView}/>
 <ScreenE navigation={this.props.navigation}  tabLabel= "ScreenE" props = {this.props} tabView={this.tabView}/>
<ScreenF navigation={this.props.navigation}   tabLabel= "ScreenF” props = {this.props} tabView={this.tabView} goToPage={ () => this.goToPage(2) }/>

My RootStackScreen :

import React from 'react';

import { createStackNavigator } from '@react-navigation/stack';

import ScreenA from './ScreenA';
import ScreenB from './ScreenB';

const RootStack = createStackNavigator();


const RootStackScreen = ({navigation}) => (
    <RootStack.Navigator headerMode='none'>
        <RootStack.Screen name="ScreenA" component={ScreenA}/>
        <RootStack.Screen name="ScreenB" component={ScreenB}/>
    </RootStack.Navigator>
);


export default RootStackScreen;

Can you please add the code of one of your ScreenA or ScreenB ? — Sennen Randika, Jun 16 '20 at 08:15
@Sennen Randika i am using flat list. Nothing else. Its very big thats why not posting here. `export default class MainScreen extends Component {}` — kumar barian, Jun 16 '20 at 08:23
Hi @kumarbarian, which version of `react-navigation` do you use ? and if you only have `this.props.navigation.goBack();`, does it go back to previous screen ? — Brian H., Jun 16 '20 at 08:32
@Yasuooooooooo No i am getting this error `Undefined is not an object (evaluating this.props.navigation.goBack())`.` "version": "0.62.2"` — kumar barian, Jun 16 '20 at 08:39
Have you put `constructor(props) { }` in the Screen components? — Sennen Randika, Jun 16 '20 at 08:46
@ Sennen Randika Yes, in my parent and child class i have that. — kumar barian, Jun 16 '20 at 08:51
in one of my parent class DetailScreen. I din specify this `constructor(props) { }`. So after adding its going back. But if i add this line `this.props.navigation.state.params.onNavigateBack(this.state.commentText);` Then i am getting same error :Undefined is not an object (evaluating 'this.props.navigation.state.params') — kumar barian, Jun 16 '20 at 08:54
What's the stack navigator version you are using? `@react-navigation/stack` — Sennen Randika, Jun 16 '20 at 10:00

Sennen Randika · Answer 1 · 2020-06-17T16:11:04.373

1

1) Go to your package.json file in your project.

2) Change the version of @react-navigation/stack to a version 5.x.x.

Example:

"@react-navigation/stack": "^5.2.14",

3) Run npm install.

4) In your ScreenA,

this.props.navigation.navigate('DetailScreen', {
  onNavigateBack: (commentText) => this.refresh(commentText)
})

refresh(commentText) {
  alert('alert me')
}

5) In your ScreenD,

this.props.route.params.onNavigateBack(this.state.commentText); 
this.props.navigation.goBack();

6) Run npm start and restart your project.

You will fix the problem.

Please make sure that you are using @react-navigation/stack: ^5.x.x

Here is a working example...

https://snack.expo.io/K1Kb_iTEW

edited Jun 17 '20 at 16:11

answered Jun 16 '20 at 10:07

Sennen Randika

1,566
3
14
34

Added like same. `"@react-navigation/stack": "^5.4.1",`. But getting same kind of error `Undefined is not an object (evaluating this.props.route.params)` – kumar barian Jun 16 '20 at 10:15
i have posted it. – kumar barian Jun 17 '20 at 14:40
Seems like there is a problem with your implementation. You may have missed some important points. I've updated my answer with a working example. https://snack.expo.io/K1Kb_iTEW – Sennen Randika Jun 17 '20 at 16:10

score 0 · Answer 2 · answered Jun 16 '20 at 08:49

0

You are trying to access navigation prop inside a child class. To do this you need to use withNavigation Higher Order Component.

import { withNavigation } from 'react-navigation';
//    <YOUR COMPONENT>
export default withNavigation(YouChildComponent);

This provides the navigation prop to child components. You can read more here

I hope it helps.

answered Jun 16 '20 at 08:49

Farhan Haque

991
1
9
21

1

i can able to go back. But problem is when i try to add this line `this.props.navigation.state.params.onNavigateBack(this.state.commentText); `. Getting error like `Undefined is not an object (evaluating 'this.props.navigation.state.params')` – kumar barian Jun 16 '20 at 09:51

React navigation goBack() and update in previous screen

2 Answers2