React-native-router-flux: Back Button not displayed as expected

[sjaakiejj]

Version

Tell us which versions you are using:

• react-native-router-flux v3.37.0
• react-native v0.34.1

Expected behaviour

When I push a state from a scene, I would expect the back button to show up at all times unless the state is replaced. So given this structure:

<Scene key="root" component={Layout}>
   <Scene key="dashboard" tabs tabBarStyle={tabstyle.tabBarStyle} type={ActionConst.REPLACE} >
       <Scene key="settings" icon={TabIcon('menu-settings')}>
           <Scene key="about" hideTabBar> 
                <Scene key="aboutScene" component={AboutScene} title="About" initial/>
           </Scene>
       </Scene>
   </Scene>
</Scene>

When I open the 'about' scene I would expect to see a back button.

Actual behaviour

The back button is not displayed.

Steps to reproduce

Scene structure as shown above. Layout component looks as follows:

export class DefaultLayout extends React.Component {
  render() {
    const state = this.props.navigationState;
    const children = state.children;
    const selected = state.children[state.index];
    return (
      <View style={{ flex: 1, }}>
        <PGradientView style={BaseStyle.gradient}>
          <View style={BaseStyle.navigationContainer}>
            <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} key={selected.key} {...selected} />
          </View>
        </PGradientView>
      </View>
    );
  }
};

[tiagoengel]

I don't know if this is the right solution, but as a workaround I'm passing parentIndex={1} to the wrapper scene (don't know how it's called).

For example:

<Scene key="about" parentIndex={1}> 
      <Scene key="aboutScene" component={AboutScene} title="About" initial/>
</Scene>

I'm not sure if the parentIndex is 1 in this case though. But the idea is the same, maybe you'll have to change to 2.