Fix/tab controller center android with rtl (#1178)

M-i-k-e-l · M-i-k-e-l · commit f21a7193aaa6 · 2021-02-04T19:33:26.000+02:00
(cherry picked from commit 5a84e93)
diff --git a/src/commons/withScrollReached.tsx b/src/commons/withScrollReached.tsx
@@ -63,8 +63,13 @@ function withScrollReached<PROPS, STATICS = {}>(WrappedComponent: React.Componen
       const horizontal = options.horizontal;
       const threshold = options.threshold || DEFAULT_THRESHOLD;
       const layoutSize = horizontal ? layoutWidth : layoutHeight;
-      const offset = horizontal ? offsetX : offsetY;
+      let offset = horizontal ? offsetX : offsetY;
       const contentSize = horizontal ? contentWidth : contentHeight;
+      if (horizontal && Constants.isRTL && Constants.isAndroid) {
+        const scrollingWidth = Math.max(0, contentSize - layoutSize);
+        offset = scrollingWidth - offset;
+      }
+
       const closeToStart = offset <= threshold;
       if (closeToStart !== isScrollAtStart) {
         setScrollAtStart(closeToStart);
diff --git a/src/components/scrollBar/index.tsx b/src/components/scrollBar/index.tsx
@@ -171,6 +171,7 @@ class ScrollBar extends Component<Props, State> {
   onLayout = (event: LayoutChangeEvent) => {
     this.containerWidth = event.nativeEvent.layout.width;
 
+    _.invoke(this.props, 'onLayout', event);
     // 1 - for race condition, in case onContentSizeChange() is called before
     // 0 - for containerWidth change, when onContentSizeChange() is called first
     this.setState({gradientOpacity: new Animated.Value(this.scrollContentWidth > this.containerWidth ? 1 : 0)});
diff --git a/src/components/tabController/FadedScrollView.tsx b/src/components/tabController/FadedScrollView.tsx
@@ -1,5 +1,5 @@
 import React, {useCallback} from 'react';
-import {ViewProps, ScrollView, ScrollViewProps, NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
+import {ViewProps, ScrollView, ScrollViewProps, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent} from 'react-native';
 import Fader from '../fader';
 import useScrollEnabler from '../../hooks/useScrollEnabler';
 import useScrollReached from '../../hooks/useScrollReached';
@@ -15,7 +15,13 @@ type Props = FadedScrollViewProps & ForwardRefInjectedProps;
 const FADER_SIZE = 76;
 
 const FadedScrollView = (props: Props) => {
-  const {children, onScroll: propsOnScroll, ...other} = props;
+  const {
+    children,
+    onScroll: propsOnScroll,
+    onContentSizeChange: propsOnContentSizeChange,
+    onLayout: propsOnLayout,
+    ...other
+  } = props;
   const {onContentSizeChange, onLayout, scrollEnabled} = useScrollEnabler({horizontal: true});
   const {onScroll: onScrollReached, isScrollAtStart, isScrollAtEnd} = useScrollReached({
     horizontal: true,
@@ -31,6 +37,16 @@ const FadedScrollView = (props: Props) => {
   },
   [onScrollReached, propsOnScroll]);
 
+  const _onContentSizeChange = useCallback((w: number, h: number) => {
+    propsOnContentSizeChange?.(w, h);
+    onContentSizeChange?.(w, h);
+  }, [propsOnContentSizeChange, onContentSizeChange]);
+
+  const _onLayout = useCallback((event: LayoutChangeEvent) => {
+    propsOnLayout?.(event);
+    onLayout?.(event);
+  }, [propsOnLayout, onLayout]);
+
   if (children) {
     return (
       <>
@@ -41,8 +57,8 @@ const FadedScrollView = (props: Props) => {
           decelerationRate={'fast'}
           {...other}
           scrollEnabled={scrollEnabled}
-          onContentSizeChange={onContentSizeChange}
-          onLayout={onLayout}
+          onContentSizeChange={_onContentSizeChange}
+          onLayout={_onLayout}
           onScroll={onScroll}
           ref={props.forwardedRef}
         >
diff --git a/src/components/tabController/TabBar.tsx b/src/components/tabController/TabBar.tsx
@@ -198,7 +198,7 @@ const TabBar = (props: Props) => {
 
   const itemsCount = useRef<number>(items ? _.size(items) : React.Children.count(children.current));
 
-  const {scrollViewRef: tabBar, onItemLayout, itemsWidths, focusIndex} = useScrollToItem({
+  const {scrollViewRef: tabBar, onItemLayout, itemsWidths, focusIndex, onContentSizeChange, onLayout} = useScrollToItem({
     itemsCount: itemsCount.current,
     selectedIndex,
     offsetType: centerSelected ? useScrollToItem.offsetType.CENTER : useScrollToItem.offsetType.DYNAMIC
@@ -352,6 +352,8 @@ const TabBar = (props: Props) => {
         contentContainerStyle={scrollViewContainerStyle}
         scrollEnabled // TODO:
         testID={testID}
+        onContentSizeChange={onContentSizeChange}
+        onLayout={onLayout}
       >
         <View style={indicatorContainerStyle}>{renderTabBarItems}</View>
         {selectedIndicator}
diff --git a/src/hooks/useScrollReached/index.ts b/src/hooks/useScrollReached/index.ts
@@ -46,8 +46,13 @@ const useScrollReached = (props: ScrollEnablerProps = {}): ScrollEnablerResultPr
     } = event;
 
     const layoutSize = horizontal ? layoutWidth : layoutHeight;
-    const offset = horizontal ? offsetX : offsetY;
+    let offset = horizontal ? offsetX : offsetY;
     const contentSize = horizontal ? contentWidth : contentHeight;
+    if (horizontal && Constants.isRTL && Constants.isAndroid) {
+      const scrollingWidth = Math.max(0, contentSize - layoutSize);
+      offset = scrollingWidth - offset;
+    }
+
     const closeToStart = offset <= threshold;
     if (closeToStart !== isScrollAtStart) {
       setScrollAtStart(closeToStart);
diff --git a/src/hooks/useScrollTo/index.ts b/src/hooks/useScrollTo/index.ts
@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import {RefObject, useCallback, useRef} from 'react';
-import {ScrollView, FlatList} from 'react-native';
+import {ScrollView, FlatList, LayoutChangeEvent} from 'react-native';
+import {Constants} from '../../helpers';
 
 export type ScrollToSupportedViews = ScrollView | FlatList;
 
@@ -22,25 +23,63 @@ export type ScrollToResultProps<T extends ScrollToSupportedViews> = {
   scrollViewRef: RefObject<T>;
   /**
    * scrollTo callback.
-   * scrollToOffset - the x or y to scroll to.
+   * offset - the x or y to scroll to.
    * animated - should the scroll be animated (default is true)
    */
-  scrollTo: (scrollToOffset: number, animated?: boolean) => void;
+  scrollTo: (offset: number, animated?: boolean) => void;
+  /**
+   * onContentSizeChange callback (should be set to your onContentSizeChange).
+   * Needed for RTL support on Android.
+   */
+  onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
+  /**
+   * onLayout callback (should be set to your onLayout).
+   * Needed for RTL support on Android.
+   */
+  onLayout: (event: LayoutChangeEvent) => void;
 };
 
 const useScrollTo = <T extends ScrollToSupportedViews>(props: ScrollToProps<T>): ScrollToResultProps<T> => {
   const {scrollViewRef: propsScrollViewRef, horizontal = true} = props;
   const newScrollViewRef = useRef<T>(null);
   const scrollViewRef = propsScrollViewRef || newScrollViewRef;
+  const contentSize = useRef<number | undefined>(undefined);
+  const containerSize = useRef<number | undefined>(undefined);
+
+  const onContentSizeChange = useCallback((contentWidth: number, contentHeight: number) => {
+    contentSize.current = horizontal ? contentWidth : contentHeight;
+  },
+  [horizontal]);
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const {
+      nativeEvent: {
+        layout: {width, height}
+      }
+    } = event;
+    containerSize.current = horizontal ? width : height;
+  },
+  [horizontal]);
+
+  const scrollTo = useCallback((offset: number, animated = true) => {
+    if (
+      horizontal &&
+        Constants.isRTL &&
+        Constants.isAndroid &&
+        !_.isUndefined(contentSize.current) &&
+        !_.isUndefined(containerSize.current)
+    ) {
+      const scrollingWidth = Math.max(0, contentSize.current - containerSize.current);
+      offset = scrollingWidth - offset;
+    }
 
-  const scrollTo = useCallback((scrollTo: number, animated = true) => {
     // @ts-ignore
     if (_.isFunction(scrollViewRef.current.scrollToOffset)) {
       // @ts-ignore
-      scrollViewRef.current.scrollToOffset({offset: scrollTo, animated});
+      scrollViewRef.current.scrollToOffset({offset, animated});
       // @ts-ignore
     } else if (_.isFunction(scrollViewRef.current.scrollTo)) {
-      const scrollToXY = horizontal ? {x: scrollTo} : {y: scrollTo};
+      const scrollToXY = horizontal ? {x: offset} : {y: offset};
       // @ts-ignore
       scrollViewRef.current.scrollTo({...scrollToXY, animated});
     }
@@ -49,7 +88,9 @@ const useScrollTo = <T extends ScrollToSupportedViews>(props: ScrollToProps<T>):
 
   return {
     scrollViewRef,
-    scrollTo
+    scrollTo,
+    onContentSizeChange,
+    onLayout
   };
 };
 
diff --git a/src/hooks/useScrollToItem/index.ts b/src/hooks/useScrollToItem/index.ts
@@ -60,6 +60,16 @@ export type ScrollToItemResultProps<T extends ScrollToSupportedViews> = Pick<Scr
    * Use in order to focus the item with the specified index (use when the selectedIndex is not changed)
    */
   focusIndex: (index: number, animated?: boolean) => void;
+  /**
+   * onContentSizeChange callback (should be set to your onContentSizeChange).
+   * Needed for RTL support on Android.
+   */
+  onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
+  /**
+   * onLayout callback (should be set to your onLayout).
+   * Needed for RTL support on Android.
+   */
+  onLayout: (event: LayoutChangeEvent) => void;
 };
 
 const useScrollToItem = <T extends ScrollToSupportedViews>(props: ScrollToItemProps<T>): ScrollToItemResultProps<T> => {
@@ -75,7 +85,7 @@ const useScrollToItem = <T extends ScrollToSupportedViews>(props: ScrollToItemPr
   const itemsWidths = useRef<(number | null)[]>(_.times(itemsCount, () => null));
   const currentIndex = useRef<number>(selectedIndex || 0);
   const [offsets, setOffsets] = useState<Offsets>({CENTER: [], LEFT: [], RIGHT: []});
-  const {scrollViewRef, scrollTo} = useScrollTo<T>({scrollViewRef: propsScrollViewRef});
+  const {scrollViewRef, scrollTo, onContentSizeChange, onLayout} = useScrollTo<T>({scrollViewRef: propsScrollViewRef});
 
   // TODO: reset?
   //   useEffect(() => {
@@ -151,7 +161,9 @@ const useScrollToItem = <T extends ScrollToSupportedViews>(props: ScrollToItemPr
     scrollViewRef,
     onItemLayout,
     itemsWidths: offsets.CENTER.length > 0 ? (itemsWidths.current as number[]) : [],
-    focusIndex
+    focusIndex,
+    onContentSizeChange,
+    onLayout
   };
 };
 
