Animated Progress Bar Indicator in React Native using Animated API and onLayout

Опубликовано: 11 Ноябрь 2020
на канале: Catalin Miron

27,577

717

🔥 In this video tutorial you'll learn how to create a reusable Animated Progress indicator bar component in React Native using React Native Animated API and React Native onLayout.

We'll go through:
- How to create a reusable component in React Native
- How to animate the progress indicator bar
- How to calculate the position of the bar from current progress.
- How to use onLayout to get the size of the progress bar indicator
- How to use reactive type of animation in React Native using Animated API

----
⚠️ Access full source code: https://www.animatereactnative.com/po...
----

Starter code: https://gist.github.com/catalinmiron/...

👉👉 Have any questions? Join Discord:   / discord  .

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 Introduction
00:40 Boilerplate + starter code link
01:05 What we’re going to build
02:00 Start building reusable Progress indicator component
03:50 Add Progress indicator label
05:00 Create reactive type on animation with React Native Animated API
05:25 Why new Animated.Value() is inside a React.useRef
06:05 Use React Native onLayout for layout measurements
06:40 Define animation for Progress indicator bar
07:15 Modify the animation when Progress receives a new prop
08:10 Math formula to calculate x position of the Progress indicator bar
09:06 Apply animation to the Progress
09:25 [PREVIEW] React Native Progress bar indicator output
09:50 Dummy interval to update Progress bar indicator using React.useEffect
11:04 Final words and thanks

#react-native-animated-api #react-native-progress-bar #react-native-progress-indicator #react-native-indicator #react-native-animated-indicator #react-native-onlayout #react-native-reactive-animation #react-native-reusable-component #react-native-animation

Смотрите видео Animated Progress Bar Indicator in React Native using Animated API and onLayout онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Catalin Miron 11 Ноябрь 2020, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 27,577 раз и оно понравилось 717 людям.

2,804