Drawer Navigator Transition Animation

by Abdo Arwish on December 13th

To break down our steps

1-Add button to open the drawer menu:

2- Navigating to other screens from the drawer menu

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

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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Medium Entry 7–10

In 2001, a bunch cinema lovers of very small Island, created the first International Island Film…

The Top 10 Packaging Design Trends For 2021

Sketches on Paper

(U)X (Design) Marks the Spot

Legal Innovators: Tend to you source

How I became a UX designer from scratch…

4 Point of Engineering Design Process

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abdo Arwish

Abdo Arwish

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

More from Medium

Which platform is better for mobile app development, React Native or Xamarin?

What is React Native and Why it’s Beneficial for Mobile App Development?

How To Build A Video Streaming App Using React Native

Notification toast animation in React Native with Reanimated 2