How can I make a static bottom bar using Navigator with React Native?

Question

I'm using the Navigator which renders a Nav Bar and a Scene.

I've put the Bottom Nav Tray into the scene (as returned by renderScene) because I didn't know where else to put it.

The problem as you can see from the GIF is that react duplicates and animates the bottom bar too, creating a weird effect.

Wrapping the Navigator in a View so I can add the Bottom Nav Tray as a sibling caused nothing to be rendered (seems like Navigator doesn't like to be wrapped).

How can I have a static bottom nav bar which isn't part of the transition animation? Thanks.

Answer 1

Did you see RN Examples. https://github.com/facebook/react-native/tree/master/Examples/UIExplorer ?

Also I found this article https://medium.com/@dabit3/react-native-navigator-experimental-part-3-adding-tabs-28a2c57356b6#.dmfu9zya9