Drawer Navigator Transition Animation
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 explicitly open the drawer
2- Navigating to other screens from the drawer menu
3- Add animated view to the drawer
4- Finalize animation and styling
1-Add button to open the drawer menu:
we will need to add a stack navigator to incorporate all of our screens and remove them from within the drawer navigator
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
Add a drawer content prop to the drawer navigator component
the drawer content is
Function that returns React element to render as the content of the drawer, for example, navigation items[2]
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
We will now need to track the progress of the drawer menu being opened in order to start our screen animation accordingly
- 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
- Add the drawerType of slide to push away the screens on opening the drawer instead of the default behavior of showing on top of underlying screen
- 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
