React Navigator StackNavigator: goBack does not work when called twice from the same scene

Tags:

Let's assume I want to implement a file explorer with directory structure. I created a React Native component that lists files and directories of a specific folder. When I click on a folder, I expect to go inside the new folder and list its files and folders. Obviously, I am hoping to be able to use the same React component to render the different folders.

I use StackNavigator. Here is my code

Here is my attempt which does not work:

import React, { Component } from 'react';
import {
  AppRegistry,
  BackHandler,
  ListView,
  StyleSheet,
  Text,
  TouchableNativeFeedback,
  View
} from 'react-native';

import {
  StackNavigator,
} from 'react-navigation';

export default class FileExplorerScene extends Component {
  // Initialize the hardcoded data
  constructor(props) {
    super(props);

    // Empty list before adding entries
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = {
      dataSource: ds.cloneWithRows(['a', 'b', 'c'])
    };
  }

  onPress(rowData) {
    console.log("onPress(" + rowData + ")");
    this.props.navigation.navigate('FileExplorer', { parent: rowData });
  }

  goBack() {
    this.props.navigation.goBack();
    return true;
  }

  componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.goBack.bind(this));
  }

  renderRow(rowData, sectionID, rowID) {
    return (
      <TouchableNativeFeedback onPress={ () => { this.onPress(rowData); }}>
        <Text style={{ margin:5, fontSize: 20}}>{ rowData }</Text>
      </TouchableNativeFeedback>
      );
  }

  render() {
    const { params } = this.props.navigation.state;

    var currentPath;
    if (params) {
      currentPath = (<Text style={{ margin:10, fontSize: 24}}>Current Path: {params.parent}</Text>);
    } else {
      currentPath = (<Text style={{ margin:10, fontSize: 24}}>Root path</Text>);
    }

    return (
      <View>
        { currentPath }
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderRow.bind(this)}
          enableEmptySections={true}
        />
      </View>
    );
  }
}

const App = StackNavigator(
  {
    FileExplorer: { screen: FileExplorerScene },
  },{
    headerMode: 'none',
  }
);

AppRegistry.registerComponent('ReactProject', () => App);

Click on a: I can see Current Path: a

