Course Overview: React Native Navigation for Mobile Applications

Setup a StackNavigator as a Modal in React Navigation

Use the React Native Modal Component with React Navigation

Create an Authentication Flow with React Navigation

Open a Modal from Tab Bar in React Navigation

Override Default Transitions in React Native with StackNavigator's transitionConfig Object

Build Fine-grained Screen Transitions with a Custom React Navigation Interpolator

Replace a Screen with React Navigation

React Navigation for Native Mobile Applications

In this lesson you will learn how you can begin overriding the default transition options for React Navigation via the _transitionConfig_ configuration object. 

Instructor: [00:00] to start with, we've got a basic application that uses a StackNavigator to render a home screen and a detail screen, which we can go ahead and navigate between. Now by default, this is using React Navigation's default animation patterns, which on iOS are meant to mimic exactly the iOS navigation.

[00:17] If we want to go ahead and start overriding this as a second argument to our StackNavigator function, we can pass a configuration object to it. We can pass it a function on the key transition config. Inside of transition config, we can go ahead and return an object, at which point we can go ahead and use the key transition spec to pass an object to override the default transition.

[00:40] For example, we can override the duration and say it will take 3,000 seconds to make this transition. Also, after importing Easing and Animated from React Native, we can go ahead and override the Easing with, for example, Easing.out and then passing Easing.poly(4).

[01:04] If I reduce this down to 750 milliseconds, we can see that it's very slightly changing the animations that are happening. You can go ahead and specify the Animated timing type, or you could use Animated.spring there to go ahead and start customizing this transition...

Course

React Navigation for Native Mobile Applications

Override Default Transitions in React Native with StackNavigator's transitionConfig Object

Share this video with your friends