react-native-tab-view upgrade

Author: chr314

README.md

@@ -13,14 +13,14 @@ npm install react-native-tab-view-easy
 ```
 
 
-Now we need to install `react-native-tab-view`, `react-native-gesture-handler` and `react-native-reanimated`
+Now we need to install `react-native-tab-view` and `react-native-pager-view`
 
 ```sh
-yarn add react-native-tab-view react-native-gesture-handler react-native-reanimated
+yarn add react-native-tab-view react-native-pager-view
 ```
 OR
 ```sh
-npm install react-native-tab-view react-native-gesture-handler react-native-reanimated
+npm install react-native-tab-view react-native-pager-view
 ```
 ## Usage
 
@@ -40,6 +40,8 @@ import { TabView, Tab } from 'react-native-tab-view-easy';
 </TabView>
 ```
 
+##[API reference](https://github.com/satya164/react-native-tab-view#api-reference)
+
 ## License
 
 MIT

example/babel.config.js

@@ -10,6 +10,7 @@ module.exports = function (api) {
       [
         'module-resolver',
         {
+          extensions: ['.tsx', '.ts', '.js', '.json'],
           alias: {
             // For development, we want to alias the library to the source
             [pak.name]: path.join(__dirname, '..', pak.source),

example/package.json

@@ -17,9 +17,8 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "0.63.4",
-    "react-native-gesture-handler": "^1.10.1",
-    "react-native-reanimated": "^1.13.2",
-    "react-native-tab-view": "^2.15.2",
+    "react-native-pager-view": "^5.1.2",
+    "react-native-tab-view": "^3.0.0",
     "react-native-unimodules": "~0.12.0",
     "react-native-web": "~0.14.9"
   },

example/yarn.lock

@@ -4,7 +4,7 @@
   "description": "A cross-platform Tab View component for React Native based on react-native-tab-view with easier syntax",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
-  "types": "lib/typescript/src/index.d.ts",
+  "types": "lib/typescript/index.d.ts",
   "react-native": "src/index",
   "source": "src/index",
   "files": [
@@ -35,6 +35,7 @@
     "react-native",
     "ios",
     "android",
+    "react-native-web",
     "react-native-tab-view",
     "react-native-tab",
     "tabs"
@@ -66,16 +67,15 @@
     "prettier": "^2.0.5",
     "react": "16.13.1",
     "react-native": "0.63.4",
+    "react-native-tab-view": "^3.0.0",
     "react-native-builder-bob": "^0.17.1",
     "release-it": "^14.2.2",
     "typescript": "^4.1.3"
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
-  },
-  "dependencies": {
-    "react-native-tab-view": "^2.15.2"
+    "react-native": "*",
+    "react-native-tab-view": "*"
   },
   "jest": {
     "preset": "react-native",

package.json

@@ -1,36 +1,30 @@
 import React, { useState, useEffect, useRef, ReactNode } from 'react';
-import { TabView as TabViewOriginal, Route } from 'react-native-tab-view';
-import { View, Dimensions, StyleProp, ViewStyle } from 'react-native';
-import type { SceneRendererProps } from 'react-native-tab-view';
-
-const initialLayout = { width: Dimensions.get('window').width };
+import {
+  TabView as TabViewOriginal,
+  Route,
+  TabViewProps as TabViewPropsOriginal,
+} from 'react-native-tab-view';
+import { View, useWindowDimensions } from 'react-native';
 
 interface ScenesMap {
   [key: string]: ReactNode;
 }
 
 export type TabViewProps = {
   enableOptimizations?: boolean;
-  onIndexChange?: (index: number) => void;
-  renderTabBar?: (props: SceneRendererProps) => React.ReactNode;
-  tabBarPosition?: 'top' | 'bottom';
-  initialLayout?: {
-    width?: number;
-    height?: number;
-  };
-  lazy?: boolean;
-  lazyPreloadDistance?: number;
-  removeClippedSubviews?: boolean;
-  sceneContainerStyle?: StyleProp<ViewStyle>;
-  style?: StyleProp<ViewStyle>;
-  children?: ReactNode;
-};
+  children: ReactNode;
+} & Omit<
+  Partial<TabViewPropsOriginal<Route>>,
+  'navigationState' | 'renderScene' | 'onIndexChange'
+>;
 
 export const TabView = (props: TabViewProps) => {
   const [index, setIndex] = useState(0);
   const [routes, setRoutes] = useState<Route[]>([]);
   const scenes = useRef<ScenesMap>({});
 
+  const layout = useWindowDimensions();
+
   useEffect(() => {
     if (props.children) {
       let newRoutes: Route[] = [];
@@ -55,7 +49,7 @@ export const TabView = (props: TabViewProps) => {
     }
   }, [props.children]);
 
-  const renderScene = ({ route }: { route: any }) => {
+  const renderScene = ({ route }: { route: Route }) => {
     if (
       props.enableOptimizations &&
       Math.abs(index - routes.findIndex((item) => item.key === route.key)) > 2
@@ -69,15 +63,19 @@ export const TabView = (props: TabViewProps) => {
     return null;
   };
 
-  return (
-    <TabViewOriginal
-      {...props}
-      navigationState={{ index, routes }}
-      renderScene={renderScene}
-      onIndexChange={setIndex}
-      initialLayout={initialLayout}
-    />
-  );
+  if (routes.length) {
+    return (
+      // @ts-ignore
+      <TabViewOriginal
+        {...props}
+        navigationState={{ index, routes }}
+        renderScene={renderScene}
+        onIndexChange={setIndex}
+        initialLayout={props.initialLayout || { width: layout.width }}
+      />
+    );
+  }
+  return null;
 };
 
 export type TabProps = {
@@ -91,5 +89,5 @@ export type TabProps = {
 };
 
 export const Tab = (props: TabProps) => {
-  return <React.Fragment>{props.children}</React.Fragment>;
+  return <>{props.children}</>;
 };

src/index.tsx

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
+    "baseUrl": "./",
     "paths": {
       "react-native-tab-view-easy": ["./src/index"]
     },