React Native Dynamically Change ProgressBar Progress on ScrollView Scrolling Andorid iOS Tutorial

Guys, In this tutorial I am going to explain and show you how we can Dynamically Change ProgressBar Progress on ScrollView Scrolling in react native. Basically, this tutorial demonstrates how we can identify that how much scroll view has been scrolled in either top or down side.

In brief, what I am doing in Dynamically Change ProgressBar Progress on ScrollView Scrolling tutorial?

  • Basically to perform this task I require these following three values:
    • ScrollView height.
    • ScrollView content’s height.
    • ScrollView’s current scrolling position.

And react native ScrollView component provides sufficient props for these tasks and these props are as follows:

  • To get the ScrollView height, we have to use the onLayout prop.
  • To get the ScrollView content’s height, we have to use the onContentSizeChange prop.
  • To get the ScrollView’s current scrolling position, the react native ScrollView component provides onScroll prop, which takes a function with event parameter and this function executes every time when we scroll the ScrollView and through this event parameter we can get the ScrollView’s current scrolling position.

Let’s begin…

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

Step – 2: Implement constructor  method.

Explanation:

  • this.scrollViewHeight  variable is used to hold the outer height of the ScrollView Component.
  • this.scrollViewContentHeight  variable is used to hold the inner content height of the ScrollView Component.

Step – 3: Implement onScroll  custom method which will be executed every time when you scroll the ScrollView and in this method our calculation will be performed.

Explanation:

  • Suppose our ScrollView height is 640 and our ScrollViewContentHeight is 2416 and contentOffset value is 180 then according to above formula, scrollPercent  state variable will hold the value 0.10 then when we convert this value into percent then we will get 10% then it means our ScrollView component has been 10% scrolled and this calculation will be done every time when we scroll the ScrollView component to get the updated value.

Step – 3: Implement render method.

Note: I am rendering different components on different platforms using Platform API because ProgressBarAndroid component works on Android platform and ProgressViewIOS component works on iOS platform.

Step – 4: Implement styles for all required components.

Complete Source Code:

Step – 5: 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.

Enjoy Guys…

Leave a Reply

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