I/ReactNativeJS( 1125): onPress(a)
I/ReactNativeJS( 1125): 'Navigation Dispatch: ', { action: 
I/ReactNativeJS( 1125):    { type: 'Navigation/NAVIGATE',
I/ReactNativeJS( 1125):      routeName: 'FileExplorer',
I/ReactNativeJS( 1125):      params: { parent: 'a' },
I/ReactNativeJS( 1125):      action: undefined },
I/ReactNativeJS( 1125):   newState: 
I/ReactNativeJS( 1125):    { index: 1,
I/ReactNativeJS( 1125):      routes: 
I/ReactNativeJS( 1125):       [ { routeName: 'FileExplorer', key: 'Init-id-1497310673011-0' },
I/ReactNativeJS( 1125):         { params: { parent: 'a' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-1',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' } ] },
I/ReactNativeJS( 1125):   lastState: 
I/ReactNativeJS( 1125):    { index: 0,
I/ReactNativeJS( 1125):      routes: [ { routeName: 'FileExplorer', key: 'Init-id-1497310673011-0' } ] } }

Click on b: I can see Current Path: b

I/ReactNativeJS( 1125): onPress(b)
I/ReactNativeJS( 1125): 'Navigation Dispatch: ', { action: 
I/ReactNativeJS( 1125):    { type: 'Navigation/NAVIGATE',
I/ReactNativeJS( 1125):      routeName: 'FileExplorer',
I/ReactNativeJS( 1125):      params: { parent: 'b' },
I/ReactNativeJS( 1125):      action: undefined },
I/ReactNativeJS( 1125):   newState: 
I/ReactNativeJS( 1125):    { index: 2,
I/ReactNativeJS( 1125):      routes: 
I/ReactNativeJS( 1125):       [ { routeName: 'FileExplorer', key: 'Init-id-1497310673011-0' },
I/ReactNativeJS( 1125):         { params: { parent: 'a' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-1',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' },
I/ReactNativeJS( 1125):         { params: { parent: 'b' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-2',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' } ] },
I/ReactNativeJS( 1125):   lastState: 
I/ReactNativeJS( 1125):    { index: 1,
I/ReactNativeJS( 1125):      routes: 
I/ReactNativeJS( 1125):       [ { routeName: 'FileExplorer', key: 'Init-id-1497310673011-0' },
I/ReactNativeJS( 1125):         { params: { parent: 'a' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-1',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' } ] } }

Click on c: I can see Current Path: c

I/ReactNativeJS( 1125): onPress(c)
I/ReactNativeJS( 1125): 'Navigation Dispatch: ', { action: 
I/ReactNativeJS( 1125):    { type: 'Navigation/NAVIGATE',
I/ReactNativeJS( 1125):      routeName: 'FileExplorer',
I/ReactNativeJS( 1125):      params: { parent: 'c' },
I/ReactNativeJS( 1125):      action: undefined },
I/ReactNativeJS( 1125):   newState: 
I/ReactNativeJS( 1125):    { index: 3,
I/ReactNativeJS( 1125):      routes: 
I/ReactNativeJS( 1125):       [ { routeName: 'FileExplorer', key: 'Init-id-1497310673011-0' },
I/ReactNativeJS( 1125):         { params: { parent: 'a' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-1',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' },
I/ReactNativeJS( 1125):         { params: { parent: 'b' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-2',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' },
I/ReactNativeJS( 1125):         { params: { parent: 'c' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-3',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' } ] },
I/ReactNativeJS( 1125):   lastState: 
I/ReactNativeJS( 1125):    { index: 2,
I/ReactNativeJS( 1125):      routes: 
I/ReactNativeJS( 1125):       [ { routeName: 'FileExplorer', key: 'Init-id-1497310673011-0' },
I/ReactNativeJS( 1125):         { params: { parent: 'a' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-1',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' },
I/ReactNativeJS( 1125):         { params: { parent: 'b' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-2',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' } ] } }

Go Back. I can see Current Path: b

I/ReactNativeJS( 1125): goBack()
I/ReactNativeJS( 1125): 'Navigation Dispatch: ', { action: { type: 'Navigation/BACK', key: 'id-1497310673011-3' },
I/ReactNativeJS( 1125):   newState: 
I/ReactNativeJS( 1125):    { index: 2,
I/ReactNativeJS( 1125):      routes: 
I/ReactNativeJS( 1125):       [ { routeName: 'FileExplorer', key: 'Init-id-1497310673011-0' },
I/ReactNativeJS( 1125):         { params: { parent: 'a' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-1',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' },
I/ReactNativeJS( 1125):         { params: { parent: 'b' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-2',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' } ] },
I/ReactNativeJS( 1125):   lastState: 
I/ReactNativeJS( 1125):    { index: 3,
I/ReactNativeJS( 1125):      routes: 
I/ReactNativeJS( 1125):       [ { routeName: 'FileExplorer', key: 'Init-id-1497310673011-0' },
I/ReactNativeJS( 1125):         { params: { parent: 'a' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-1',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' },
I/ReactNativeJS( 1125):         { params: { parent: 'b' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-2',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' },
I/ReactNativeJS( 1125):         { params: { parent: 'c' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-3',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' } ] } }

Go Back. No change
```
I/ReactNativeJS( 1125): goBack()
```
Go Back. No change
```
I/ReactNativeJS( 1125): goBack()
```

Do I use goBack correctly? Or it is an issue in StackNavigator?

851

asked Jun 12 '17 23:06

OlivierM

1 Answers

Actually replacing this.props.navigation.goBack() by this.props.navigation.goBack(null) makes it work!
React Navigation documentation is quite confusing...

Now, everything works as I wanted to be:

Click on a: I can see Current Path: a

I/ReactNativeJS( 2045): onPress(a)
I/ReactNativeJS( 2045): 'Navigation Dispatch: ', { action: 
I/ReactNativeJS( 2045):    { type: 'Navigation/NAVIGATE',
I/ReactNativeJS( 2045):      routeName: 'FileExplorer',
I/ReactNativeJS( 2045):      params: { parent: 'a' },
I/ReactNativeJS( 2045):      action: undefined },
I/ReactNativeJS( 2045):   newState: 
I/ReactNativeJS( 2045):    { index: 1,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] },
I/ReactNativeJS( 2045):   lastState: 
I/ReactNativeJS( 2045):    { index: 0,
I/ReactNativeJS( 2045):      routes: [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' } ] } }

Click on b: I can see Current Path: b

I/ReactNativeJS( 2045): onPress(b)
I/ReactNativeJS( 2045): 'Navigation Dispatch: ', { action: 
I/ReactNativeJS( 2045):    { type: 'Navigation/NAVIGATE',
I/ReactNativeJS( 2045):      routeName: 'FileExplorer',
I/ReactNativeJS( 2045):      params: { parent: 'b' },
I/ReactNativeJS( 2045):      action: undefined },
I/ReactNativeJS( 2045):   newState: 
I/ReactNativeJS( 2045):    { index: 2,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' },
I/ReactNativeJS( 2045):         { params: { parent: 'b' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-2',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] },
I/ReactNativeJS( 2045):   lastState: 
I/ReactNativeJS( 2045):    { index: 1,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] } }

Click on c: I can see Current Path: c

I/ReactNativeJS( 2045): onPress(c)
I/ReactNativeJS( 2045): 'Navigation Dispatch: ', { action: 
I/ReactNativeJS( 2045):    { type: 'Navigation/NAVIGATE',
I/ReactNativeJS( 2045):      routeName: 'FileExplorer',
I/ReactNativeJS( 2045):      params: { parent: 'c' },
I/ReactNativeJS( 2045):      action: undefined },
I/ReactNativeJS( 2045):   newState: 
I/ReactNativeJS( 2045):    { index: 3,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' },
I/ReactNativeJS( 2045):         { params: { parent: 'b' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-2',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' },
I/ReactNativeJS( 2045):         { params: { parent: 'c' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-3',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] },
I/ReactNativeJS( 2045):   lastState: 
I/ReactNativeJS( 2045):    { index: 2,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' },
I/ReactNativeJS( 2045):         { params: { parent: 'b' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-2',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] } }

Go Back. I can see Current Path: b

I/ReactNativeJS( 2045): goBack()
I/ReactNativeJS( 2045): 'Navigation Dispatch: ', { action: { type: 'Navigation/BACK', key: null },
I/ReactNativeJS( 2045):   newState: 
I/ReactNativeJS( 2045):    { index: 2,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' },
I/ReactNativeJS( 2045):         { params: { parent: 'b' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-2',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] },
I/ReactNativeJS( 2045):   lastState: 
I/ReactNativeJS( 2045):    { index: 3,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' },
I/ReactNativeJS( 2045):         { params: { parent: 'b' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-2',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' },
I/ReactNativeJS( 2045):         { params: { parent: 'c' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-3',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] } }

Go Back. I can see Current Path: a

I/ReactNativeJS( 2045): goBack()
I/ReactNativeJS( 2045): 'Navigation Dispatch: ', { action: { type: 'Navigation/BACK', key: null },
I/ReactNativeJS( 2045):   newState: 
I/ReactNativeJS( 2045):    { index: 1,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] },
I/ReactNativeJS( 2045):   lastState: 
I/ReactNativeJS( 2045):    { index: 2,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' },
I/ReactNativeJS( 2045):         { params: { parent: 'b' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-2',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] } }

Go Back. I can see Root path

I/ReactNativeJS( 2045): goBack()
I/ReactNativeJS( 2045): 'Navigation Dispatch: ', { action: { type: 'Navigation/BACK', key: null },
I/ReactNativeJS( 2045):   newState: 
I/ReactNativeJS( 2045):    { index: 0,
I/ReactNativeJS( 2045):      routes: [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' } ] },
I/ReactNativeJS( 2045):   lastState: 
I/ReactNativeJS( 2045):    { index: 1,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] } }

Go Back. Nothing as expected :-)
```
I/ReactNativeJS( 2045): goBack()
```

168

answered Sep 30 '22 13:09

OlivierM

Related questions
                            
                                When to use RPC over WebSocket?
                            
                                How to support patch rest request with protobuf 3
                            
                                Synchronize scrolling on multiple RecyclerViews in adapter
                            
                                How do I add a BackgroundImage to a ListView in Xamarin Forms?
                            
                                How to know if crafter-profile or crafter-social are running?
                            
                                How to get actual value of global variables in llvm
                            
                                Multiple projects sharing a jenkinsfile
                            
                                AWS Rekognition gives an InvalidS3Exeption error
                            
                                Using ghostscript in a Windows .bat file to convert multiple pdf files to png
                            
                                How to index through a string in assembly
                            
                                React.PureComponent not implementing shouldComponentUpdate
                            
                                How to refer NPM installed libraries from web pages and templates?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With

React Navigator StackNavigator: goBack does not work when called twice from the same scene

Tags:

OlivierM

People also ask

1 Answers

OlivierM

Recent Activity

Donate For Us