In this tutorial, we’ll learn how to create a custom color picker, inspired by the Telegram App.
In order to achieve this result we'll use heavily the React Native Reanimated and the React Native Gesture Handler package.
My React Native animations course: www.reanimate.dev
Learn more about React Native: www.reactiive.io
Support me on Patreon: / reactiive 🤓
Follow me on Twitter: / reactiive_
Source code: github.com/enzomanuelmangano/...
Suggested videos 🐢
1. Reanimated basics: • Introduction to React ...
2. The "adjustedTranslateX" technique: • Interpolate Colors lik...
3. The color interpolation: • Interpolate Colors lik...
4. The PanGestureHandler: • The basics of PanGestu...
5. The TapGestureHandler: • Animate on DoubleTap l...
The main concepts we'll explore are:
- Reanimated Worklets
- interpolateColor
- PanGestureHandler
- TapGestureHandler
- useAnimatedGestureHandler
Chapters:
00:00 Introduction
01:11 Code setup
10:57 The PanGestureHandler setup
17:10 The drag clamping
21:36 Scale and TranslateY animation
23:57 Interpolate the internal picker color
32:00 Interpolate the big circle color
39:11 The TapGestureHandler setup
42:58 Code refactoring
Негізгі бет Color Picker Animation with React Native Reanimated 2
Пікірлер: 51