CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
kumar barian
kumar barian

Reputation: 139

React navigation goBack() and update in previous screen

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;

Upvotes: 3

Views: 5998

Answers (2)

Sennen Randika
Sennen Randika

Reputation: 1636

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

Upvotes: 1

Farhan Haque
Farhan Haque

Reputation: 1011

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.

Upvotes: 0

Related Questions