Change the DYNAMIC logic (did not look good when scrolling pages)

Author: M-i-k-e-l

generatedTypes/helpers/FocusItemHelper.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { LayoutChangeEvent, ScrollView, FlatList, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+import { LayoutChangeEvent, ScrollView, FlatList } from 'react-native';
 export declare enum OffsetType {
     CENTER = "CENTER",
     DYNAMIC = "DYNAMIC",
@@ -43,11 +43,6 @@ export declare type ResultProps = {
      * This should be called by each ot the items' onLayout
      */
     onItemLayout: (event: LayoutChangeEvent, index: number) => void;
-    /**
-     * This should be called by the ScrollView (or FlatList)
-     * If this is not used OffsetType.DYNAMIC will not work properly
-     */
-    onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
     /**
      * The items' width
      */

src/components/tabController/TabBar.tsx

@@ -200,7 +200,7 @@ const TabBar = (props: Props) => {
 
   const itemsCount = useRef<number>(items ? _.size(items) : React.Children.count(children.current));
 
-  const {onItemLayout, onScroll, itemsWidths, focusIndex} = focusItemsHelper({
+  const {onItemLayout, itemsWidths, focusIndex} = focusItemsHelper({
     scrollViewRef: tabBar,
     itemsCount: itemsCount.current,
     selectedIndex,
@@ -354,7 +354,6 @@ const TabBar = (props: Props) => {
         horizontal
         contentContainerStyle={scrollViewContainerStyle}
         scrollEnabled // TODO:
-        onScroll={onScroll}
         testID={testID}
       >
         <View style={indicatorContainerStyle}>{renderTabBarItems}</View>

src/helpers/FocusItemHelper.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import {RefObject, useState, useCallback, useEffect, useRef} from 'react';
-import {LayoutChangeEvent, ScrollView, FlatList, NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
+import {LayoutChangeEvent, ScrollView, FlatList} from 'react-native';
 import {Constants} from '.';
 
 export enum OffsetType {
@@ -55,11 +55,6 @@ export type ResultProps = {
    * This should be called by each ot the items' onLayout
    */
   onItemLayout: (event: LayoutChangeEvent, index: number) => void;
-  /**
-   * This should be called by the ScrollView (or FlatList)
-   * If this is not used OffsetType.DYNAMIC will not work properly
-   */
-  onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   /**
    * The items' width
    */
@@ -81,7 +76,7 @@ const focusItemsHelper = (props: Props): ResultProps => {
     innerSpacing = 0
   } = props;
   const itemsWidths = useRef<(number | null)[]>(_.times(itemsCount, () => null));
-  const contentOffset = useRef<number>(0);
+  const currentIndex = useRef<number>(selectedIndex || 0);
   const [offsets, setOffsets] = useState<Offsets>({CENTER: [], LEFT: [], RIGHT: []});
 
   // TODO: reset?
@@ -135,10 +130,6 @@ const focusItemsHelper = (props: Props): ResultProps => {
   },
   [setSnapBreakpoints]);
 
-  const onScroll = useCallback(({nativeEvent}: NativeSyntheticEvent<NativeScrollEvent>) => {
-    contentOffset.current = nativeEvent.contentOffset.x;
-  }, []);
-
   const scroll = (scrollTo: number, animated: boolean) => {
     // @ts-ignore
     if (_.isFunction(scrollViewRef.current.scrollToOffset)) {
@@ -156,8 +147,9 @@ const focusItemsHelper = (props: Props): ResultProps => {
       if (offsetType !== OffsetType.DYNAMIC) {
         scroll(offsets[offsetType][index], animated);
       } else {
-        const indexIsOnLeftOfCenter = contentOffset.current < offsets[OffsetType.CENTER][index];
-        scroll(indexIsOnLeftOfCenter ? offsets[OffsetType.LEFT][index] : offsets[OffsetType.RIGHT][index], animated);
+        const movingLeft = index < currentIndex.current;
+        currentIndex.current = index;
+        scroll(movingLeft ? offsets[OffsetType.RIGHT][index] : offsets[OffsetType.LEFT][index], animated);
       }
     }
   },
@@ -171,7 +163,6 @@ const focusItemsHelper = (props: Props): ResultProps => {
 
   return {
     onItemLayout,
-    onScroll,
     itemsWidths: offsets.CENTER.length > 0 ? (itemsWidths.current as number[]) : [],
     focusIndex
   };