react-native-tab-view 3.3.0 → 3.3.2

package/package.json

@@ -1,27 +1,7 @@
 {
   "name": "react-native-tab-view",
-  "version": "3.3.0",
   "description": "Tab view component for React Native",
-  "main": "lib/commonjs/index.js",
-  "react-native": "src/index.tsx",
-  "module": "lib/module/index.js",
-  "types": "lib/typescript/index.d.ts",
-  "files": [
-    "src",
-    "lib"
-  ],
-  "scripts": {
-    "test": "jest",
-    "typescript": "tsc --noEmit",
-    "lint": "eslint --ext .js,.ts,.tsx .",
-    "release": "release-it",
-    "example": "yarn --cwd example",
-    "bootstrap": "yarn example && yarn",
-    "prepare": "bob build"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
+  "version": "3.3.2",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -33,57 +13,46 @@
     "scrollable",
     "coverflow"
   ],
+  "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/satya164/react-native-tab-view.git"
+    "url": "https://github.com/react-navigation/react-navigation.git",
+    "directory": "packages/react-native-tab-view"
   },
-  "author": "Satyajit Sahoo <satyajit.happy@gmail.com> (https://github.com/satya164/)",
-  "license": "MIT",
   "bugs": {
-    "url": "https://github.com/satya164/react-native-tab-view/issues"
+    "url": "https://github.com/react-navigation/react-navigation/issues"
+  },
+  "homepage": "https://github.com/react-navigation/react-navigation/tree/main/packages/react-native-tab-view#readme",
+  "main": "lib/commonjs/index.js",
+  "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/src/index.d.ts",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "prepack": "bob build",
+    "clean": "del lib"
+  },
+  "dependencies": {
+    "use-latest-callback": "^0.1.5"
   },
-  "homepage": "https://github.com/satya164/react-native-tab-view#readme",
   "devDependencies": {
-    "@commitlint/config-conventional": "^17.1.0",
-    "@expo/vector-icons": "^13.0.0",
-    "@release-it/conventional-changelog": "^5.1.0",
-    "@types/react": "^18.0.14",
-    "@types/react-native": "0.69.5",
-    "babel-jest": "^29.0.1",
-    "babel-loader": "^8.2.5",
-    "babel-preset-react-native": "^4.0.0",
-    "commitlint": "^17.1.2",
-    "eslint": "^8.23.0",
-    "eslint-config-satya164": "^3.1.11",
-    "eslint-plugin-react-native-globals": "^0.1.2",
-    "husky": "^4.2.5",
-    "jest": "^29.0.1",
-    "prettier": "^2.7.1",
     "react": "18.0.0",
     "react-native": "0.69.5",
-    "react-native-builder-bob": "^0.18.3",
+    "react-native-builder-bob": "^0.18.1",
     "react-native-pager-view": "5.4.24",
-    "release-it": "^15.4.0",
-    "typescript": "^4.8.2"
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
     "react-native-pager-view": "*"
   },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-      "pre-commit": "yarn lint && yarn typescript"
-    }
-  },
-  "jest": {
-    "preset": "react-native",
-    "modulePathIgnorePatterns": [
-      "<rootDir>/example/node_modules",
-      "<rootDir>/lib/"
-    ]
-  },
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
@@ -98,7 +67,5 @@
       ]
     ]
   },
-  "dependencies": {
-    "use-latest-callback": "^0.1.5"
-  }
+  "gitHead": "4e29403ec63d9304561e296667f6cf15806c316b"
 }

package/src/PagerViewAdapter.tsx

@@ -3,14 +3,15 @@ import { Animated, Keyboard, StyleSheet } from 'react-native';
 import ViewPager, {
   PageScrollStateChangedNativeEvent,
 } from 'react-native-pager-view';
-import useAnimatedValue from './useAnimatedValue';
+
 import type {
-  NavigationState,
-  Route,
-  Listener,
   EventEmitterProps,
+  Listener,
+  NavigationState,
   PagerProps,
+  Route,
 } from './types';
+import useAnimatedValue from './useAnimatedValue';
 
 const AnimatedViewPager = Animated.createAnimatedComponent(ViewPager);
 

package/src/PanResponderAdapter.tsx

@@ -1,23 +1,24 @@
 import * as React from 'react';
 import {
   Animated,
-  PanResponder,
-  Keyboard,
-  StyleSheet,
   GestureResponderEvent,
-  PanResponderGestureState,
   I18nManager,
+  Keyboard,
+  PanResponder,
+  PanResponderGestureState,
+  StyleSheet,
   View,
 } from 'react-native';
-import useAnimatedValue from './useAnimatedValue';
+
 import type {
-  NavigationState,
-  Route,
-  Layout,
   EventEmitterProps,
-  PagerProps,
+  Layout,
   Listener,
+  NavigationState,
+  PagerProps,
+  Route,
 } from './types';
