Chris Chris - 2 months ago 25
React JSX Question

React Native navigating between screens, screen size shrinking bug

Please see the attached image.

enter image description here

Essentials: When I navigate to a new scene, the previous screen looks to be shrinking or moving upward, this isn't the typical UX pattern on Apple apps - any ideas?

Answer

Correct, that is not the default iOS navigation transition, it is a custom navigation transition that the React Native team created that they use on their own apps.

If you're using the Navigator component, you can see how they customize their scene transition configuration here. Notice how on some scene configurations they change the scale during transition (search for scale in that file). If you don't want this to happen, you can customize it using the configureScene prop, otherwise you will have to set a background color to the Navigator itself to not notice the page shrinking, for example, <Navigator style={{ backgroundColor: '#your-bg-color' }} {...otherProps} />, but I doubt you will want to do this.

If you're using NavigationExperimental, they do the same thing if you use the NavigationCardStack. Unfortunately, they don't really let you customize the transition animation on NavigationCardStack except for the direction. In order to be able to customize your navigation transitions in NavigationExperimental, you need to use NavigationTransitioner.