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

To create an animated progessbar we need to import theAnimated class. Add 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 which updates the progress status.

App.js

1. 
   import React, {Component} from 'react';  
2. import {Platform, StyleSheet, Text, View, Animated} from 'react-native';  
3.   
4. export default class App extends Component {  
5.     state={  
6.         progressStatus: 0,  
7.     }  
8.     anim = new Animated.Value(0);  
9.     componentDidMount(){  
10.         this.onAnimate();  
11.     }  
12.     onAnimate = () =>{  
13.         this.anim.addListener(({value})=> {  
14.             this.setState({progressStatus: parseInt(value,10)});  
15.         });  
16.         Animated.timing(this.anim,{  
17.              toValue: 100,  
18.              duration: 50000,  
19.         }).start();  
20.     }  
21.   render() {  
22.     return (  
23.       <View style={styles.container}>  
24.             <Animated.View  
25.                 style={[  
26.                     styles.inner,{width: this.state.progressStatus +"%"},  
27.                 ]}  
28.             />  
29.             <Animated.Text style={styles.label}>  
30.                     {this.state.progressStatus }%  
31.             </Animated.Text>  
32.       </View>  
33.     );  
34.   }  
35. }  
36. const styles = StyleSheet.create({  
37.     container: {  
38.     width: "100%",  
39.     height: 40,  
40.     padding: 3,  
41.     borderColor: "#FAA",  
42.     borderWidth: 3,  
43.     borderRadius: 30,  
44.     marginTop: 200,  
45.     justifyContent: "center",  
46.   },  
47.   inner:{  
48.     width: "100%",  
49.     height: 30,  
50.     borderRadius: 15,  
51.     backgroundColor:"green",  
52.   },  
53.   label:{  
54.     fontSize:23,  
55.     color: "black",  
56.     position: "absolute",  
57.     zIndex: 1,  
58.     alignSelf: "center",  
59.   }  
60. });  

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: