#End fade issue fixed on Samsung devices

#Release 1.0.8

Author: Malik Kawee

README.md

@@ -27,6 +27,8 @@ This library accepts all the props of [ScrollView](https://reactnative.dev/docs/
 | fadeColors          | Colors for fade effect        | ['rgba(229, 229, 229, 0.18)', 'rgba(206, 201, 201, 0.6)', 'rgba(206, 201, 201, 0.9)']     | Array  |
 | scrollThreshold          | Threshold to control fade hide/show when it reaches start or end        | 10     | Number  |
 | allowDivider          | Allow divider at fade end.      | false    | Boolean.  |
+| isRtl          | For RTL Layouts      | false    | Boolean.  |
+
 
 ### Events
 | Name                      | Callback param                              | Description     |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-faded-scrollview",
-  "version": "1.0.5",
+  "version": "1.0.8",
   "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": {

src/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { StyleSheet, ScrollView, View } from 'react-native';
+import { StyleSheet, ScrollView, View, Platform } from 'react-native';
 import PropTypes from "prop-types";
 import LinearGradient from "react-native-linear-gradient"
 const defaultFadeColors = ['rgba(229, 229, 229, 0.18)', 'rgba(206, 201, 201, 0.6)', 'rgba(206, 201, 201, 0.9)'];
@@ -27,7 +27,7 @@ export default class RNFadedScrollView extends Component {
 
     _onLayout(event) {
         const containerWidth = event.nativeEvent.layout.width;
-        const containerHeight = event.nativeEvent.layout.width;
+        const containerHeight = event.nativeEvent.layout.height;
 
         this.setState({ availableWidth: containerWidth, availableHeight: containerHeight })
     }
@@ -45,6 +45,10 @@ export default class RNFadedScrollView extends Component {
         return this.props.horizontal ? layoutMeasurement.width + contentOffset.x >= contentSize.width - this.props.scrollThreshold : layoutMeasurement.height + contentOffset.y >= contentSize.height - this.props.scrollThreshold;
     }
 
+    //To avoid ScrollView RTL issue on andorid.
+    allowReverse() {
+        return Platform.OS == 'android' && this.props.isRtl
+    }
     onScrolled = (e) => {
         if (this.props.isCloseToEnd) {
             this.props.isCloseToEnd(this.isCloseToBottom(e.nativeEvent));
@@ -53,19 +57,19 @@ export default class RNFadedScrollView extends Component {
             this.props.isCloseToStart(this.ifCloseToStart(e.nativeEvent));
         }
         if (this.props.allowStartFade) {
-            if (this.ifCloseToStart(e.nativeEvent)) {
-                this.setState({ allowStartFade: false })
+            if (!this.allowReverse()) {
+                this.setState({ allowStartFade: this.ifCloseToStart(e.nativeEvent) ? false : true })
             }
             else {
-                this.setState({ allowStartFade: true })
+                this.setState({ allowEndFade: this.ifCloseToStart(e.nativeEvent) ? false : true })
             }
         }
         if (this.props.allowEndFade) {
-            if (this.isCloseToBottom(e.nativeEvent)) {
-                this.setState({ allowEndFade: false })
+            if (!this.allowReverse()) {
+                this.setState({ allowEndFade: this.isCloseToBottom(e.nativeEvent) ? false : true })
             }
             else {
-                this.setState({ allowEndFade: true })
+                this.setState({ allowStartFade: this.isCloseToBottom(e.nativeEvent) ? false : true })
             }
         }
         if (this.props.onScroll) {
@@ -77,7 +81,7 @@ export default class RNFadedScrollView extends Component {
     getStartFaade() {
         return (this.props.horizontal ?
             <LinearGradient
-                start={{ x: 1, y: 0 }} end={{ x: 0, y: 0 }}
+                start={{ x: this.props.isRtl ? 0 : 1, y: 0 }} end={{ x: this.props.isRtl ? 1 : 0, y: 0 }}
                 style={{ position: 'absolute', start: 0, width: this.props.fadeSize, height: '100%' }}
                 colors={this.props.fadeColors}
                 pointerEvents={'none'}
@@ -94,7 +98,7 @@ export default class RNFadedScrollView extends Component {
     getEndFade() {
         return (this.props.horizontal ?
             <LinearGradient
-                start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
+                start={{ x: this.props.isRtl ? 1 : 0, y: 0 }} end={{ x: this.props.isRtl ? 0 : 1, y: 0 }}
                 style={{ position: 'absolute', end: 0, width: this.props.fadeSize, height: '100%' }}
                 colors={this.props.fadeColors}
                 pointerEvents={'none'}
@@ -155,13 +159,15 @@ RNFadedScrollView.propTypes = {
     isCloseToEnd: PropTypes.func,
     isCloseToStart: PropTypes.func,
     scrollThreshold: PropTypes.number,
-    allowDivider: PropTypes.bool
+    allowDivider: PropTypes.bool,
+    isRtl: PropTypes.bool
 }
 RNFadedScrollView.defaultProps = {
     allowStartFade: false,
     allowEndFade: true,
     fadeSize: 20,
     fadeColors: defaultFadeColors,
     scrollThreshold: 10,
-    allowDivider: false
+    allowDivider: false,
+    isRtl: false
 }