+import useAnimatedValue from './useAnimatedValue';
 
 type Props<T extends Route> = PagerProps & {
   layout: Layout;

package/src/SceneMap.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import type { SceneRendererProps } from './types';
 
 type SceneProps = {

package/src/SceneView.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
 import type {
-  SceneRendererProps,
   EventEmitterProps,
   NavigationState,
   Route,
+  SceneRendererProps,
 } from './types';
 
 type Props<T extends Route> = SceneRendererProps &

package/src/TabBar.tsx

@@ -1,26 +1,29 @@
 import * as React from 'react';
 import {
   Animated,
+  FlatList,
+  I18nManager,
+  LayoutChangeEvent,
+  ListRenderItemInfo,
+  Platform,
+  StyleProp,
   StyleSheet,
+  TextStyle,
   View,
-  StyleProp,
   ViewStyle,
-  TextStyle,
-  LayoutChangeEvent,
-  I18nManager,
-  Platform,
-  FlatList,
-  ListRenderItemInfo,
+  ViewToken,
 } from 'react-native';
-import TabBarItem, { Props as TabBarItemProps } from './TabBarItem';
+import useLatestCallback from 'use-latest-callback';
+
 import TabBarIndicator, { Props as IndicatorProps } from './TabBarIndicator';
+import TabBarItem, { Props as TabBarItemProps } from './TabBarItem';
 import type {
+  Event,
+  Layout,
+  NavigationState,
   Route,
   Scene,
   SceneRendererProps,
-  NavigationState,
-  Layout,
-  Event,
 } from './types';
 import useAnimatedValue from './useAnimatedValue';
 
@@ -62,6 +65,7 @@ export type Props<T extends Route> = SceneRendererProps & {
   contentContainerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
   gap?: number;
+  testID?: string;
 };
 
 type FlattenedTabWidth = string | number | undefined;
@@ -246,6 +250,10 @@ const renderIndicatorDefault = (props: IndicatorProps<Route>) => (
 
 const getTestIdDefault = ({ route }: Scene<Route>) => route.testID;
 
+// How many items measurements should we update per batch.
+// Defaults to 10, since that's whats FlatList is using in initialNumToRender.
+const MEASURE_PER_BATCH = 10;
+
 export default function TabBar<T extends Route>({
   getLabelText = getLabelTextDefault,
   getAccessible = getAccessibleDefault,
@@ -274,10 +282,11 @@ export default function TabBar<T extends Route>({
   renderTabBarItem,
   style,
   tabStyle,
+  testID,
 }: Props<T>) {
   const [layout, setLayout] = React.useState<Layout>({ width: 0, height: 0 });
   const [tabWidths, setTabWidths] = React.useState<Record<string, number>>({});
-  const flatListRef = React.useRef<FlatList>(null);
+  const flatListRef = React.useRef<FlatList | null>(null);
   const isFirst = React.useRef(true);
   const scrollAmount = useAnimatedValue(0);
   const measuredTabWidths = React.useRef<Record<string, number>>({});
@@ -296,7 +305,9 @@ export default function TabBar<T extends Route>({
 
   const hasMeasuredTabWidths =
     Boolean(layout.width) &&
-    routes.every((r) => typeof tabWidths[r.key] === 'number');
+    routes
+      .slice(0, navigationState.index)
+      .every((r) => typeof tabWidths[r.key] === 'number');
 
   React.useEffect(() => {
     if (isFirst.current) {
@@ -305,7 +316,6 @@ export default function TabBar<T extends Route>({
     }
 
     if (isWidthDynamic && !hasMeasuredTabWidths) {
-      // When tab width is dynamic, only adjust the scroll once we have all tab widths and layout
       return;
     }
 
@@ -373,11 +383,24 @@ export default function TabBar<T extends Route>({
 
               // When we have measured widths for all of the tabs, we should updates the state
               // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
+              // If we have more than 10 routes divide updating tabWidths into multiple batches. Here we update only first batch of 10 items.
               if (
+                routes.length > MEASURE_PER_BATCH &&
+                index === MEASURE_PER_BATCH &&
+                routes
+                  .slice(0, MEASURE_PER_BATCH)
+                  .every(
+                    (r) => typeof measuredTabWidths.current[r.key] === 'number'
+                  )
+              ) {
+                setTabWidths({ ...measuredTabWidths.current });
+              } else if (
                 routes.every(
                   (r) => typeof measuredTabWidths.current[r.key] === 'number'
                 )
               ) {
+                // When we have measured widths for all of the tabs, we should updates the state
+                // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
                 setTabWidths({ ...measuredTabWidths.current });
               }
             }
@@ -492,6 +515,25 @@ export default function TabBar<T extends Route>({
     [scrollAmount]
   );
 
+  const handleViewableItemsChanged = useLatestCallback(
+    ({ changed }: { changed: ViewToken[] }) => {
+      if (routes.length <= MEASURE_PER_BATCH) {
+        return;
+      }
+      // Get next vievable item
+      const item = changed[changed.length - 1];
+      const index = item?.index || 0;
+      if (
+        item.isViewable &&
+        (index % 10 === 0 ||
+          index === navigationState.index ||
+          index === routes.length - 1)
+      ) {
+        setTabWidths({ ...measuredTabWidths.current });
+      }
+    }
+  );
+
   return (
     <Animated.View onLayout={handleLayout} style={[styles.tabBar, style]}>
       <Animated.View
@@ -537,6 +579,8 @@ export default function TabBar<T extends Route>({
           keyboardShouldPersistTaps="handled"
           scrollEnabled={scrollEnabled}
           bounces={bounces}
+          initialNumToRender={MEASURE_PER_BATCH}
+          onViewableItemsChanged={handleViewableItemsChanged}
           alwaysBounceHorizontal={false}
           scrollsToTop={false}
           showsHorizontalScrollIndicator={false}
@@ -548,6 +592,7 @@ export default function TabBar<T extends Route>({
           renderItem={renderItem}
           onScroll={handleScroll}
           ref={flatListRef}
+          testID={testID}
         />
       </View>
     </Animated.View>

package/src/TabBarIndicator.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import {
   Animated,
   Easing,
-  StyleSheet,
   I18nManager,
+  Platform,
   StyleProp,
+  StyleSheet,
   ViewStyle,
-  Platform,
 } from 'react-native';
 
-import type { Route, SceneRendererProps, NavigationState } from './types';
+import type { NavigationState, Route, SceneRendererProps } from './types';
 import useAnimatedValue from './useAnimatedValue';
 
 export type GetTabWidth = (index: number) => number;
@@ -59,9 +59,12 @@ export default function TabBarIndicator<T extends Route>({
 
   const opacity = useAnimatedValue(isWidthDynamic ? 0 : 1);
 
-  const hasMeasuredTabWidths =
-    Boolean(layout.width) &&
-    navigationState.routes.every((_, i) => getTabWidth(i));
+  const indicatorVisible = isWidthDynamic
+    ? layout.width &&
+      navigationState.routes
+        .slice(0, navigationState.index)
+        .every((_, r) => getTabWidth(r))
+    : true;
 
   React.useEffect(() => {
     const fadeInIndicator = () => {
@@ -69,7 +72,7 @@ export default function TabBarIndicator<T extends Route>({
         !isIndicatorShown.current &&
         isWidthDynamic &&
         // We should fade-in the indicator when we have widths for all the tab items
-        hasMeasuredTabWidths
+        indicatorVisible
       ) {
         isIndicatorShown.current = true;
 
@@ -85,7 +88,7 @@ export default function TabBarIndicator<T extends Route>({
     fadeInIndicator();
 
     return () => opacity.stopAnimation();
-  }, [hasMeasuredTabWidths, isWidthDynamic, opacity]);
+  }, [indicatorVisible, isWidthDynamic, opacity]);
 
   const { routes } = navigationState;
 

package/src/TabBarItem.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react';
 import {
   Animated,
-  StyleSheet,
-  View,
-  StyleProp,
   LayoutChangeEvent,
+  StyleProp,
+  StyleSheet,
   TextStyle,
+  View,
   ViewStyle,
 } from 'react-native';
 import useLatestCallback from 'use-latest-callback';
+
 import PlatformPressable from './PlatformPressable';
-import type { Scene, Route, NavigationState } from './types';
+import type { NavigationState, Route, Scene } from './types';
 
 export type Props<T extends Route> = {
   position: Animated.AnimatedInterpolation;

package/src/TabView.tsx

@@ -1,20 +1,21 @@
 import * as React from 'react';
 import {
+  LayoutChangeEvent,
+  StyleProp,
   StyleSheet,
   View,
-  StyleProp,
   ViewStyle,
-  LayoutChangeEvent,
 } from 'react-native';
-import TabBar from './TabBar';
-import SceneView from './SceneView';
+
 import Pager from './Pager';
+import SceneView from './SceneView';
+import TabBar from './TabBar';
 import type {
   Layout,
   NavigationState,
+  PagerProps,
   Route,
   SceneRendererProps,
-  PagerProps,
 } from './types';
 
 export type Props<T extends Route> = PagerProps & {

package/src/index.tsx

@@ -1,15 +1,10 @@
-export { default as TabBar } from './TabBar';
+export { default as SceneMap } from './SceneMap';
 export type { Props as TabBarProps } from './TabBar';
-
-export { default as TabView } from './TabView';
-export type { Props as TabViewProps } from './TabView';
-
-export { default as TabBarIndicator } from './TabBarIndicator';
+export { default as TabBar } from './TabBar';
 export type { Props as TabBarIndicatorProps } from './TabBarIndicator';
-
-export { default as TabBarItem } from './TabBarItem';
+export { default as TabBarIndicator } from './TabBarIndicator';
 export type { Props as TabBarItemProps } from './TabBarItem';
-
-export { default as SceneMap } from './SceneMap';
-
-export type { Route, NavigationState, SceneRendererProps } from './types';
+export { default as TabBarItem } from './TabBarItem';
+export type { Props as TabViewProps } from './TabView';
+export { default as TabView } from './TabView';
+export type { NavigationState, Route, SceneRendererProps } from './types';