This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

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

    Spencer CarliSpencer Carli

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

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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...

    Discuss

    Discuss