Fix Fader in RTL

Author: M-i-k-e-l

demo/src/screens/componentScreens/FaderScreen.tsx

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
 import {
+  Constants,
   Colors,
   Text,
   View,
@@ -34,7 +35,7 @@ class FaderScreen extends Component<WithScrollReachedProps> {
     const {scrollReachedProps} = this.props;
     const visible =
       faderPosition === Fader.position.BOTTOM ||
-      faderPosition === Fader.position.RIGHT
+      (faderPosition === Fader.position.RIGHT && !Constants.isRTL)
         ? !scrollReachedProps.isScrollAtEnd
         : !scrollReachedProps.isScrollAtStart;
 
@@ -54,6 +55,7 @@ class FaderScreen extends Component<WithScrollReachedProps> {
               {_.times(numberOfItems, this.renderItem)}
             </ScrollView>
             <Fader
+              supportRTL
               visible={visible}
               position={faderPosition}
               tintColor={tintColor}

generatedTypes/components/fader/index.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
+import { ImageProps } from '../image';
 export declare enum FaderPosition {
     LEFT = "LEFT",
     RIGHT = "RIGHT",
     TOP = "TOP",
     BOTTOM = "BOTTOM"
 }
-export declare type FaderProps = {
+export declare type FaderProps = Pick<ImageProps, 'supportRTL'> & {
     /**
      * Whether the fader is visible (default is true)
      */

src/components/fader/index.tsx

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import React, {useCallback} from 'react';
 import {StyleSheet} from 'react-native';
 import View from '../view';
-import Image from '../image';
+import Image, {ImageProps} from '../image';
 
 export enum FaderPosition {
   LEFT = 'LEFT',
@@ -11,7 +11,7 @@ export enum FaderPosition {
   BOTTOM = 'BOTTOM'
 }
 
-export type FaderProps = {
+export type FaderProps = Pick<ImageProps, 'supportRTL'> & {
   /**
    * Whether the fader is visible (default is true)
    */
@@ -80,6 +80,7 @@ function Fader(props: FaderProps) {
     <View pointerEvents={'none'} style={styles.containerStyle}>
       {(props.visible || _.isUndefined(props.visible)) && (
         <Image
+          supportRTL={props.supportRTL}
           source={styles.imageSource}
           tintColor={props.tintColor}
           style={styles.imageStyle}

src/components/tabController/FadedScrollView.tsx

@@ -1,13 +1,15 @@
 import React, {useCallback} from 'react';
 import {ViewProps, ScrollView, ScrollViewProps, NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
-import Fader from '../../components/fader';
+import Fader from '../fader';
 import withScrollEnabler, {WithScrollEnablerProps} from '../../commons/withScrollEnabler';
 import withScrollReached, {WithScrollReachedProps} from '../../commons/withScrollReached';
 import forwardRef, {ForwardRefInjectedProps} from '../../commons/forwardRef';
+import {Constants} from '../../helpers';
 
-export type FadedScrollViewProps = ViewProps & ScrollViewProps & {
-  children?: React.ReactNode | React.ReactNode[];
-};
+export type FadedScrollViewProps = ViewProps &
+  ScrollViewProps & {
+    children?: React.ReactNode | React.ReactNode[];
+  };
 
 type ScrollReachedProps = FadedScrollViewProps & WithScrollReachedProps;
 type ScrollEnabledProps = ScrollReachedProps & WithScrollEnablerProps;
@@ -17,16 +19,20 @@ const FADER_SIZE = 76;
 
 const FadedScrollView = (props: Props) => {
   const {scrollEnablerProps, scrollReachedProps, children, onScroll: propsOnScroll, ...other} = props;
-  const fadeLeft = scrollEnablerProps.scrollEnabled && !scrollReachedProps.isScrollAtStart;
-  const fadeRight = scrollEnablerProps.scrollEnabled && !scrollReachedProps.isScrollAtEnd;
+  const showLeft =
+    scrollEnablerProps.scrollEnabled &&
+    (Constants.isRTL ? !scrollReachedProps.isScrollAtEnd : !scrollReachedProps.isScrollAtStart);
+  const leftPosition = Constants.isRTL ? Fader.position.RIGHT : Fader.position.LEFT;
+  const showRight =
+    scrollEnablerProps.scrollEnabled &&
+    (Constants.isRTL ? !scrollReachedProps.isScrollAtStart : !scrollReachedProps.isScrollAtEnd);
+  const rightPosition = Constants.isRTL ? Fader.position.LEFT : Fader.position.RIGHT;
 
-  const onScroll = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      scrollReachedProps.onScroll(event);
+  const onScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    scrollReachedProps.onScroll(event);
       propsOnScroll?.(event);
-    },
-    [scrollReachedProps.onScroll, propsOnScroll]
-  );
+  },
+  [scrollReachedProps.onScroll, propsOnScroll]);
 
   if (children) {
     return (
@@ -45,8 +51,8 @@ const FadedScrollView = (props: Props) => {
         >
           {children}
         </ScrollView>
-        <Fader visible={fadeLeft} position={Fader.position.LEFT} size={FADER_SIZE} />
-        <Fader visible={fadeRight} position={Fader.position.RIGHT} size={FADER_SIZE} />
+        <Fader visible={showLeft} position={leftPosition} size={FADER_SIZE} supportRTL/>
+        <Fader visible={showRight} position={rightPosition} size={FADER_SIZE} supportRTL/>
       </>
     );
   }