React Native Horizontal ProgressBar Android iOS Example Tutorial

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.

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.

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.

4. Create a function named as Stop_Progress(), Inside this function we would use the clearInterval() function which would stop the setInterval() function immediately.

5. Create a function named as Clear_Progress(), this function would reset the State value as 0.00.

6. Create a Root View in render’s return block.

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.

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.

9. Create 3 buttons using TouchableOpacity and call all 3 functions from above.

10. Creating Style.

11. Complete source code for App.js File :

Screenshots in Android device:

Horizontal ProgressBar Android iOS

Screenshots in iOS device:

4 Comments

  1. FanReactNativeCode

    Thank you!

    Many thanks to you!

  2. bro when we press the start button 2 or more than 2 times the stop button doesn’t work. how to fix that ?

Leave a Reply

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