Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Perspective Menu Animation in React Native with Reanimated 2
Play lesson

Animate with Reanimated - Perspective Menu Animation in React Native with Reanimated 2

5.0 (1)
25 learners

What you'll learn

This course includes

  • 12 hours of video
  • Certificate of completion
  • Access on mobile and TV

Summary

Keywords

Full Transcript

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://reanimate.dev Shared 100+ Animations on Demos: https://reactiive.io/demos Twitter: https://twitter.com/reactiive_ Source code: https://github.com/enzomanuelmangano/animate-with-reanimated/tree/main/src/animations/11-menu-perspective How to deal with SafeAreaView? Check this repo: https://github.com/th3rdwave/react-native-safe-area-context How to deal with the useAnimatedGestureHandler hook? Check this video: https://youtu.be/4HUreYYoE6U 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

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere