react-native-tab-view 3.2.1 → 3.3.2

package/lib/typescript/{TabBarItem.d.ts → src/TabBarItem.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Animated, StyleProp, LayoutChangeEvent, TextStyle, ViewStyle } from 'react-native';
-import type { Scene, Route, NavigationState } from './types';
+import { Animated, LayoutChangeEvent, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { NavigationState, Route, Scene } from './types';
 export declare type Props<T extends Route> = {
     position: Animated.AnimatedInterpolation;
     route: T;
@@ -27,11 +27,9 @@ export declare type Props<T extends Route> = {
     onLayout?: (event: LayoutChangeEvent) => void;
     onPress: () => void;
     onLongPress: () => void;
+    defaultTabWidth?: number;
     labelStyle?: StyleProp<TextStyle>;
     style: StyleProp<ViewStyle>;
 };
-export default class TabBarItem<T extends Route> extends React.Component<Props<T>> {
-    private getActiveOpacity;
-    private getInactiveOpacity;
-    render(): JSX.Element;
-}
+declare function TabBarItem<T extends Route>(props: Props<T>): JSX.Element;
+export default TabBarItem;

package/lib/typescript/{TabView.d.ts → src/TabView.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import type { Layout, NavigationState, Route, SceneRendererProps, PagerProps } from './types';
+import type { Layout, NavigationState, PagerProps, Route, SceneRendererProps } from './types';
 export declare type Props<T extends Route> = PagerProps & {
     onIndexChange: (index: number) => void;
     navigationState: NavigationState<T>;

package/lib/typescript/{index.d.ts → src/index.d.ts}

@@ -1,10 +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';

package/package.json

@@ -1,27 +1,7 @@
 {
   "name": "react-native-tab-view",
-  "version": "3.2.1",
   "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",
@@ -97,5 +66,6 @@
         }
       ]
     ]
-  }
+  },
+  "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);
 
@@ -129,8 +130,13 @@ export default function PagerViewAdapter<T extends Route>({
     };
   }, []);
 
