React Native Dynamically Change Horizontal ProgressBar Progress on Button Click Tutorial

Guys, Today I am going to elaborate that how we can change the React Native ProgressBar progress dynamically on button click with complete source code. Basically, React Native provides ProgressBarAndroid  component for Android and ProgressViewIOS  component for iOS. So, we are going to render correct component for correct platform through single piece of code. This is possible through the react native Platform  API. Through Platform API, we can detect the platform on which app is running and if the app is running on Android device then we will render ProgressBarAndroid  component or if app is running on iOS deice then we will render ProgressViewIOS  component.

In brief, what I am doing in Dynamically Change Horizontal ProgressBar Progress on Button Click tutorial?

  • First of all, through react native Platform API, I am going to detect the platform and render its corresponding component.
  • Then on button click, I am going to generate a random number through javascript random  function and set this generated number as the ProgressBar’s progress. The ProgressBar component takes number from 0 to 1 as its progress value and javascript random function generates random number from 0 ( included ) to 1 ( excluded ).

Let’s get started…

Step – 1: Import required components from react , react-native  packages.

1
2
import React, { Component } from 'react';
import { View, Text, Platform, ProgressBarAndroid, ProgressViewIOS, StyleSheet, TouchableOpacity } from 'react-native';

Step – 2: Implement constructor  method.

1
2
3
4
5
6
constructor()
{
  super();
 
  this.state = { progressBarProgress: 0.0 }
}

Step – 3: Implement changeProgress  custom method which is responsible to generate a random number and update the  progressBarProgress  state variable with this newly generated random number.

1
2
3
4
changeProgress = () =>
{
  this.setState({ progressBarProgress: parseFloat(Math.random().toFixed(1)) });
}

Explanation:

  • As you can see in the above code snippet, I am using javascript toFixed(<number>)  method. This method is responsible to convert a number into string and restrict the number of digits after decimal. In our case, I want only 1 digit after decimal. That’s why I am using toFixed(1) , because toFixed  function converts a number into string I am using a parseFloat  javascript function to convert a string into number.

Step – 4: Implement componentDidMount  method.

1
2
3
4
componentDidMount()
{
  this.changeProgress();
}

Step – 5: Implement render  method.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
render()
{
  return(
    <View style = { styles.container }>
      <Text style = { styles.text }>Progress Value: { this.state.progressBarProgress * 100 }%</Text>
      {
          ( Platform.OS === 'android' )
          ?
            ( <ProgressBarAndroid progress = { this.state.progressBarProgress } styleAttr = "Horizontal" indeterminate = { false } /> )
          :
            ( <ProgressViewIOS progress = { this.state.progressBarProgress } /> )
      }
      <TouchableOpacity activeOpacity = { 0.8 } style = { styles.btn } onPress = { this.changeProgress }>
        <Text style = { styles.btnText }>Change Progress</Text>
      </TouchableOpacity>
    </View>
  );
}

Explanation:

  • As you can see in the above code snippet, I am detecting the platform using the Platform API and render correct component on the correct platform.

Step – 6: Implement styles for all required components.

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
const styles = StyleSheet.create(
{
  container:
  {
    flex: 1,
    justifyContent: 'center',
    paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0,
    paddingHorizontal: 25
  },
 
  text:
  {
    color: 'black',
    fontSize: 20,
    marginBottom: 20,
    textAlign: 'center'
  },
 
  btn:
  {
    padding: 10,
    backgroundColor: 'rgba(0,0,0,0.5)',
    marginTop: 20
  },
 
  btnText:
  {
    color: 'white',
    fontSize: 20,
    textAlign: 'center'
  }
});

Complete Source Code:

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
import React, { Component } from 'react';
import { View, Text, Platform, ProgressBarAndroid, ProgressViewIOS, StyleSheet, TouchableOpacity } from 'react-native';
 
export default class App extends Component<{}>
{
  constructor()
  {
    super();
 
    this.state = { progressBarProgress: 0.0 }
  }
 
  changeProgress = () =>
  {
    this.setState({ progressBarProgress: parseFloat(Math.random().toFixed(1)) });
  }
 
  componentDidMount()
  {
    this.changeProgress();
  }
 
  render()
  {
    return(
      <View style = { styles.container }>
        <Text style = { styles.text }>Progress Value: { this.state.progressBarProgress * 100 }%</Text>
        {
            ( Platform.OS === 'android' )
            ?
              ( <ProgressBarAndroid progress = { this.state.progressBarProgress } styleAttr = "Horizontal" indeterminate = { false } /> )
            :
              ( <ProgressViewIOS progress = { this.state.progressBarProgress } /> )
        }
        <TouchableOpacity activeOpacity = { 0.8 } style = { styles.btn } onPress = { this.changeProgress }>
          <Text style = { styles.btnText }>Change Progress</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
 
const styles = StyleSheet.create(
{
  container:
  {
    flex: 1,
    justifyContent: 'center',
    paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0,
    paddingHorizontal: 25
  },
 
  text:
  {
    color: 'black',
    fontSize: 20,
    marginBottom: 20,
    textAlign: 'center'
  },
 
  btn:
  {
    padding: 10,
    backgroundColor: 'rgba(0,0,0,0.5)',
    marginTop: 20
  },
 
  btnText:
  {
    color: 'white',
    fontSize: 20,
    textAlign: 'center'
  }
});

Step – 7: Apply react-native run-android  command on terminal to run app in Android devices or use react-native run-ios  to run app in iOS devices.

  • iOS Screenshot:

  • Android Screenshot:

Enjoy Guys…

Leave a Reply

Your email address will not be published. Required fields are marked *