Perspective Menu Animation in React Native with Reanimated 2
In this tutorial we’ll learn how to create a Perspective Menu Animation in React Native.
We'll use these packages:
react-native-reanimated
react-native-gesture-handler
My React Native animations course: https://www.reanimate.dev
Learn more about React Native: https://www.reactiive.io
Support me on Patreon: / reactiive 🤓
Follow me on Twitter: / reactiive_
Source code: https://github.com/enzomanuelmangano/...
How to deal with SafeAreaView?
Check this repo: https://github.com/th3rdwave/react-na...
How to deal with the useAnimatedGestureHandler hook?
Check this video: • The basics of PanGestureHandler with ...
Here you can find the Expo Vector Icons: https://icons.expo.fyi/
The main concepts we'll explore are:
PanGestureHandler + useAnimatedGestureHandler
interpolate function from Reanimated
Chapters:
00:00 Introduction
00:35 Setup
03:00 The PanGestureHandler
06:50 Dealing with Context
09:30 The onEnd callback
11:05 Perspective animation
15:03 borderRadius
15:33 Menu Icon
18:40 GestureHandlerRootView