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.
import React, { Component } from 'react'; import { View, Text, Platform, ProgressBarAndroid, ProgressViewIOS, StyleSheet, TouchableOpacity } from 'react-native';
Step – 2: Implement constructor method.
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.
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.
componentDidMount() { this.changeProgress(); }
Step – 5: Implement render method.
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.
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:
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…