Update index.js

src/index.js

@@ -1,15 +1,18 @@
-import React, { Component } from "react";
-import { StyleSheet, View, Image, Animated } from "react-native";
+import React, { Component } from 'react';
+import { StyleSheet, View, Image, Animated } from 'react-native';
 
-import LinearGradient from "react-native-linear-gradient";
+import LinearGradient from 'react-native-linear-gradient';
 
 class ScrollIndicator extends Component {
   static defaultProps = {
     minScrollHeight: 0,
     style: {},
     scrollEnabled: true,
     showIndicator: true,
-    picto: false
+    picto: false,
+    renderPicto: false,
+    linearGradientColors: ['transparent', '#212121'],
+    styleGradientBackground: {}
   };
 
   constructor(props) {
@@ -35,22 +38,31 @@ class ScrollIndicator extends Component {
 
   render() {
     const { scrollViewHeight, contentHeight, bottom } = this.state;
-    const { children, scrollEnabled, showIndicator, style, picto } = this.props;
+    const {
+      children,
+      scrollEnabled,
+      showIndicator,
+      style,
+      picto,
+      renderPicto,
+      linearGradientColors,
+      styleGradientBackground
+    } = this.props;
     const maxValue = Math.max(contentHeight - scrollViewHeight, 0);
     const slideViewBottom = bottom.interpolate({
       inputRange: [0, maxValue],
       outputRange: [0, 100],
-      extrapolate: "clamp"
+      extrapolate: 'clamp'
     });
 
     const slideViewTop = bottom.interpolate({
       inputRange: [0, maxValue],
       outputRange: [60, 100],
-      extrapolate: "clamp"
+      extrapolate: 'clamp'
     });
 
     return (
-      <View style={{ flex: 1, overflow: "hidden" }}>
+      <View style={{ flex: 1, overflow: 'hidden' }}>
         {showIndicator && this.displayIndicator(false) ? (
           <Animated.View
             style={[
@@ -61,7 +73,7 @@ class ScrollIndicator extends Component {
             ]}
           >
             <LinearGradient
-              colors={["#212121", "transparent"]}
+              colors={['#212121', 'transparent']}
               style={[styles.gradientBackground]}
             />
           </Animated.View>
@@ -114,10 +126,13 @@ class ScrollIndicator extends Component {
             ]}
           >
             <LinearGradient
-              colors={["transparent", "#212121"]}
-              style={[styles.gradientBackground]}
+              colors={linearGradientColors}
+              style={[styles.gradientBackground, styleGradientBackground ]}
             >
-              {picto ? <Image source={picto} /> : <View />}
+              <View>
+                {renderPicto && renderPicto()}
+                {!renderPicto && picto ? <Image source={picto} /> : <View />}
+              </View>
             </LinearGradient>
           </Animated.View>
         ) : null}
@@ -130,25 +145,25 @@ export default ScrollIndicator;
 
 const styles = StyleSheet.create({
   swipeWrapperTop: {
-    backgroundColor: "transparent",
-    position: "absolute",
+    backgroundColor: 'transparent',
+    position: 'absolute',
     left: 0,
     right: 0,
     top: -160,
     zIndex: 999
   },
   swipeWrapperBottom: {
-    backgroundColor: "transparent",
-    position: "absolute",
+    backgroundColor: 'transparent',
+    position: 'absolute',
     left: 0,
     right: 0,
     bottom: 0,
     zIndex: 999
   },
   gradientBackground: {
-    justifyContent: "center",
-    alignItems: "center",
+    justifyContent: 'center',
+    alignItems: 'center',
     height: 100,
-    backgroundColor: "transparent"
+    backgroundColor: 'transparent'
   }
 });