Merge pull request #8 from zachgibson/feature/progress-bar

Feature/progress bar

Author: zachgibson

README.md

@@ -9,6 +9,7 @@ __Features__
 - __Flexible.__ Pass your own Animated.Value and use that value for both ParallaxSwiper and your own UI.
 - __Performant.__ Leverages useNativeDriver for 60FPS and no latency.
 - __Cross-platform.__ Implement your parallax on both iOS and Android.
+- __Progress Bar.__ Horizontal or vertical progress bar.
 
 ![Twitter Moments Demo](https://user-images.githubusercontent.com/10658888/30244667-636cfc0e-9588-11e7-9805-3a0c5649ab4b.gif)  
 ![Vevo Demo](https://user-images.githubusercontent.com/10658888/30244668-66164c3a-9588-11e7-9cfa-c0c5dc29090c.gif)  
@@ -49,6 +50,7 @@ constructor() {
   dividerColor="black"
   backgroundColor="#fff"
   onMomentumScrollEnd={activePageIndex => console.log(activePageIndex)}
+  showProgressBar={true}
 >
   <ParallaxSwiperPage
     BackgroundComponent={<FireVideoComponent />}
@@ -79,6 +81,10 @@ constructor() {
 | __`showsHorizontalScrollIndicator`__ | _Boolean_ | `false` | When true, shows a horizontal scroll indicator. The default value is false. |
 | __`showsVerticalScrollIndicator`__ | _Boolean_ | `false` | When true, shows a vertical scroll indicator. The default value is false. |
 | __`children`__ | _React component (ParallaxSwiperPage)_ | `N/A` | Each top-level ParallaxSwiperPage child. |
+| __`showProgressBar`__ | _Boolean_ | false | When true, a progress bar will render on bottom for horizontal and left on vertical. |
+| __`progressBarThickness`__ | _Number_ | 4 | Thickness translates to height for horizontal and width for vertical progress bar. |
+| __`progressBarBackgroundColor`__ | _String_ | `rgba(255,255,255,0.25)` | Background color of progress bar background. |
+| __`progressBarValueBackgroundColor`__ | _String_ | `white` | Background color of progress bar value background. |
 
 ## ParallaxSwiperPage Props
 | Prop | Type | Default | Description |

src/ParallaxSwiper.js

@@ -71,6 +71,10 @@ class ParallaxSwiper extends Component {
       vertical,
       animatedValue,
       scrollEnabled,
+      showProgressBar,
+      progressBarThickness,
+      progressBarBackgroundColor,
+      progressBarValueBackgroundColor,
     } = this.props;
 
     return (
@@ -137,6 +141,52 @@ class ParallaxSwiper extends Component {
             );
           })}
         </Animated.ScrollView>
+        {showProgressBar && (
+          <View
+            style={{
+              width: vertical ? progressBarThickness : this.state.width,
+              height: vertical ? this.state.height : progressBarThickness,
+              top: vertical ? -this.state.height : -progressBarThickness,
+              backgroundColor: progressBarBackgroundColor,
+            }}
+          >
+            <Animated.View
+              style={[
+                styles.progressBar,
+                {
+                  backgroundColor: progressBarValueBackgroundColor,
+                  transform: [
+                    {
+                      translateX: vertical
+                        ? 0
+                        : animatedValue.interpolate({
+                          inputRange: [
+                            0,
+                            (this.state.width + dividerWidth) *
+                                (children.length - 1),
+                          ],
+                          outputRange: [-this.state.width, 0],
+                          extrapolate: 'clamp',
+                        }),
+                    },
+                    {
+                      translateY: vertical
+                        ? animatedValue.interpolate({
+                          inputRange: [
+                            0,
+                            this.state.height * (children.length - 1),
+                          ],
+                          outputRange: [-this.state.height, 0],
+                          extrapolate: 'clamp',
+                        })
+                        : 0,
+                    },
+                  ],
+                },
+              ]}
+            />
+          </View>
+        )}
       </View>
     );
   }
@@ -146,6 +196,9 @@ const styles = StyleSheet.create({
   pageOuterContainer: {
     flexDirection: 'row',
   },
+  progressBar: {
+    ...StyleSheet.absoluteFillObject,
+  },
 });
 
 ParallaxSwiper.propTypes = {
@@ -174,6 +227,10 @@ ParallaxSwiper.propTypes = {
   animatedValue: PropTypes.instanceOf(Animated.Value),
   scrollEnabled: PropTypes.bool,
   scrollToIndex: PropTypes.number,
+  showProgressBar: PropTypes.bool,
+  progressBarThickness: PropTypes.number,
+  progressBarBackgroundColor: PropTypes.string,
+  progressBarValueBackgroundColor: PropTypes.string,
 };
 
 ParallaxSwiper.defaultProps = {
@@ -188,6 +245,10 @@ ParallaxSwiper.defaultProps = {
   onMomentumScrollEnd: () => null,
   scrollToIndex: 0,
   scrollEnabled: true,
+  showProgressBar: false,
+  progressBarThickness: 4,
+  progressBarBackgroundColor: 'rgba(255,255,255,0.25)',
+  progressBarValueBackgroundColor: 'white',
 };
 
 export default ParallaxSwiper;