CODEWITHSUNDEEP
javascriptreactjsreact-native
Chris
Chris

Reputation: 3174

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?

Upvotes: 1

Views: 948

Answers (2)

Arda Ilgaz
Arda Ilgaz

Reputation: 65

I followed this to fix this issue.

Basically you can write a custom interpolation function to overwrite the behaviour of NavigationCardStack and apply that to the scene. However this only applies to forward transitions, to backwards it still keeps the scaling for me. You have to experience with that.

Upvotes: 0

rclai
rclai

Reputation: 1890

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.

Upvotes: 5

Related Questions