Javatpoint Logo
Javatpoint Logo

React Native ProgressBar With Animated

In the previous tutorial of ProgressBarAndroid we learn how to display the default progress bar. However, we can also customize the progress bar using Animated class.

React Native ProgressBar with Animated Example

Import the Animated class and create Animated.View and Animated.Text component inside View. Initialize a variable progress status to 0 and call the onAnimate()method. This method will invoked when the screen will completely loaded (componentDidMount() calls). Add a listener on onAnimate() method that updates the progress status.

App.js

The progress status of progress bar is updated in the interval of per 0.5 second (50000 microseconds). At the same time the width of progress bar is determined by progress status, and its status is set into Animated.Text component.

Output:

React Native ProgressBar With Animated React Native ProgressBar With Animated




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


B.Tech / MCA