React Navigator StackNavigator: goBack doesn't work when called twice from the same scene

Suppose I want to implement a file explorer with a directory structure. I created a React Native component that lists the files and directories of a specific folder. When I click on a folder, I expect to go into the new folder and list its files and folders. Obviously, I hope I can use the same React component to render different folders.

I am using StackNavigator . Here is my code

Here's my attempt that doesn't 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: I 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 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' } ] } }
  
        
  
          
          
          
        
  
      

• Press c: I 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' } ] } }
  
        
  
          
          
          
        
  
      

• To return. I seeCurrent 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' } ] } }
  
        
  
          
          
          
        
  
      

• To return. Without changes

  I/ReactNativeJS( 1125): goBack()
  
        
  
          
          
          
        
  
      

• To return. Without changes

  I/ReactNativeJS( 1125): goBack()
  
        
  
          
          
          
        
  
      

Am I using it correctly goBack

? Or is this the problem in StackNavigator

?