React-native-router-flux: Animation of appearance of navigation bar?

[cymen]

Version

Tell us which versions you are using:

• react-native-router-flux v3.35.0
• react-native v0.33.0

Expected behaviour

When transitioning from a scene with navigation bar hidden to a scene with navigation bar on, I would expect the navigation bar to animated in like the scene animates in.

Actual behaviour

Navigation bar pops down from the top on enter of scene. On exit, it pops up (before the scene is fully exited) so makes the scene redraw more towards the top.

Steps to reproduce

1. Add an initial scene with hidden navigation bar.
2. Add a scene to go to with navigation bar visible.
3. Observe navigation bar when going to and from screen with visible navigation bar to one without.

I am using a custom navigation bar component.

Do I need to somehow sync up the animation used for the view to my custom navigation bar to have it look more natural?

[Aldo111]

+1. I actually came here to report pretty much this behavior. Transitioning from a hideNavBar={true} scene to a hideNavBar={false} scene causes the nav bar from the hidden/original scene to briefly show before the new one is animated in.

Any workarounds? It looks rather unwieldy. Is it something within the router or the Experimental navigator?

[binchik]

@Aldo111 Hi, I'm facing the same problem. Did you come up with a solution?

[Aldo111]

@binchik Unfortunately no. Although it was more for a lack of trying as I had to switch to another project, which I've been working on since. I'll likely revisit this soon but unfortunately I don't have anything for you at the moment. I believe there are some other navigation bars out there (look for react modules) that may circumvent this issue - although I think I didn't use them because their API/interface wasn't the best or most complete.

[binchik]

@Aldo111 I came up with a solution yesterday. Just nest your scenes with the weird navigation bar appearance animation into another scene like this:

<Scene hideNavBar key={'shop'} component={ShopScreen} />
<Scene key={'checkoutFlow'}>
  <Scene key={'cart'} component={CartScreen} title={'Корзина'} />
  <Scene key={'checkout'} component={CheckoutScreen} title={'Оформление заказа'} />
</Scene>

Then push your scenes using the root scene's key.

[moiri-gamboni]

@binchik Hi, I'm also having the same issue. I'm trying to implement your fix, but I can't seem to figure out how to navigate from the parent scene to one of the sub-scenes. For example, from 'shop' to 'checkout'. Doing Actions.checkoutFlow() followed by Actions.checkout() doesn't seem to execute the second action and just goes to cart. If I use the reset or replace type on checkoutFlow it will navigate to checkout but without animation. I've tried setting the initial prop on checkout dynamically but to no avail. Any ideas?
EDIT: Ended up using Switch for 'checkoutFlow' so I could choose the scene dynamically

[binchik]

@moiri-gamboni, in order to push I used the parent's scene key only. So to navigate to cart I just pushed checkoutFlow, without pushing the cart itself.

[binchik]

@moiri-gamboni sorry, didnt realize you wanted to push the checkout scene. No idea then :( I personally had a situation where the scenes would be pushed in a specific sequence.

EDIT: I think wrapping the push to checkout inside requestAnimationFrame must do the trick.

[luisgrases]

Was having a similar issue using v4. hideNavBar property would show the navbar for a milisecond before hidding it. The animation was weird. My workaround was to use navBar={() => <View></View>} instead of hideNavBar={true}