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.

import React, { Component } from 'react';

import { StyleSheet, Platform, View, Text, ProgressBarAndroid, ProgressViewIOS, ScrollView } from 'react-native';

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.

constructor()

{

super();

this.state = {

progress_count: 0

}

this.scrollView_height = 0;

this.scrollViewContent_height = 0;

}

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.

UpdateProgressBar = (progress) =>

{

this.setState({ progress_count: Math.abs( progress.nativeEvent.contentOffset.y / ( this.scrollViewContent_height - this.scrollView_height ))});

}

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.

render()

{

return(

</View>

);

}

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).

render()
    {
        return(
            <View style = { styles.MainContainer }>

<ScrollView 
                contentContainerStyle = {{ paddingBottom: 40 }} 
                onContentSizeChange = {( width, height ) => { this.scrollViewContent_height = height }} 
                onScroll = { this.UpdateProgressBar } 
                onLayout = {(event) => this.scrollView_height = ( event.nativeEvent.layout.height )} 
                scrollEventThrottle = { 12 } >
                    
                    <Text style = { styles.All_Text }>

Hello Guys, Welcome to ReactNativeCode.com, This is some sample Text for this project.
                      Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project.
                      Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project.
                      Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project.
                      Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project.
                      Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project.
                      Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project.
                      Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project.
                      Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project.
                      Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project.
                      Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project.
                      Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project.
                      Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project.
                      Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project.
                        
                    </Text>

</ScrollView>

</View>
        );
    }

render()

{

return(

<ScrollView

contentContainerStyle = {{ paddingBottom: 40 }}

onContentSizeChange = {( width, height ) => { this.scrollViewContent_height = height }}

onScroll = { this.UpdateProgressBar }

onLayout = {(event) => this.scrollView_height = ( event.nativeEvent.layout.height )}

scrollEventThrottle = { 12 } >

Hello Guys, Welcome to ReactNativeCode.com, This is some sample Text for this project.

Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project.

</Text>

</ScrollView>

</View>

);

}

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.

render()
    {
        return(
            <View style = { styles.MainContainer }>

</ScrollView>

render()

{

return(

<ScrollView

contentContainerStyle = {{ paddingBottom: 40 }}

onContentSizeChange = {( width, height ) => { this.scrollViewContent_height = height }}

onScroll = { this.UpdateProgressBar }

onLayout = {(event) => this.scrollView_height = ( event.nativeEvent.layout.height )}

scrollEventThrottle = { 12 } >

Hello Guys, Welcome to ReactNativeCode.com, This is some sample Text for this project.

Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project.

</Text>

</ScrollView>

{

( Platform.OS === 'android' )

(

<ProgressBarAndroid

styleAttr = "Horizontal"

progress = { this.state.progress_count }

color = "#fff"

indeterminate = { false }

style = {{ width: '100%' }}

)

(

<ProgressViewIOS

progressTintColor = "#fff"

style = {{ width: '100%' }}

progress = { this.state.progress_count }

)

}

<Text style = { styles.Percentage }> { Math.round( this.state.progress_count * 100 ) }% </Text>

</View>

);

}

7. Creating Style.

const styles = StyleSheet.create(

{

MainContainer:

{

flex: 1,

paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0

All_Text:

{

fontSize: 21,

color: '#000',

padding: 20,

textAlign: 'left'

ProgressBar_HolderView:

{

justifyContent: 'center',

flexDirection: 'row',

alignItems: 'center',

position: 'absolute',

left: 0,

right: 0,

bottom: 0,

paddingLeft: 20,

paddingRight: 50,

backgroundColor: '#009688',

height: 50,

Percentage:

{

position: 'absolute',

right: 6,

fontWeight: 'bold',

color: 'white'

});

8. Complete source code for App.js File :

import React, { Component } from 'react';

import { StyleSheet, Platform, View, Text, ProgressBarAndroid, ProgressViewIOS, ScrollView } from 'react-native';
 
export default class Project extends Component<{}>
{
    constructor()
    {
        super();
 
        this.state = { 
          
          progress_count: 0 
        
        }

this.scrollView_height = 0;
 
        this.scrollViewContent_height = 0;
    }
 
    UpdateProgressBar = (progress) =>
      {

this.setState({ progress_count: Math.abs( progress.nativeEvent.contentOffset.y / ( this.scrollViewContent_height - this.scrollView_height ))});
      
      }
 
    render()
    {
        return(
            <View style = { styles.MainContainer }>

</ScrollView>

<View style = { styles.ProgressBar_HolderView }>
                {   
                    ( Platform.OS === 'android' )
                    ?
                        (
                            <ProgressBarAndroid
                              styleAttr = "Horizontal"
                              progress = { this.state.progress_count }
                              color = "#fff"
                              indeterminate = { false }
                              style = {{ width: '100%' }}
                            />
                        )
                    :
                        (
                            <ProgressViewIOS
                              progressTintColor = "#fff"
                              style = {{ width: '100%' }}
                              progress = { this.state.progress_count }
                            />
                        )
                }
                    <Text style = { styles.Percentage }> { Math.round( this.state.progress_count * 100 ) }% </Text>
                </View>
            
            </View>
        );
    }
}
 
const styles = StyleSheet.create(
{
    MainContainer:
    {
        flex: 1,
        paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0
    },
 
    All_Text:
    {
        fontSize: 21,
        color: '#000',
        padding: 20,
        textAlign: 'left'
    },
    
    ProgressBar_HolderView:
    {
      justifyContent: 'center',
      flexDirection: 'row',
      alignItems: 'center',
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0,
      paddingLeft: 20,
      paddingRight: 50,
      backgroundColor: '#009688',
      height: 50,
    },

Percentage:
    {
        position: 'absolute',
        right: 6,
        fontWeight: 'bold',
        color: 'white'
    },
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

import React, { Component } from 'react';

import { StyleSheet, Platform, View, Text, ProgressBarAndroid, ProgressViewIOS, ScrollView } from 'react-native';

export default class Project extends Component<{}>

{

constructor()

{

super();

this.state = {

progress_count: 0

}

this.scrollView_height = 0;

this.scrollViewContent_height = 0;

}

UpdateProgressBar = (progress) =>

{

this.setState({ progress_count: Math.abs( progress.nativeEvent.contentOffset.y / ( this.scrollViewContent_height - this.scrollView_height ))});

}

render()

{

return(

<ScrollView

contentContainerStyle = {{ paddingBottom: 40 }}

onContentSizeChange = {( width, height ) => { this.scrollViewContent_height = height }}

onScroll = { this.UpdateProgressBar }

onLayout = {(event) => this.scrollView_height = ( event.nativeEvent.layout.height )}

scrollEventThrottle = { 12 } >

Hello Guys, Welcome to ReactNativeCode.com, This is some sample Text for this project.

Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project.

</Text>

</ScrollView>

{

( Platform.OS === 'android' )

(

<ProgressBarAndroid

styleAttr = "Horizontal"

progress = { this.state.progress_count }

color = "#fff"

indeterminate = { false }

style = {{ width: '100%' }}

)

(

<ProgressViewIOS

progressTintColor = "#fff"

style = {{ width: '100%' }}

progress = { this.state.progress_count }

)

}

<Text style = { styles.Percentage }> { Math.round( this.state.progress_count * 100 ) }% </Text>

</View>

);

}

const styles = StyleSheet.create(

{

MainContainer:

{

flex: 1,

paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0

All_Text:

{

fontSize: 21,

color: '#000',

padding: 20,

textAlign: 'left'

ProgressBar_HolderView:

{

justifyContent: 'center',

flexDirection: 'row',

alignItems: 'center',

position: 'absolute',

left: 0,

right: 0,

bottom: 0,

paddingLeft: 20,

paddingRight: 50,

backgroundColor: '#009688',

height: 50,

Percentage:

{

position: 'absolute',

right: 6,

fontWeight: 'bold',

color: 'white'

});

Screenshot in Android device:

Screenshot in iOS device:

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

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

Also Read :

One Comment

Leave a Reply Cancel reply

Search Here