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

Published: 11 November 2020
on channel: 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

On this page of the site you can watch the video online Animated Progress Bar Indicator in React Native using Animated API and onLayout with a duration of hours minute second in good quality, which was uploaded by the user Catalin Miron 11 November 2020, share the link with friends and acquaintances, this video has already been watched 27,577 times on youtube and it was liked by 717 viewers. Enjoy your viewing!