0

I am using React Native Router and want to have a back button on the component at the root of the navigation and override its action.

Is it possible to enable the back button without writing my own with renderBackButton? I'd rather use the one provided with the library to ensure consistency between other screens and avoid writing a new component.

I tried with hideBackImage={false}, but it doesn't seem to work.

emroussel
  • 1,077
  • 11
  • 19

1 Answers1

2

You can't. Since you're at the root of your application, you only have one scene in your stack.

But why do you want a back button on your first application screen? It makes no sense...

However, it's pretty easy to render a back button with a custom action. For example :

<Scene key='root'
    ...    
    renderLeftButton={this.renderCustomButton()}
    ...
/>

With 

renderCustomButton() {
  return () => (
    <TouchableOpacity>
      <Icon name="back" size={30} color="#900" />
    </TouchableOpacity>
  );
}

Then you just add your action or whatever you want to do with the onLeft prop

<Scene key='root'
    ...    
    renderLeftButton={this.renderCustomButton()}
    onLeft={**YOUR ACTION**}
    ...
/>

You can also add it on the TouchableOpacity onPress prop.

I usually use react-native-vector-icons for my custom navbar icons https://github.com/oblador/react-native-vector-icons

David
  • 453
  • 3
  • 14
  • I originally wanted to do this to dismiss a search bar (similar to the Google Maps Android app). Pushing a new page on the stack made the transition look very buggy, so as a workaround, the search page was in the same component as the root of nav. I ended up creating the back button with the search bar view instead of in the nav bar. Thanks for your answer though, it is a totally valid way of doing it! – emroussel Jul 14 '17 at 17:12