+  const memoizedPosition = React.useMemo(
+    () => Animated.add(position, offset),
+    [offset, position]
+  );
+
   return children({
-    position: Animated.add(position, offset),
+    position: memoizedPosition,
     addEnterListener,
     jumpTo,
     render: (children) => (

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;
@@ -283,10 +284,13 @@ export default function PanResponderAdapter<T extends Route>({
     I18nManager.isRTL ? -1 : 1
   );
 
+  const position = React.useMemo(
+    () => (layout.width ? Animated.divide(panX, -layout.width) : null),
+    [layout.width, panX]
+  );
+
   return children({
-    position: layout.width
-      ? Animated.divide(panX, -layout.width)
-      : new Animated.Value(index),
+    position: position ?? new Animated.Value(index),
     addEnterListener,
     jumpTo,
     render: (children) => (

package/src/SceneMap.tsx

@@ -1,19 +1,24 @@
 import * as React from 'react';
+
 import type { SceneRendererProps } from './types';
 
-class SceneComponent<
-  T extends { component: React.ComponentType<any> }
-> extends React.PureComponent<T> {
-  render() {
-    const { component, ...rest } = this.props;
+type SceneProps = {
+  route: any;
+} & Omit<SceneRendererProps, 'layout'>;
+
+const SceneComponent = React.memo(
+  <T extends { component: React.ComponentType<any> } & SceneProps>({
+    component,
+    ...rest
+  }: T) => {
     return React.createElement(component, rest);
   }
-}
+);
 
 export default function SceneMap<T extends any>(scenes: {
   [key: string]: React.ComponentType<T>;
 }) {
-  return ({ route, jumpTo, position }: SceneRendererProps & { route: any }) => (
+  return ({ route, jumpTo, position }: SceneProps) => (
     <SceneComponent
       key={route.key}
       component={scenes[route.key]}

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 &
@@ -17,121 +18,85 @@ type Props<T extends Route> = SceneRendererProps &
     style?: StyleProp<ViewStyle>;
   };
 
-type State = {
-  loading: boolean;
-};
-
-export default class SceneView<T extends Route> extends React.Component<
-  Props<T>,
-  State
-> {
-  static getDerivedStateFromProps(props: Props<Route>, state: State) {
-    if (
-      state.loading &&
-      Math.abs(props.navigationState.index - props.index) <=
-        props.lazyPreloadDistance
-    ) {
-      // Always render the route when it becomes focused
-      return { loading: false };
-    }
-
-    return null;
+export default function SceneView<T extends Route>({
+  children,
+  navigationState,
+  lazy,
+  layout,
+  index,
+  lazyPreloadDistance,
+  addEnterListener,
+  style,
+}: Props<T>) {
+  const [isLoading, setIsLoading] = React.useState(
+    Math.abs(navigationState.index - index) > lazyPreloadDistance
+  );
+
+  if (
+    isLoading &&
+    Math.abs(navigationState.index - index) <= lazyPreloadDistance
+  ) {
+    // Always render the route when it becomes focused
+    setIsLoading(false);
   }
 
-  state = {
-    loading:
-      Math.abs(this.props.navigationState.index - this.props.index) >
-      this.props.lazyPreloadDistance,
-  };
+  React.useEffect(() => {
+    const handleEnter = (value: number) => {
+      // If we're entering the current route, we need to load it
+      if (value === index) {
+        setIsLoading((prevState) => {
+          if (prevState) {
+            return false;
+          }
+          return prevState;
+        });
+      }
+    };
+
+    let unsubscribe: (() => void) | undefined;
+    let timer: NodeJS.Timeout;
 
-  componentDidMount() {
-    if (this.props.lazy) {
+    if (lazy && isLoading) {
       // If lazy mode is enabled, listen to when we enter screens
-      this.unsubscribe = this.props.addEnterListener(this.handleEnter);
-    } else if (this.state.loading) {
+      unsubscribe = addEnterListener(handleEnter);
+    } else if (isLoading) {
       // If lazy mode is not enabled, render the scene with a delay if not loaded already
       // This improves the initial startup time as the scene is no longer blocking
-      this.timerHandler = setTimeout(
-        () => this.setState({ loading: false }),
-        0
-      );
+      timer = setTimeout(() => setIsLoading(false), 0);
     }
-  }
 
-  componentDidUpdate(prevProps: Props<T>, prevState: State) {
-    if (
-      this.props.lazy !== prevProps.lazy ||
-      this.state.loading !== prevState.loading
-    ) {
-      // We only need the listener if the tab hasn't loaded yet and lazy is enabled
-      if (this.props.lazy && this.state.loading) {
-        this.unsubscribe?.();
-        this.unsubscribe = this.props.addEnterListener(this.handleEnter);
-      } else {
-        this.unsubscribe?.();
+    return () => {
+      unsubscribe?.();
+      clearTimeout(timer);
+    };
+  }, [addEnterListener, index, isLoading, lazy]);
+
+  const focused = navigationState.index === index;
+
+  return (
+    <View
+      accessibilityElementsHidden={!focused}
+      importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
+      style={[
+        styles.route,
+        // If we don't have the layout yet, make the focused screen fill the container
+        // This avoids delay before we are able to render pages side by side
+        layout.width
+          ? { width: layout.width }
+          : focused
+          ? StyleSheet.absoluteFill
+          : null,
+        style,
+      ]}
+    >
+      {
+        // Only render the route only if it's either focused or layout is available
+        // When layout is not available, we must not render unfocused routes
+        // so that the focused route can fill the screen
+        focused || layout.width ? children({ loading: isLoading }) : null
       }
-    }
-  }
-
-  componentWillUnmount() {
-    this.unsubscribe?.();
-
-    if (this.timerHandler) {
-      clearTimeout(this.timerHandler);
-      this.timerHandler = undefined;
-    }
-  }
-
-  private timerHandler: NodeJS.Timeout | undefined;
-
-  private unsubscribe: (() => void) | null = null;
-
-  private handleEnter = (value: number) => {
-    const { index } = this.props;
-
-    // If we're entering the current route, we need to load it
-    if (value === index) {
-      this.setState((prevState) => {
-        if (prevState.loading) {
-          return { loading: false };
-        }
-
-        return null;
-      });
-    }
-  };
-
-  render() {
-    const { navigationState, index, layout, style } = this.props;
-    const { loading } = this.state;
-
-    const focused = navigationState.index === index;
-
-    return (
-      <View
-        accessibilityElementsHidden={!focused}
-        importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
-        style={[
-          styles.route,
-          // If we don't have the layout yet, make the focused screen fill the container
-          // This avoids delay before we are able to render pages side by side
-          layout.width
-            ? { width: layout.width }
-            : focused
-            ? StyleSheet.absoluteFill
-            : null,
-          style,
-        ]}
-      >
-        {
-          // Only render the route only if it's either focused or layout is available
-          // When layout is not available, we must not render unfocused routes
-          // so that the focused route can fill the screen
-          focused || layout.width ? this.props.children({ loading }) : null
-        }
-      </View>
-    );
-  }
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({