Drawer Navigator Transition Animation

by Abdo Arwish on December 13th

Animations is considered a great way to keep the user attached & interested with what your app has to offer, they need to be subtle and intuitive and one important part any app is the navigation, so in order to get the user easily navigated in an effective yet subtly animated experience using the drawer navigator, We are going to walkthrough the steps of how to do so.

so without further ado lets buckle up and start by downloading the starter project from here[1]
It contains three basic screens within an ordinary drawer menu

To break down our steps

1-Add button to open the drawer menu:

once done add the button to the navigator options to let the user open the navigation menu from any screen.
Right now we will have only the screen component within the drawer menu now and we can’t navigate to others

2- Navigating to other screens from the drawer menu

and thats exactly what we are going to use it for, showing up the screens navigation items

The drawer content component is going to consist of a drawer scroll view and drawer item to each screen where we can use the onPress to navigate to the specified screen

3- Add animated view to the drawer

  • Add a progress state to track the animation then use the progress state to interpolate the scaling animation.
  • Once done pass the output to the transform style that we are going to use as a styling prop for our screens component.
  • Set the progress props from the built in drawer progress prop and pass the styles that has the transform animation value to the screens component.
  • wrap the screen component with an Animated.view to pass the style prop to it that is going to handle our animation

4- finalize animation and styling

  • Now our animation is done but the screen border radius needs to be set to change as the drawer menu opens and closes as well, lets use the same progress state to interpolate the screen radius, the same way as we did with scaling, passing that to the animated style prop.
  • Now for the last piece of the puzzle we are adding overlay color of transparent to make the gradient show on the entire background and wrap the entire drawer navigator within a linear gradient with a two colors of your choice.

Thats it , thats how you can simply apply the transition animation within the drawer navigator adding a gradient and an adjusting screen border radius

Download the full project from here, and if you have any question please let me know

I am Abdo, I have been working with react native since its early years, I like sharing knowledge and having fun while doing so :)