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

🔥 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

----
----

Want to support me?

----

You can find me on:

---

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
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
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

[EsotericArnold]

this was amazingly clear. At no point did I not understand what was happening, I even learned the usefulness of Animated, useRef and when to use return in the useEffect hook. This was great.

[usamaali]

man, you make my life easier as a dev. Another great video. Learned a lot.

[luispaulo]

Another amazing tutorial! Speechless! I'm marathoning it's contents and learning a lot! Thank you from Brazil

[fagallardo]

Thank you so much man! That's awesome!

[nguyenangnam]

great for you. <3
Hope you have more and more video like this!!!

[leonampaula]

Amazing tutorial! Thanks a lot for this content!

[lucasgcabr]

Helping a lot, as always. Thank you. 🇧🇷

[vivekjm]

was expecting the gradient one as shown in the thumbnail...any way good tutorial thanks man ❤️

[syknz]

Man, how do u became so pro!!! Congrats bro and keep it up! Wish u the Best!!

[RaviKiranMakala]

Amazing catalin miron.❤️
I hope you do a video on redux.

[Bentomyon]

Very clear explanation but I'm getting an error I can't explain :(

ExceptionsManager.js:179 Invariant Violation: [357, "<<NaN>>"] is not usable as a native method argument

[zacktonature]

How would I use this progress bar if I didn't want it to increase on a timer, but increase when the user presses a button?

[samuelmejia]

Good Job, What is your font in VS Code?

[AndreiKashkan]

Heyo) Could you recommend me tools for measure performance for react-native apps.

[gs]

can i still follow this tutorials if im not using expo?