Custom React Native Drawer animation with SVG and Masked View

Опубликовано: 29 Июль 2020
на канале: Catalin Miron

9,677

290

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

Смотрите видео Custom React Native Drawer animation with SVG and Masked View онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Catalin Miron 29 Июль 2020, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 9,677 раз и оно понравилось 290 людям.

1,953