React Native Animate Stack Navigator Screen on Drawer Toggle Tutorial

• @react-navigation/native (version – 5.7.6 at the time of the creation of this post).
• @react-navigation/drawer (version – 5.9.3 at the time of the creation of this post).
• @react-navigation/stack (version – 5.9.3 at the time of the creation of this post).
• react-native-gesture-handler (version – 1.8.0 at the time of the creation of this post).
• react-native-reanimated (version – 1.13.1 at the time of the creation of this post).
• react-native-safe-area-context (version – 3.1.8 at the time of the creation of this post).
• react-native-screens (version – 2.11.0 at the time of the creation of this post).
• react-native-vector-icons (version – 7.1.0 at the time of the creation of this post).
• react-native-linear-gradient (version – 2.5.6 at the time of the creation of this post).
• react-native-responsive-screen (version – 1.4.1 at the time of the creation of this post).
• react-native-device-info (version – 7.0.2 at the time of the creation of this post).

Step – 2: Create a folder hierarchy /src/AnimateStackOnDrawerToggle(under the root directory) and create following 3 files under /src/AnimateStackOnDrawerToggle directory and sub-folder /assets/images under /src/AnimateStackOnDrawerToggle and place 1.jpg (Background image) and 2.jpg (Drawer Tumbnail) files inside/assets/images.

• AnimateStackOnDrawerToggle.js: This file is responsible for having code for DrawerNavigator with required props, animation configurations (Scale & Border Radius) for Stack Screens, background image, etc.
• CustomDrawer.js: Responsible for having the code for our Custom Drawer, animation configurations (Opacity) for the drawer.
• Screen.js: Because I am a lazy person and just don’t want to create the same code for four separate screens. So, I have just created a reusable component named Screen.js to create our Stack screens.

And services.js file under /src directory.

• services.js: Will contain the data about Stack screens.

Step – 3: Implement code for AnimateStackOnDrawerToggle.js file:

Considerable Point(s):

• Starting from the render function, very first we have a ImageBackground component to render Sea image (in the background in the attached video).
• Then StatusBar component to change the default styling of the StatusBar.
• Then DrawerNavigator with some of it props, custom styling, most importantly custom drawer content and animation configurations based on progress value. Actually, the drawerContent prop of Drawer Navigator returns some props such as state, navigation, descriptors, and progress. progress is n animated value varies between 0 and 1. 0 means drawer is closed and 1 means drawer is open. We can interpolate progress prop to create custom animations. As you can see in lines 57 (creating the scale animation by interpolating progress) and 63 (creating the borderRadius animation by interpolating progress).
• And you can notice from lines 79 to 85, I am looping stackScreens array to render Stack screens as Drawer screens.

Step – 4: Implement code for CustomDrawer.js file:

Considerable Point(s):

• In-line 32, I am creating the opacity animation for Drawer’s content by interpolating the progress prop and apply the animated opacity value to Animated.View on line 41.
• From lines 59 to 78, render Drawer Items with custom styling and focus selected item based on the isFocused variable.

Step – 5: Implement code for Screen.js file:

Considerable Point(s):

• In-line 37 extract the style prop (to animate the Stack screen – Scale & borderRadius) from the props and applied to the Animated.View on line 40 and from lines 41 to 63 render the Stack screen.

Step – 6: Implement code for services.js file:

Step – 7: Implement code for App.js file:

That’s all Guys, I hope you enjoyed this article. Let me know your thoughts in the comments section. Your comments encourage me to create valuable blogs for you.