Custom React Native Drawer animation with SVG and Masked View
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 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:21 Thanks!
01:00 Project presentation
03:20 Create the animated drawer
4:49 How Polygon point works
06:21 Define from and to coordinates
07:40 Animate Polygon
10:48 How to animate a polygon
12:32 Initial animation (preview)
13:05 MaskedView component
15:26 Animation with Masked enabled (preview)
16:05 Animate open drawer button
18:12 Set active route styles
19:42 Animate drawer content
21:22 Final words
#awesome #reactnative #drawer #animation #navigation
Watch video Custom React Native Drawer animation with SVG and Masked View online without registration, duration hours minute second in high quality. This video was added by user Catalin Miron 29 July 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 9,677 once and liked it 290 people.