React-native-router-flux: adding a custom navigation bar with a leftbutton and multiple right buttons

[adarshTS]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.14 (v3 is not supported)
• react-native v0.46.4

[aksonov]

You may pass navBar property and render whatever you want for whole nav bar. Or you could pass left /right to render left/right Buttons

[adarshTS]

can we pass 2 images in navBar property for 2 right buttons

[adarshTS]

how can I add 2 right buttons to this or how can I use a custom navBar instead
this is my code :

`import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import mainScreen from './components/mainScreen';
import challengeScreen from './components/challengeScreen';

const RouterComponent = () => {
return (



key="screen2" component={challengeScreen} navTransparent={1}
leftButtonImage={require('./components/Images/bg_inner.png')} headerTintColor="white"
/>


);
};
export default RouterComponent;
`

[aksonov]

There is no such option. You may submit PR to support it, like passing right as array for buttons. But it is better just to put two button inside right

[adarshTS]

@aksonov
how can we use navBar property to add multiple buttons is there any example or links for that I want to add a custom image as a back button and add 2 more custom images as right buttons

[adarshTS]

hey I sorted out that issue,
In my Router.js file, I created a navBar property and gave it my NavBar.js file to it like navBar={NavBar} and inside my NavBar.js file I have customized the buttons that I needed on both left and right sides

hope this might help someone

and thanks @aksonov

[smartworld-dm]

Hi, I am Ito,
Please provide me your result(router.js).
It would be a great help to me

[adarshTS]

Refer this: https://stackoverflow.com/questions/42479184/customizing-default-navigation-bar-of-react-native-router-flux/45372828#45372828

[wkwyatt]

@adarshTS I tried something similar but the navigation bar would not render. Did you do something special in the Router.js to get the custom navbar to render?

[adarshTS]

@wkwyatt I did this : <Scene key="screen2" component={challengeScreen} navTransparent={1} navBar={NavBar} /> in the Router.js file where NavBar is the custom navbar that I created and don't forget to import import NavBar from './components/NavBar';

[wkwyatt]

Thanks 👍🏽 I got it working!

On Mar 2, 2018 11:33 PM, "Adarsh Sreeram" [e-mail] wrote:

@wkwyatt https://github.com/wkwyatt I did this : component={challengeScreen} navTransparent={1} navBar={NavBar} /> in the
Router.js file where NavBar is the custom navbar that I created and don't
forget to import import NavBar from './components/NavBar';

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/aksonov/react-native-router-flux/issues/2125#issuecomment-370117194,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMvu5J1ffyV37hFA1hB1mEW9isbUp0Tlks5tah0HgaJpZM4OlIsE
.

[aaron25mt]

V4, I just put my two buttons in a View and applied flexDirection row style on them and that worked for me.

let navButtons = <View style={{flexDirection: "row"}}> <Button icon transparent onPress={this.search}> <Icon name="search"></Icon> </Button> <Button icon transparent onPress={this.showCart}> <Icon name="cart"></Icon> </Button> </View>