Refactor TabController to use Reanimated v2 API

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

@@ -20,7 +20,6 @@ interface State {
 }
 
 class TabControllerScreen extends Component<{}, State> {
-
   constructor(props: {}) {
     super(props);
     this.state = {
@@ -36,12 +35,23 @@ class TabControllerScreen extends Component<{}, State> {
   }
 
   generateTabItems = (fewItems = this.state.fewItems): TabControllerItemProps[] => {
-    let items: TabControllerItemProps[] = _.chain(TABS)
+    const items: TabControllerItemProps[] = _.chain(TABS)
       .take(fewItems ? 3 : TABS.length)
-      .map<TabControllerItemProps>(tab => ({label: tab, key: tab}))
+      .map<TabControllerItemProps>((tab, index) => ({
+        label: tab,
+        key: tab,
+        icon: index === 2 ? Assets.icons.demo.dashboard : undefined,
+        badge: index === 5 ? {label: '2'} : undefined
+      }))
       .value();
 
-    const addItem: TabControllerItemProps = {icon: Assets.icons.demo.add, key: 'add', ignore: true, width: 60, onPress: this.onAddItem};
+    const addItem: TabControllerItemProps = {
+      icon: Assets.icons.demo.add,
+      key: 'add',
+      ignore: true,
+      width: 60,
+      onPress: this.onAddItem
+    };
 
     return fewItems ? items : [...items, addItem];
   };
@@ -93,7 +103,7 @@ class TabControllerScreen extends Component<{}, State> {
   renderLoadingPage() {
     return (
       <View flex center>
-        <ActivityIndicator size="large" />
+        <ActivityIndicator size="large"/>
         <Text text60L marginT-10>
           Loading
         </Text>
@@ -108,13 +118,13 @@ class TabControllerScreen extends Component<{}, State> {
     return (
       <Container {...containerProps}>
         <TabController.TabPage index={0}>
-          <Tab1 />
+          <Tab1/>
         </TabController.TabPage>
         <TabController.TabPage index={1}>
-          <Tab2 />
+          <Tab2/>
         </TabController.TabPage>
         <TabController.TabPage index={2} lazy lazyLoadTime={1500} renderLoading={this.renderLoadingPage}>
-          <Tab3 />
+          <Tab3/>
         </TabController.TabPage>
 
         {_.map(_.takeRight(TABS, TABS.length - 3), (title, index) => {

generatedTypes/components/tabController2/FadedScrollView.d.ts

@@ -0,0 +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 type Props = FadedScrollViewProps & ForwardRefInjectedProps;
+declare const _default: React.ComponentType<Props>;
+export default _default;

generatedTypes/components/tabController2/PageCarousel.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ * @description: TabController's Page Carousel
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
+ * @notes: You must pass `asCarousel` flag to TabController and render your TabPages inside a PageCarousel
+ */
+declare function PageCarousel({ ...props }: {
+    [x: string]: any;
+}): JSX.Element;
+export default PageCarousel;

generatedTypes/components/tabController2/TabBar.d.ts

@@ -0,0 +1,82 @@
+import React from 'react';
+import { TextProps, StyleProp, ViewStyle } from 'react-native';
+import { TabControllerItemProps } from './TabBarItem';
+export interface TabControllerBarProps {
+    /**
+     * The list of tab bar items
+     */
+    items?: TabControllerItemProps[];
+    /**
+     * Tab Bar height
+     */
+    height?: number;
+    /**
+     * Show Tab Bar bottom shadow
+     */
+    enableShadow?: boolean;
+    /**
+     * custom shadow style
+     */
+    shadowStyle?: StyleProp<ViewStyle>;
+    /**
+     * custom style for the selected indicator
+     */
+    indicatorStyle?: StyleProp<ViewStyle>;
+    /**
+     * custom label style
+     */
+    labelStyle?: TextProps;
+    /**
+     * custom selected label style
+     */
+    selectedLabelStyle?: TextProps;
+    /**
+     * the default label color
+     */
+    labelColor?: string;
+    /**
+     * the selected label color
+     */
+    selectedLabelColor?: string;
+    /**
+     * whether to change the text to uppercase
+     */
+    uppercase?: boolean;
+    /**
+     * icon tint color
+     */
+    iconColor?: string;
+    /**
+     * icon selected tint color
+     */
+    selectedIconColor?: string;
+    /**
+     * TODO: rename to feedbackColor
+     * Apply background color on press for TouchableOpacity
+     */
+    activeBackgroundColor?: string;
+    /**
+     * The TabBar background Color
+     */
+    backgroundColor?: string;
+    /**
+     * The TabBar container width
+     */
+    containerWidth?: number;
+    /**
+     * Pass to center selected item
+     */
+    centerSelected?: boolean;
+    /**
+     * Additional styles for the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Used as a testing identifier
+     */
+    testID?: string;
+}
+declare const _default: React.ComponentClass<TabControllerBarProps & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;

generatedTypes/components/tabController2/TabBarContext.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import Reanimated from 'react-native-reanimated';
+import { State } from 'react-native-gesture-handler';
+interface TabControllerContext {
+    selectedIndex?: number;
+    items?: any[];
+    itemStates: Reanimated.SharedValue<State[]>;
+    asCarousel?: boolean;
+    containerWidth: Reanimated.SharedValue<number>;
+    pageWidth?: number;
+    /** static page index */
+    currentPage: Reanimated.SharedValue<number>;
+    /** transition page index (can be a fraction when transitioning between pages) */
+    targetPage: Reanimated.SharedValue<number>;
+    carouselOffset: Reanimated.SharedValue<number>;
+}
+declare const TabBarContext: React.Context<TabControllerContext>;
+export default TabBarContext;

generatedTypes/components/tabController2/TabBarItem.d.ts

@@ -0,0 +1,88 @@
+/// <reference types="react" />
+import { TextStyle, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
+import Reanimated from 'react-native-reanimated';
+import { BadgeProps } from '../badge';
+export interface TabControllerItemProps {
+    /**
+     * label of the tab
+     */
+    label?: string;
+    /**
+     * custom label style
+     */
+    labelStyle?: TextStyle;
+    /**
+     * custom selected label style
+     */
+    selectedLabelStyle?: TextStyle;
+    /**
+     * the default label color
+     */
+    labelColor?: string;
+    /**
+     * the selected label color
+     */
+    selectedLabelColor?: string;
+    /**
+     * icon of the tab
+     */
+    icon?: number;
+    /**
+     * icon tint color
+     */
+    iconColor?: string;
+    /**
+     * icon selected tint color
+     */
+    selectedIconColor?: string;
+    /**
+     * Badge component props to display next the item label
+     */
+    badge?: BadgeProps;
+    /**
+     * A fixed width for the item
+     */
+    width?: number;
+    /**
+     * ignore of the tab
+     */
+    ignore?: boolean;
+    /**
+     * callback for when pressing a tab
+     */
+    onPress?: (index: number) => void;
+    /**
+     * whether to change the text to uppercase
+     */
+    uppercase?: boolean;
+    /**
+     * The active opacity when pressing a tab
+     */
+    activeOpacity?: number;
+    /**
+     * TODO: rename to feedbackColor
+     * Apply background color on press for TouchableOpacity
+     */
+    activeBackgroundColor?: string;
+    /**
+     * Pass custom style
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Used as a testing identifier
+     */
+    testID?: string;
+}
+interface Props extends TabControllerItemProps {
+    index: number;
+    targetPage: any;
+    currentPage: Reanimated.Adaptable<number>;
+    onLayout?: (event: LayoutChangeEvent, index: number) => void;
+}
+/**
+ * @description: TabController's TabBarItem
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
+ * @notes: Must be rendered as a direct child of TabController.TabBar.
+ */
+export default function TabBarItem({ index, label, labelColor, selectedLabelColor, labelStyle, selectedLabelStyle, icon, badge, uppercase, activeOpacity, activeBackgroundColor, testID, ignore, ...props }: Props): JSX.Element;
+export {};

generatedTypes/components/tabController2/TabPage.d.ts

@@ -0,0 +1,28 @@
+import { PropsWithChildren } from 'react';
+export interface TabControllerPageProps {
+    /**
+     * The index of the the TabPage
+     */
+    index: number;
+    /**
+     * Whether this page should be loaded lazily
+     */
+    lazy?: boolean;
+    /**
+     * How long to wait till lazy load complete (good for showing loader screens)
+     */
+    lazyLoadTime?: number;
+    /**
+     * Render a custom loading page when lazy loading
+     */
+    renderLoading?: () => JSX.Element;
+    /**
+     * Used as a testing identifier
+     */
+    testID?: string;
+}
+/**
+ * @description: TabController's TabPage
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
+ */
+export default function TabPage({ testID, index, lazy, renderLoading, ...props }: PropsWithChildren<TabControllerPageProps>): JSX.Element;

generatedTypes/components/tabController2/index.d.ts

@@ -0,0 +1,45 @@
+import React, { PropsWithChildren } from 'react';
+import { TabControllerItemProps } from './TabBarItem';
+export { TabControllerItemProps };
+export interface TabControllerProps {
+    /**
+     * The list of tab bar items
+     */
+    items: TabControllerItemProps[];
+    /**
+     * Initial selected index
+     */
+    selectedIndex: number;
+    /**
+     * callback for when index has change (will not be called on ignored items)
+     */
+    onChangeIndex?: (index: number, prevIndex: number | null) => void;
+    /**
+     * When using TabController.PageCarousel this should be turned on
+     */
+    asCarousel?: boolean;
+    /**
+     * Pass for custom carousel page width
+     */
+    carouselPageWidth?: number;
+}
+/**
+ * @description: A performant solution for a tab controller with lazy load mechanism
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
+ * @notes: This component is based on react-native-gesture-handler
+ * @important: On Android, if using react-native-navigation, make sure to wrap your screen with gestureHandlerRootHOC
+ * @importantLink: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation
+ */
+declare function TabController({ selectedIndex, asCarousel, items, onChangeIndex, carouselPageWidth, children }: PropsWithChildren<TabControllerProps>): JSX.Element | null;
+declare namespace TabController {
+    var TabBar: React.ComponentClass<import("./TabBar").TabControllerBarProps & {
+        useCustomTheme?: boolean | undefined;
+    }, any>;
+    var TabBarItem: typeof import("./TabBarItem").default;
+    var TabPage: typeof import("./TabPage").default;
+    var PageCarousel: typeof import("./PageCarousel").default;
+}
+declare const _default: React.ComponentClass<TabControllerProps & {
+    useCustomTheme?: boolean | undefined;
+}, any> & typeof TabController;
+export default _default;