Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


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

    Spencer CarliSpencer Carli
    react-nativeReact Native

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



    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


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