#End scroll hide/show now working smoothly

#Release 1.0.4

Author: Malik Kawee

README.md

@@ -8,7 +8,13 @@ Vertical Scroll             |  Horizontal Scroll
 ## Installation
 This library relies on [react-native-linear-gradient](https://github.com/react-native-community/react-native-linear-gradient). Follow setup instructions of linear gradient.
 
-And now finally Run `npm install rn-faded-scrollview` in your project directory.
+And now finally run in your project directory.
+
+`npm install rn-faded-scrollview` 
+
+OR
+
+`yarn add rn-faded-scrollview` 
 
 ## Documentation
 This library accepts all the props of [ScrollView](https://reactnative.dev/docs/scrollview) and some additional props.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-faded-scrollview",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A simple and customizable React Native component that allows you to add fade effect in ScrollView at both ends.",
   "main": "src/index.js",
   "scripts": {
@@ -29,11 +29,10 @@
   "homepage": "https://github.com/mak12/rn-faded-scrollview#readme",
   "peerDependencies": {
     "react": "16.11.0",
-    "react-native": "0.62.2"
-  },
-  "dependencies": {
-    "react-native-linear-gradient": "^2.5.6"
+    "react-native": "0.62.2",
+    "react-native-linear-gradient": "^2.x.x"
   },
+  "dependencies": {},
   "devDependencies": {
     "metro-react-native-babel-preset": "^0.59.0"
   }

src/index.js

@@ -14,7 +14,8 @@ export default class RNFadedScrollView extends Component {
             scrollWidth: 0,
             availableWidth: 0,
             availableHeight: 0,
-            allowStartFade: false
+            allowStartFade: false,
+            allowEndFade: true
         }
     }
 
@@ -23,6 +24,7 @@ export default class RNFadedScrollView extends Component {
         // Save the content height in state
         this.setState({ scrollHeight: contentHeight, scrollWidth: contentWidth });
     };
+
     _onLayout(event) {
         const containerWidth = event.nativeEvent.layout.width;
         const containerHeight = event.nativeEvent.layout.width;
@@ -40,20 +42,26 @@ export default class RNFadedScrollView extends Component {
         return this.props.horizontal ? contentOffset.x < 10 : contentOffset.y < 10;
     }
     isCloseToBottom({ layoutMeasurement, contentOffset, contentSize }) {
-        return layoutMeasurement.height + contentOffset.y >= contentSize.height - 20;
+        return this.props.horizontal ? layoutMeasurement.width + contentOffset.x >= contentSize.width - 10 : layoutMeasurement.height + contentOffset.y >= contentSize.height - 10;
     }
 
     onScrolled = (e) => {
         if (this.props.allowStartFade) {
             if (this.ifCloseToStart(e.nativeEvent)) {
                 this.setState({ allowStartFade: false })
-
             }
             else {
                 this.setState({ allowStartFade: true })
             }
         }
-
+        if (this.props.allowEndFade) {
+            if (this.isCloseToBottom(e.nativeEvent)) {
+                this.setState({ allowEndFade: false })
+            }
+            else {
+                this.setState({ allowEndFade: true })
+            }
+        }
         if (this.props.onScroll) {
             this.props.onScroll();
         }
@@ -109,12 +117,10 @@ export default class RNFadedScrollView extends Component {
                     {this.props.children}
                 </ScrollView>
                 {(this.state.allowStartFade) && this.getStartFaade()}
-                {endFadeEnable && this.getEndFade()}
+                {(endFadeEnable && this.state.allowEndFade) && this.getEndFade()}
             </View>
         )
     }
-
-
 }
 
 const styles = StyleSheet.create({