In this tutorial we’ll learn how to create a Circular Progress Bar Animation in React Native.
We'll use these packages:
- react-native-reanimated v2
- react-native-svg
- react-native-redash
My React Native animations course: www.reanimate.dev
Written article: www.reactiive.io/articles/cir...
Support me on Patreon: / reactiive 🤓
Follow me on Twitter: / reactiive_
Source code: github.com/enzomanuelmangano/...
What's a Shared Value? 🐢
Here's the answer: • Introduction to React ...
The main concepts we'll explore are:
- How to animate props with useAnimatedProps
- How to animate a text on the UI Thread with ReText component
ReText vs AnimateableText?
- If you already use redash in your project and using ReText doesn't feel limited, then I recommend using ReText.
- If you necessarily need to push the performance of the animation, then I absolutely recommend AnimateableText.
More info here: github.com/axelra-ag/react-na...
Chapters:
00:00 Introduction
00:56 Setup
04:10 Dasharray and dashoffset trick
07:40 The useAnimatedProps hook
10:30 Text vs ReText
15:18 The "Run" Button
Негізгі бет Circular Progress Bar Animation in React Native (Reanimated 2)
Пікірлер: 72