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

Instructor: [00:00] Another option you have to further customize the transition config of a navigator is to write your own screen interpolator function, which we'll go ahead and do in a separate function called "interpolator."

[00:10] Interpolator is going to take a series of arguments. The first one is going to be scene props. On scene props, we can go ahead and access the layout position and scene by using destructuring syntax to go ahead and destructure scene props.

[00:27] Then from our interpolator function, again, we'll return an object with specifications on how we want to actually modify it. For example, we can go ahead and modify the opacity by saying position.interpolate. Position is an animated dot value, which means we can call this interpolate function on it.

[00:46] Interpolate is going to take an input range, and it's also going to take an output range. Each of those are going to be arrays. What we want to do is access scene.index-1. This will take place when it's a previous scene.

[01:00] We'll say when scene.index, when it's the current screen, and finally, when it's scene.index+1. When this is the previous screen, this is the instance. When it's the current screen, this is the instance. When this is the incoming screen, this will be the instance.

[01:18] With this in mind, when this is the incoming screen, we're going to want the opacity to be zero. When it's the current screen, we want it to be the opacity at 1. Finally, when it's the previous screen, we want the opacity back to 0We can then go ahead and pass opacity to our configuration object, and then when I go to the next screen, you can see that rather than sliding over, it's fading. You can see the difference between the header and the body of the content, how they're using two different ways of navigation.

[01:46] You can go ahead and expand on this. For example, what I've just put in here is we can modify the scale. Again, we're using position interpolate. We're using that same input range. We're just using a slightly different output range to determine what the scale should be.

[02:00] We can also go ahead and use the height. This will allow us to offset the content and move it from the bottom to the top, which is what we're doing here. When it's the incoming scene, the translateY is going to be completely off the screen. When it's the current screen, it will be zero offset. When it's the outgoing screen, again, zero offset.

[02:20] We can then go ahead and use these variables in a transform, which takes an array. Inside of that array, we'll pass two objects, one with scale, and one with translateY.

[02:30] Now, when we make this navigation change, you can see that in addition to fading or scaling the screen in, we're also sliding it in from the bottom.

[02:39] You're not limited to just using the screen interpolator for the primary content. You can also adjust the title content by using the header title interpolator. You can modify the left button by using the header left interpolator, and you can modify any right buttons that you would have in your application by using header right interpolator.

[02:58] By doing this, you can see that everything is navigating in the same way, and we can go ahead and make this a little bit more realistic by just using the opacity to go ahead and fade all of the content between scenes, rather than sliding content.