useScrollToItem - add offsetType to statics (#1144)

* useScrollToItem - add offsetType to statics

* Fix dynamic focusing when there's inner/outer spacing

* Fix doc for focusIndex

Author: M-i-k-e-l

generatedTypes/hooks/useScrollToItem/index.d.ts

@@ -48,5 +48,8 @@ export declare type ScrollToItemResultProps<T extends ScrollToSupportedViews> =
      */
     focusIndex: (index: number, animated?: boolean) => void;
 };
-declare const useScrollToItem: <T extends ScrollToSupportedViews>(props: ScrollToItemProps<T>) => ScrollToItemResultProps<T>;
+declare const useScrollToItem: {
+    <T extends ScrollToSupportedViews>(props: ScrollToItemProps<T>): ScrollToItemResultProps<T>;
+    offsetType: typeof OffsetType;
+};
 export default useScrollToItem;

src/components/tabController/TabBar.tsx

@@ -14,7 +14,7 @@ import {Constants} from '../../helpers';
 import {LogService} from '../../services';
 import FadedScrollView from './FadedScrollView';
 
-import useScrollToItem, {OffsetType} from '../../hooks/useScrollToItem';
+import {useScrollToItem} from '../../hooks';
 
 const {Code, Value, interpolate, block, set} = Reanimated;
 
@@ -201,7 +201,7 @@ const TabBar = (props: Props) => {
   const {scrollViewRef: tabBar, onItemLayout, itemsWidths, focusIndex} = useScrollToItem({
     itemsCount: itemsCount.current,
     selectedIndex,
-    offsetType: centerSelected ? OffsetType.CENTER : OffsetType.DYNAMIC
+    offsetType: centerSelected ? useScrollToItem.offsetType.CENTER : useScrollToItem.offsetType.DYNAMIC
   });
 
   const indicatorOffsets = useMemo((): number[] => {

src/hooks/useScrollToItem/index.ts

@@ -57,7 +57,7 @@ export type ScrollToItemResultProps<T extends ScrollToSupportedViews> = Pick<Scr
    */
   itemsWidths: number[];
   /**
-   * Use in order to focus the item with the specified index
+   * Use in order to focus the item with the specified index (use when the selectedIndex is not changed)
    */
   focusIndex: (index: number, animated?: boolean) => void;
 };
@@ -95,22 +95,22 @@ const useScrollToItem = <T extends ScrollToSupportedViews>(props: ScrollToItemPr
     const centeredOffsets = [];
     let currentCenterOffset = outerSpacing;
     const leftOffsets = [];
-    leftOffsets.push(0);
+    leftOffsets.push(outerSpacing - innerSpacing);
     const rightOffsets = [];
-    rightOffsets.push(-Constants.screenWidth + itemsWidths[0]);
+    rightOffsets.push(-Constants.screenWidth + itemsWidths[0] + outerSpacing + innerSpacing);
     while (index < itemsCount) {
       centeredOffsets[index] = currentCenterOffset - screenCenter + itemsWidths[index] / 2;
       ++index;
       currentCenterOffset += itemsWidths[index - 1] + innerSpacing;
-      leftOffsets[index] = leftOffsets[index - 1] + itemsWidths[index - 1];
-      rightOffsets[index] = rightOffsets[index - 1] + itemsWidths[index];
+      leftOffsets[index] = leftOffsets[index - 1] + itemsWidths[index - 1] + innerSpacing;
+      rightOffsets[index] = rightOffsets[index - 1] + itemsWidths[index] + innerSpacing;
     }
 
     if (addOffsetMargin) {
-      index = 1;
+      index = 1; 
       while (index < itemsCount - 1) {
         leftOffsets[index] -= itemsWidths[index - 1];
-        rightOffsets[index] += itemsWidths[index + 1];
+        rightOffsets[index] += itemsWidths[index + 1] + innerSpacing;
         ++index;
       }
     }
@@ -155,4 +155,6 @@ const useScrollToItem = <T extends ScrollToSupportedViews>(props: ScrollToItemPr
   };
 };
 
+useScrollToItem.offsetType = OffsetType;
+
 export default useScrollToItem;