React-native-router-flux: Custom navBar

[pgonzalez-santiago]

Hey guys,
first of all, I want to thank for the react-native-router-flux. It is amazing.

I have been using the router since the version 3, but now I have migrated my project to the latest version.

I was using a custom navBar in some of my screens but it seems that custom navBar doesn't work as before. Its possible to have a custom navBar working in v4 as in v3? I need to render a left button with title and two right buttons.

E.g.

With a customBar in the Scene I have this strange behaviour when navigate, looks like it is rendering back and menu icon at the same time.

Any ideas?

Also, its possible to increase the whole area of the right or left button? Imagine that I want a search input from the right when the search icon is pressed.

Thank you.

Version

• react-native-router-flux v4.0.0-beta.17
• react-native v0.47.1

[pgonzalez-santiago]

Here you can see the effect with slow animation. You can appreciate it after the back icon button is pressed.

[mcabs3]

From the looks of your second slow animation, it looks like it could be rendering the "actual" navigation first, and then laying your navBar overtop, you can see the slight shift of the hamburger icon which would suggest this.

so I think it is actually going back a screen, rendering that navBar internally (built from RNRF) and then laying your navBar on top after.

[aksonov]

@mcabs3 is right, please disable RNRF navbar then. If you still have issue please try to reproduce it with Example project.

[pgonzalez-santiago]

Sorry for asking but How can I disable the navBar? :/ I know how to hide it, but no how to disable it. @aksonov

[aksonov]

hide==disable

[pgonzalez-santiago]

RNRF navbar is hidden (disabled) in my case. The main problem is the "animation" between two custom navbars or a navbar and a custom navbar. As you can see in the image that I posted it looks like one navbar dissapear, then a black background appears and then the new navbar is rendered. How can I avoid that? Its possible to remove those 'animations'?

Did you test the transitions between custom navBars?

[aksonov]

Try headerMode='screen' for container scene for different animation

[aksonov]

I didn't test custom nav bars. Please fork and add it to Example project to demonstrate the issue.

[pgonzalez-santiago]

My fork has been merged. Now the example have some scenes with custom navbar.

Thank you.

[ericklarac]

@pgonzalez-santiago Hey, how do you modify the navBar on react-native-router-flux, I mean how do you set a custom navBar.

Wish you could help me.

[hugoh59]

@ericklarac you can customize most attributes of the nav bar check out the doc otherwise you can hide it with hideNavBar and create a custom component to replace it instead