Integrate Custom Drawer animation component in React Navigation v5
This is the second part of • Custom React Native Drawer animation with ...
In this tutorial we will build an custom drawer in React Native using SVG, Masked View and vanilla Animated API from React Native.
We will go through how to animate a Polygon in React Native, how to animate the inner content of the drawer and how the React Native MaskedView is working.
Inspiration: https://dribbble.com/shots/4275765-Re...
SourceCode: http://github.com/catalinmiron/react-...
👉👉👉 More react native animations: https://www.animatereactnative.com/ 👈👈👈
---
React Navigation https://github.com/react-navigation/r...
React Native Masked view: https://github.com/react-native-commu...
React Native SVG: https://github.com/react-native-commu...
React Native vector icons: https://github.com/oblador/react-nati...
Expo: https://expo.io/
----
Want to support me?
Patreon: / catalinmiron
BuyMeACoffee: https://www.buymeacoffee.com/catalinm...
Paypal: https://paypal.me/catalinmiron
----
You can find me on:
Github: http://github.com/catalinmiron
Twitter: / mironcatalin
Website: http://batman.codes
Timeline:
00:00 Intro
00:16 React Navigation v5 integration preview
00:36 Project setup routes and navigation
02:40 How to add a custom drawer content
03:19 Refactor CustomDrawer
05:30 Pass props to CustomDrawer component
06:40 useIsDrawerOpen to start animation
08:53 Style drawerContent
09:55 First preview and issues with current implementation
10:37 drawerType='permanent' solution
11:38 Fix drawer appearance
12:32 Animated.sequence for CustomDrawer
13:35 Explain why Animated.sequence
15:18 Final React Native Custom drawer preview
15:56 Final words. Thank you all!
#reactnative #customdrawer #navigation #expo