Is it possible to add custom buttons to NavBar in react-native-router-flux?

Question

I want to add a burger menu button when viewing certain pages and a right side button that appears on all pages. Is this possible with react-native-router-flux?

UPDATE: I was able to get the right side button in without too much trouble by using this code

<Scene key="home"
       component={HomePage}
       hideBackImage={true}
       ...
       rightButtonImage={HelpIcon}
       onRight={()=>{}}
       rightTitle={null}
       rightButtonIconStyle={{ width: 44, height: 44 }} />

The burger menu button is proving more difficult. There is a drawerImage property on the Navigation Bar, but no other documentation about how to make that drawerImage appear and how to set a handler function.

I tried setting the rightButtonImage, onRight rightTitle and rightButtonIconStyle the same way I did for the left button but no button appeared.

UPDATE 2: I downgraded to react-native-router-flux v3.34.0 because of this issue: https://github.com/aksonov/react-native-router-flux/issues/1154

and added these props to my scene:

...
renderBackButton={()=>{ return null; }} /* Hide the back button...goofy mechanism but it works */
leftButtonImage={NavigationBurgerIcon}
onLeft={()=>{}}
leftTitle={null}
leftButtonIconStyle={{ width: 30, height: 30 }}
...

Lello

Answer 1

You can write your own Navigation bar for 100% control. You can structure your NavBar component off of their implementation of NavBar and do the following:

<Router 
  navBar={NavBar}
  ...
/>

The react-native-router-flux api has more details on this.

Once done you can create custom properties to add to your scene that drive various NavBar behavior custom to your project such as how you want to interact with the hamburger icon.

Pajamas

How can I listen in my component when I have clicked on button in my custom navigation bar? – Frazee

Answer 2

You could do something like this.

<Router renderLeftButton={this.navBarButton}>
  <Scene .....
</Router>

function:

navBarButton(){
return(
  <TouchableOpacity onPress={() => Actions.refresh({ key: 'drawer', open: true })}>
    <Icon name='ios-menu' size={30} />
  </TouchableOpacity>
)

}

Using react-native-vector-icons

Nerveless

Is the key "drawer" mentioned above a <Scene> to be created? If yes, how should that be created such that it acts like a drawer which covers only half of the screen and not full? Can you share the code for the same? – Dextrin