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

Publicado el: 11 noviembre 2020
en el canal de: 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

En esta página del sitio puede ver el video en línea Animated Progress Bar Indicator in React Native using Animated API and onLayout de Duración hora minuto segunda en buena calidad , que subió el usuario Catalin Miron 11 noviembre 2020, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 27,577 veces y le gustó 717 a los espectadores. Disfruta viendo!

298,765

6.5K