React Native ProgressBarAndroid

The ProgressBarAndroid component of React Native is used to indicate the progress status of some activity or app loading something. ProgressBarAndroid component works only on Android platform. To use the progress bar in iOS platform, a ProgressViewIOS component is used.

Props of ProgressBarAndroid

React Native ProgressBarAndroid Example

In this example, we will implement horizontal ProgressBarAndroid and perform action on TouchableOpacity component. The progress status will display in Text component up to 3 digits only.

1. import React, { Component } from ‘react’;  
2. import { Platform, StyleSheet, View, Text, TouchableOpacity, ProgressBarAndroid, ProgressViewIOS } from ‘react-native’;  
3. export default class MyApp extends Component<{}>{  
4.   constructor()  {  
5.     super();  
6.     this.state = {  
7.       progressStatus: 0,  
8.     }  
9.   }  
10.   
11.   start_Progress = () => {  
12.     this.value = setInterval( () => {  
13.       if(this.state.progressStatus <= 1){  
14.         this.setState({progressStatus: this.state.progressStatus+ .01})  
15.       }  
16.     }, 100 );  
17.   }  
18.   
19.   stop_Progress = () =>{  
20.    clearInterval(this.value);  
21.   }  
22.   
23.   clear_Progress =()=>{  
24.     this.setState({progressStatus : 0.0})  
25.   }  
26.   
27.   render()  
28.   {  
29.     return(  
30.       <View style = { styles.MainContainer }>  
31.         <Text style = {{fontSize: 20, color: ‘#000’}}> Progress Value: { parseFloat((this.state.progressStatus * 100).toFixed(3))} %</Text>{  
32.             ( Platform.OS === ‘android’ )  
33.             ?  
34.               ( <ProgressBarAndroid styleAttr = “Horizontal” progress = { this.state.progressStatus } indeterminate = { false } /> )  
35.             :  
36.               ( <ProgressViewIOS progress = { this.state.progressStatus } /> )  
37.         }  
38.         <TouchableOpacity activeOpacity = { 1 } style = { styles.button } onPress = { this.start_Progress }>  
39.           <Text style = { styles.TextStyle }> Start Progress </Text>  
40.         </TouchableOpacity>  
41.         <TouchableOpacity activeOpacity = { 1 } style = { styles.button } onPress = { this.stop_Progress }>  
42.           <Text style = { styles.TextStyle }> Stop Progress </Text>  
43.         </TouchableOpacity>  
44.         <TouchableOpacity activeOpacity = { 1 } style = { styles.button } onPress = { this.clear_Progress }>  
45.           <Text style = { styles.TextStyle }> Reset Progress </Text>  
46.         </TouchableOpacity>  
47.       </View>  
48.     );  
49.   }  
50. }  
51.   
52. const styles = StyleSheet.create(  
53. {  
54.   MainContainer:  
55.   {  
56.     flex: 1,  
57.     justifyContent: ‘center’,  
58.     paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0,  
59.     margin: 20  
60.   },  
61.   
62.   button: {  
63.   width: ‘100%’,  
64.   backgroundColor: ‘#00BCD4’,  
65.   borderRadius:5,  
66.   padding: 10,  
67.   marginTop: 10,  
68.   
69. },  
70.   
71. TextStyle:{  
72.     color:’#fff’,  
73.     textAlign:’center’,  
74.     fontWeight: ‘bold’,  
75. }  
76. });  

Output: