React Native Change Progress bar Progress on ScrollView Scroll Dynamically iOS Android Example

Horizontal Progress bar is the main component of react native because of its comparability and usability. Horizontal progress bar is used to show the progress in percentage format by simply filling a horizontal bar smoothly. In this tutorial we would going to make a fully compatible Text Reader for react native using the ScrollView and Progress bar, When user starts scrolling the text it will automatically starts filling the progress bar(Updating the progress value) according to scrollView height and fill the that particular amount of progress bar. So in this tutorial we would going to Change Progress bar Progress on ScrollView Scroll dynamically, So let’s get started 🙂 .

Live Screenshot:- The below GIF image size is more than 8MB, So please be patience if your internet is slow 😉

Contents in this project Change Progress bar Progress on ScrollView Scroll Dynamically iOS Android Example Tutorial in React Native App:

1. Import StyleSheet, Platform, View, Text, ProgressBarAndroid, ProgressViewIOS and ScrollView component in your project.

2. Create constructor() in your project and make a State named as progress_count and make 2 other this type class variables name as scrollView_height and scrollViewContent_height.

progress_count : Is used to set Progress bar progress.

scrollView_height : Used to store the ScrollView height.

scrollViewContent_height : Used to hold the inside height of ScrollView and its content.

3. Create a function name as UpdateProgressBar() with progress parameter. This function would automatically calculate the progress according to main outside height of scrollview and inside height of scrollview. Now after calculating the progress we would save this inside the progress_count state.

4. Create a Root View in render’s return block, This would be our main View and both ScrollView and Bottom Progress bar view should put inside it.

5. Create the ScrollView component with your choice text inside the root View.

contentContainerStyle : Prop is used to apply style on ScrollView inside content.

onContentSizeChange : Automatically Called when scrollable content view of the ScrollView changes. You can read more about this prop here.

onScroll : Automatically calls on each time when scrollview scrolls event 1 frame.

onLayout : This is attached to onContentSizeChange prop.

scrollEventThrottle : This controls how often the scroll event will be fired while scrolling (as a time interval in ms).

6. Create another child View inside the Root View after closing ScrollView component. Inside this we would simply detecting the device and according to that we would show the Progress bar component.

7. Creating Style.

8. Complete source code for App.js File :

Screenshot in Android device:

Screenshot in iOS device: