Horizontal progress bar is used to show progress within a fix block with auto filled functionality. Horizontal ProgressBar is mostly used to show downloading progress and uploading progress in react native applications. In react native Both android and iOS devices supports different type of components to display Horizontal ProgressBar. ProgressBarAndroid is used in android devices to display horizontal progress bar and ProgressViewIOS is used to display horizontal progress bar in iOS applications. They both supports value between 0 – 1. So in this tutorial we would going to create a react native app with combine use of ProgressBarAndroid and ProgressViewIOS.
What we are doing in this project(Must Read) –
We are creating a react native app with 2 different progress bar components ProgressBarAndroid and ProgressViewIOS. Now we would dynamically detect the application environment is Android or iOS and if the device is android then it will show the Android’s progress bar and if the device is iOS then it will show the iOS progress bar.
Contents in this project Horizontal ProgressBar in Android iOS React Native App Example Tutorial:
1. Import Platform, StyleSheet, View, Text, TouchableOpacity, ProgressBarAndroid and ProgressViewIOS components in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, Text, TouchableOpacity, ProgressBarAndroid, ProgressViewIOS } from ‘react-native’;
|
2. Create constructor() in your project’s class. Now we would going to create a State named as Progress_Value initialize with 0.00 value.
|
1
2
3
4
5
6
7
8
9
|
constructor()
{
super();
this.state = {
Progress_Value: 0.00
}
}
|
3. Create a function named as Start_Progress(), this function is used to Start filling the progress bar with .01 value. we are doing this because Horizontal progress bar supports value between 0 to 1. We are using the setInterval() function to dynamically update the State value with 0.01 . In setInterval() function 1000 means 1 second and we are using 100 which means 100 milliseconds. So it will plus 0.01 after each 100 milliseconds.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
Start_Progress = () =>
{
this.value = setInterval( () => {
if(this.state.Progress_Value <= 1)
{
this.setState({Progress_Value: this.state.Progress_Value + .01})
}
}, 100 );
}
|
4. Create a function named as Stop_Progress(), Inside this function we would use the clearInterval() function which would stop the setInterval() function immediately.
|
1
2
3
4
5
|
Stop_Progress = () =>{
clearInterval(this.value);
}
|
5. Create a function named as Clear_Progress(), this function would reset the State value as 0.00.
|
1
2
3
4
5
|
Clear_Progress =()=>{
this.setState({Progress_Value : 0.0})
}
|
6. Create a Root View in render’s return block.
|
1
2
3
4
5
6
7
8
9
|
render()
{
return(
<View style = { styles.MainContainer }>
</View>
);
}
|
7. Create a Text component in Root view to show the progress updating status live. We are using the parseFloat((this.state.Progress_Value * 100).toFixed(3)) function to display the progress to 3 digits only.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render()
{
return(
<View style = { styles.MainContainer }>
<Text style = {{fontSize: 20, color: ‘#000’}}> Progress Value: { parseFloat((this.state.Progress_Value * 100).toFixed(3))} %</Text>
</View>
);
}
|
8. Create a Curly brackets block in Root View and inside this block we would simply use the Platform.OS === ‘android’ with Ternary operator to detect the device platform and if the device is android then it will load the Android’s progress bar and if the Device platform is iOS then it will show the iOS horizontal progress bar.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
render()
{
return(
<View style = { styles.MainContainer }>
<Text style = {{fontSize: 20, color: ‘#000’}}> Progress Value: { parseFloat((this.state.Progress_Value * 100).toFixed(3))} %</Text>
{
( Platform.OS === ‘android’ )
?
( <ProgressBarAndroid styleAttr = “Horizontal” progress = { this.state.Progress_Value } indeterminate = { false } /> )
:
( <ProgressViewIOS progress = { this.state.Progress_Value } /> )
}
</View>
);
}
|
9. Create 3 buttons using TouchableOpacity and call all 3 functions from above.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
render()
{
return(
<View style = { styles.MainContainer }>
<Text style = {{fontSize: 20, color: ‘#000’}}> Progress Value: { parseFloat((this.state.Progress_Value * 100).toFixed(3))} %</Text>
{
( Platform.OS === ‘android’ )
?
( <ProgressBarAndroid styleAttr = “Horizontal” progress = { this.state.Progress_Value } indeterminate = { false } /> )
:
( <ProgressViewIOS progress = { this.state.Progress_Value } /> )
}
<TouchableOpacity activeOpacity = { 0.7 } style = { styles.button } onPress = { this.Start_Progress }>
<Text style = { styles.TextStyle }> Start Progress </Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity = { 0.7 } style = { styles.button } onPress = { this.Stop_Progress }>
<Text style = { styles.TextStyle }> Stop Progress </Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity = { 0.7 } style = { styles.button } onPress = { this.Clear_Progress }>
<Text style = { styles.TextStyle }> Reset Progress </Text>
</TouchableOpacity>
</View>
);
}
|
10. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0,
margin: 20
},
button: {
width: ‘100%’,
backgroundColor: ‘#00BCD4’,
borderRadius:5,
padding: 10,
marginTop: 10,
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
11. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, Text, TouchableOpacity, ProgressBarAndroid, ProgressViewIOS } from ‘react-native’;
export default class MyApp extends Component<{}>
{
constructor()
{
super();
this.state = {
Progress_Value: 0.00
}
}
Start_Progress = () =>
{
this.value = setInterval( () => {
if(this.state.Progress_Value <= 1)
{
this.setState({Progress_Value: this.state.Progress_Value + .01})
}
}, 100 );
}
Stop_Progress = () =>{
clearInterval(this.value);
}
Clear_Progress =()=>{
this.setState({Progress_Value : 0.0})
}
render()
{
return(
<View style = { styles.MainContainer }>
<Text style = {{fontSize: 20, color: ‘#000’}}> Progress Value: { parseFloat((this.state.Progress_Value * 100).toFixed(3))} %</Text>
{
( Platform.OS === ‘android’ )
?
( <ProgressBarAndroid styleAttr = “Horizontal” progress = { this.state.Progress_Value } indeterminate = { false } /> )
:
( <ProgressViewIOS progress = { this.state.Progress_Value } /> )
}
<TouchableOpacity activeOpacity = { 0.7 } style = { styles.button } onPress = { this.Start_Progress }>
<Text style = { styles.TextStyle }> Start Progress </Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity = { 0.7 } style = { styles.button } onPress = { this.Stop_Progress }>
<Text style = { styles.TextStyle }> Stop Progress </Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity = { 0.7 } style = { styles.button } onPress = { this.Clear_Progress }>
<Text style = { styles.TextStyle }> Reset Progress </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0,
margin: 20
},
button: {
width: ‘100%’,
backgroundColor: ‘#00BCD4’,
borderRadius:5,
padding: 10,
marginTop: 10,
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
Screenshots in Android device:
Screenshots in iOS device:
Also Read :
React Native Disable Remove All Yellow Warning Messages Box
React Native Dynamically Add Render View Component on Button Click in Android iOS App Example Using Animation
React Native Implement Custom reCaptcha in Android iOS Example
React Native Get Clicked Position of Touch Screen Coordinates using PanResponder iOS Android Tutorial
React Native Material Bottom Navigation View for Android iOS Example
