Feat/change tab controller center selected logic

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 {Colors, Text, View, Fader, withScrollReached, WithScrollReachedProps} from 'react-native-ui-lib';
+// @ts-ignore
 import {renderHeader} from '../ExampleScreenPresenter';
 
 const numberOfItems = 3;
@@ -10,6 +11,7 @@ const itemWidth = 100;
 const itemHeight = 100;
 const tintColor = undefined;
 
+// @ts-ignore
 const horizontal = faderPosition === Fader.position.START || faderPosition === Fader.position.END;
 
 class FaderScreen extends Component<WithScrollReachedProps> {

demo/src/screens/componentScreens/TabControllerScreen/index.tsx

@@ -35,18 +35,15 @@ class TabControllerScreen extends Component<{}, State> {
     this.state.items = this.generateTabItems();
   }
 
-  generateTabItems = (fewItems = this.state.fewItems, centerSelected = this.state.centerSelected): TabControllerItemProps[] => {
+  generateTabItems = (fewItems = this.state.fewItems): TabControllerItemProps[] => {
     let items: TabControllerItemProps[] = _.chain(TABS)
       .take(fewItems ? 3 : TABS.length)
       .map<TabControllerItemProps>(tab => ({label: tab, key: tab}))
       .value();
 
     const addItem: TabControllerItemProps = {icon: Assets.icons.demo.add, key: 'add', ignore: true, width: 60, onPress: this.onAddItem};
 
-    if (!centerSelected) {
-      items = [...items, addItem];
-    }
-    return items;
+    return [...items, addItem];
   };
 
   componentDidMount() {
@@ -83,7 +80,7 @@ class TabControllerScreen extends Component<{}, State> {
   toggleCenterSelected = () => {
     const {fewItems, centerSelected} = this.state;
     this.setState({
-      items: this.generateTabItems(fewItems, !centerSelected),
+      items: this.generateTabItems(fewItems),
       centerSelected: !centerSelected,
       key: Date.now()
     });

generatedTypes/commons/useScrollEnabler.d.ts

@@ -0,0 +1,23 @@
+import { LayoutChangeEvent } from 'react-native';
+export declare type Props = {
+    /**
+     * Whether the scroll is horizontal (default is false).
+     */
+    horizontal?: boolean;
+};
+export declare type ResultProps = {
+    /**
+     * onContentSizeChange callback (should be set to your onContentSizeChange).
+     */
+    onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
+    /**
+     * onLayout callback (should be set to your onLayout).
+     */
+    onLayout: (event: LayoutChangeEvent) => void;
+    /**
+     * Whether the scroll should be enabled (should be set to your scrollEnabled).
+     */
+    scrollEnabled: boolean;
+};
+declare const useScrollEnabler: (props?: Props) => ResultProps;
+export default useScrollEnabler;

generatedTypes/commons/useScrollReached.d.ts

@@ -0,0 +1,28 @@
+import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+export declare type Props = {
+    /**
+     * Whether the scroll is horizontal (default is false).
+     */
+    horizontal?: boolean;
+    /**
+     * Allows to be notified prior to actually reaching the start \ end of the scroll (by the threshold).
+     * Should be a positive value.
+     */
+    threshold?: number;
+};
+export declare type ResultProps = {
+    /**
+     * onScroll callback (should be set to your onScroll).
+     */
+    onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    /**
+     * Is the scroll at the start (or equal\smaller than the threshold if one was given)
+     */
+    isScrollAtStart?: boolean;
+    /**
+     * Is the scroll at the end (or equal\greater than the threshold if one was given)
+     */
+    isScrollAtEnd?: boolean;
+};
+declare const useScrollReached: (props?: Props) => ResultProps;
+export default useScrollReached;

generatedTypes/components/fader/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ImageProps } from '../image';
 export declare enum FaderPosition {
     /**
      * @deprecated please use START instead
@@ -13,7 +14,7 @@ export declare enum FaderPosition {
     TOP = "TOP",
     BOTTOM = "BOTTOM"
 }
-export declare type FaderProps = {
+export declare type FaderProps = Pick<ImageProps, 'supportRTL'> & {
     /**
      * Whether the fader is visible (default is true)
      */

generatedTypes/components/tabController/FadedScrollView.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { ViewProps, ScrollViewProps } from 'react-native';
+import { ForwardRefInjectedProps } from '../../commons/forwardRef';
 export declare type FadedScrollViewProps = ViewProps & ScrollViewProps & {
     children?: React.ReactNode | React.ReactNode[];
 };
-declare const _default: React.ComponentClass<FadedScrollViewProps, any> | React.FunctionComponent<FadedScrollViewProps>;
+declare type Props = FadedScrollViewProps & ForwardRefInjectedProps;
+declare const _default: React.ComponentType<Props>;
 export default _default;

generatedTypes/components/tabController/TabBarItem.d.ts

@@ -1,5 +1,5 @@
 import { PureComponent } from 'react';
-import { TextStyle, LayoutRectangle, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
+import { /* processColor, */ TextStyle, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
 import _ from 'lodash';
 import Reanimated from 'react-native-reanimated';
 import { State } from 'react-native-gesture-handler';
@@ -86,7 +86,7 @@ interface Props extends TabControllerItemProps {
     targetPage: any;
     state: State;
     currentPage: Reanimated.Adaptable<number>;
-    onLayout: (layout: Partial<LayoutRectangle>, index: number) => void;
+    onLayout?: (event: LayoutChangeEvent, index: number) => void;
 }
 /**
  * @description: TabController's TabBarItem
@@ -102,8 +102,7 @@ export default class TabBarItem extends PureComponent<Props> {
     private itemWidth?;
     private itemRef;
     constructor(props: Props);
-    onStateChange: (...args: any[]) => void;
-    onLayout: ({ nativeEvent: { layout: { width } } }: LayoutChangeEvent) => void;
+    onLayout: (event: LayoutChangeEvent) => void;
     onPress: () => void;
     getItemStyle(): any[];
     getLabelStyle(): (TextStyle | _.Dictionary<Reanimated.Node<number> | Reanimated.Node<string | number | boolean> | Reanimated.Node<"normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"> | undefined> | undefined)[];

generatedTypes/helpers/useFocusItemHelper.d.ts

@@ -0,0 +1,56 @@
+import { RefObject } from 'react';
+import { LayoutChangeEvent, ScrollView, FlatList } from 'react-native';
+export declare enum OffsetType {
+    CENTER = "CENTER",
+    DYNAMIC = "DYNAMIC",
+    LEFT = "LEFT",
+    RIGHT = "RIGHT"
+}
+export declare type Props = {
+    /**
+     * A reference to the ScrollView (or FlatList) which the items are in
+     */
+    scrollViewRef: RefObject<ScrollView | FlatList>;
+    /**
+     * The number of items
+     */
+    itemsCount: number;
+    /**
+     * The selected item's index
+     */
+    selectedIndex?: number;
+    /**
+     * Where would the item be located (default to CENTER)
+     */
+    offsetType?: OffsetType;
+    /**
+     * Add a margin to the offset (default to true)
+     * This gives a better UX
+     * Not relevant to OffsetType.CENTER
+     */
+    addOffsetMargin?: boolean;
+    /**
+     * How much space (padding \ margin) is there on he left\right of the items
+     */
+    sideSpacing?: number;
+    /**
+     * How much space (padding \ margin) is there between each item
+     */
+    innerSpacing?: number;
+};
+export declare type ResultProps = {
+    /**
+     * This should be called by each ot the items' onLayout
+     */
+    onItemLayout: (event: LayoutChangeEvent, index: number) => void;
+    /**
+     * The items' width
+     */
+    itemsWidths: number[];
+    /**
+     * Use in order to focus the item with the specified index
+     */
+    focusIndex: (index: number, animated?: boolean) => void;
+};
+declare const useFocusItemsHelper: (props: Props) => ResultProps;
+export default useFocusItemsHelper;

src/commons/index.js

@@ -25,9 +25,15 @@ module.exports = {
   get withScrollEnabler() {
     return require('./withScrollEnabler').default;
   },
+  get useScrollEnabler() {
+    return require('./useScrollEnabler').default;
+  },
   get withScrollReached() {
     return require('./withScrollReached').default;
   },
+  get useScrollReached() {
+    return require('./useScrollReached').default;
+  },
   get modifiers() {
     return require('./modifiers');
   }

src/commons/useScrollEnabler.ts

@@ -0,0 +1,73 @@
+import {useState, useCallback, useRef} from 'react';
+import {LayoutChangeEvent} from 'react-native';
+
+export type Props = {
+  /**
+   * Whether the scroll is horizontal (default is false).
+   */
+  horizontal?: boolean;
+};
+
+export type ResultProps = {
+  /**
+   * onContentSizeChange callback (should be set to your onContentSizeChange).
+   */
+  onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
+  /**
+   * onLayout callback (should be set to your onLayout).
+   */
+  onLayout: (event: LayoutChangeEvent) => void;
+  /**
+   * Whether the scroll should be enabled (should be set to your scrollEnabled).
+   */
+  scrollEnabled: boolean;
+};
+
+const useScrollEnabler = (props: Props = {}): ResultProps => {
+  const {horizontal = false} = props;
+  const [scrollEnabled, setScrollEnabled] = useState(true);
+  const contentSize = useRef<number>(0);
+  const layoutSize = useRef<number>(0);
+
+  const checkScroll = useCallback(() => {
+    const isScrollEnabled = contentSize.current > layoutSize.current;
+    if (isScrollEnabled !== scrollEnabled) {
+      setScrollEnabled(isScrollEnabled);
+    }
+  }, [scrollEnabled]);
+
+  const onContentSizeChange = useCallback((contentWidth: number, contentHeight: number) => {
+    const size = horizontal ? contentWidth : contentHeight;
+    if (size !== contentSize.current) {
+      contentSize.current = size;
+      if (layoutSize.current > 0) {
+        checkScroll();
+      }
+    }
+  },
+  [horizontal, checkScroll]);
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const {
+      nativeEvent: {
+        layout: {width, height}
+      }
+    } = event;
+    const size = horizontal ? width : height;
+    if (size !== layoutSize.current) {
+      layoutSize.current = size;
+      if (contentSize.current > 0) {
+        checkScroll();
+      }
+    }
+  },
+  [horizontal, checkScroll]);
+
+  return {
+    onContentSizeChange,
+    onLayout,
+    scrollEnabled
+  };
+};
+
+export default useScrollEnabler;

src/commons/useScrollReached.ts

@@ -0,0 +1,66 @@
+import {useState, useCallback} from 'react';
+import {NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
+import {Constants} from '../helpers';
+
+export type Props = {
+  /**
+   * Whether the scroll is horizontal (default is false).
+   */
+  horizontal?: boolean;
+  /**
+   * Allows to be notified prior to actually reaching the start \ end of the scroll (by the threshold).
+   * Should be a positive value.
+   */
+  threshold?: number;
+};
+
+export type ResultProps = {
+  /**
+   * onScroll callback (should be set to your onScroll).
+   */
+  onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  /**
+   * Is the scroll at the start (or equal\smaller than the threshold if one was given)
+   */
+  isScrollAtStart?: boolean;
+  /**
+   * Is the scroll at the end (or equal\greater than the threshold if one was given)
+   */
+  isScrollAtEnd?: boolean;
+};
+
+const DEFAULT_THRESHOLD = Constants.isAndroid ? 1 : 0;
+
+const useScrollReached = (props: Props = {}): ResultProps => {
+  const {horizontal = false, threshold = DEFAULT_THRESHOLD} = props;
+  const [isScrollAtStart, setScrollAtStart] = useState(true);
+  const [isScrollAtEnd, setScrollAtEnd] = useState(false);
+
+  const onScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const {
+      nativeEvent: {
+        layoutMeasurement: {width: layoutWidth, height: layoutHeight},
+        contentOffset: {x: offsetX, y: offsetY},
+        contentSize: {width: contentWidth, height: contentHeight}
+      }
+    } = event;
+
+    const layoutSize = horizontal ? layoutWidth : layoutHeight;
+    const offset = horizontal ? offsetX : offsetY;
+    const contentSize = horizontal ? contentWidth : contentHeight;
+    const closeToStart = offset <= threshold;
+    if (closeToStart !== isScrollAtStart) {
+      setScrollAtStart(closeToStart);
+    }
+
+    const closeToEnd = layoutSize + offset >= contentSize - threshold;
+    if (closeToEnd !== isScrollAtEnd) {
+      setScrollAtEnd(closeToEnd);
+    }
+  },
+  [horizontal, threshold, isScrollAtStart, isScrollAtEnd]);
+
+  return {onScroll, isScrollAtStart, isScrollAtEnd};
+};
+
+export default useScrollReached;