react-native-tab-view 3.2.0 → 3.3.0

package/lib/typescript/TabBarIndicator.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { StyleProp, ViewStyle } from 'react-native';
 import type { Route, SceneRendererProps, NavigationState } from './types';
 export declare type GetTabWidth = (index: number) => number;
@@ -9,12 +9,4 @@ export declare type Props<T extends Route> = SceneRendererProps & {
     getTabWidth: GetTabWidth;
     gap?: number;
 };
-export default class TabBarIndicator<T extends Route> extends React.Component<Props<T>> {
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    private fadeInIndicator;
-    private isIndicatorShown;
-    private opacity;
-    private getTranslateX;
-    render(): JSX.Element;
-}
+export default function TabBarIndicator<T extends Route>({ getTabWidth, layout, navigationState, position, width, gap, style, }: Props<T>): JSX.Element;

package/lib/typescript/TabBarItem.d.ts

@@ -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

@@ -23,4 +23,4 @@ export declare type Props<T extends Route> = PagerProps & {
     pagerStyle?: StyleProp<ViewStyle>;
     style?: StyleProp<ViewStyle>;
 };
-export default function TabView<T extends Route>({ onIndexChange, navigationState, renderScene, initialLayout, keyboardDismissMode, lazy, lazyPreloadDistance, onSwipeStart, onSwipeEnd, renderLazyPlaceholder, renderTabBar, sceneContainerStyle, pagerStyle, style, swipeEnabled, tabBarPosition, }: Props<T>): JSX.Element;
+export default function TabView<T extends Route>({ onIndexChange, navigationState, renderScene, initialLayout, keyboardDismissMode, lazy, lazyPreloadDistance, onSwipeStart, onSwipeEnd, renderLazyPlaceholder, renderTabBar, sceneContainerStyle, pagerStyle, style, swipeEnabled, tabBarPosition, animationEnabled, }: Props<T>): JSX.Element;

package/lib/typescript/types.d.ts

@@ -35,6 +35,7 @@ export declare type EventEmitterProps = {
 export declare type PagerProps = Omit<PagerViewProps, 'initialPage' | 'scrollEnabled' | 'onPageScroll' | 'onPageSelected' | 'onPageScrollStateChanged' | 'keyboardDismissMode' | 'children'> & {
     keyboardDismissMode?: 'none' | 'on-drag' | 'auto';
     swipeEnabled?: boolean;
+    animationEnabled?: boolean;
     onSwipeStart?: () => void;
     onSwipeEnd?: () => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-tab-view",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Tab view component for React Native",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
@@ -97,5 +97,8 @@
         }
       ]
     ]
+  },
+  "dependencies": {
+    "use-latest-callback": "^0.1.5"
   }
 }

package/src/PagerViewAdapter.tsx

@@ -41,6 +41,7 @@ export default function PagerViewAdapter<T extends Route>({
   onSwipeEnd,
   children,
   style,
+  animationEnabled,
   ...rest
 }: Props<T>) {
   const { index } = navigationState;
@@ -58,13 +59,21 @@ export default function PagerViewAdapter<T extends Route>({
     navigationStateRef.current = navigationState;
   });
 
-  const jumpTo = React.useCallback((key: string) => {
-    const index = navigationStateRef.current.routes.findIndex(
-      (route: { key: string }) => route.key === key
-    );
-
-    pagerRef.current?.setPage(index);
-  }, []);
+  const jumpTo = React.useCallback(
+    (key: string) => {
+      const index = navigationStateRef.current.routes.findIndex(
+        (route: { key: string }) => route.key === key
+      );
+
+      if (animationEnabled) {
+        pagerRef.current?.setPage(index);
+      } else {
+        pagerRef.current?.setPageWithoutAnimation(index);
+        position.setValue(index);
+      }
+    },
+    [animationEnabled, position]
+  );
 
   React.useEffect(() => {
     if (keyboardDismissMode === 'auto') {
@@ -72,9 +81,14 @@ export default function PagerViewAdapter<T extends Route>({
     }
 
     if (indexRef.current !== index) {
-      pagerRef.current?.setPage(index);
+      if (animationEnabled) {
+        pagerRef.current?.setPage(index);
+      } else {
+        pagerRef.current?.setPageWithoutAnimation(index);
+        position.setValue(index);
+      }
     }
-  }, [keyboardDismissMode, index]);
+  }, [keyboardDismissMode, index, animationEnabled, position]);
 
   const onPageScrollStateChanged = (
     state: PageScrollStateChangedNativeEvent
@@ -115,8 +129,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

@@ -58,6 +58,7 @@ export default function PanResponderAdapter<T extends Route>({
   onSwipeEnd,
   children,
   style,
+  animationEnabled = false,
 }: Props<T>) {
   const { routes, index } = navigationState;
 
@@ -76,27 +77,32 @@ export default function PanResponderAdapter<T extends Route>({
   const swipeDistanceThreshold = layout.width / 1.75;
 
   const jumpToIndex = React.useCallback(
-    (index: number) => {
+    (index: number, animate = animationEnabled) => {
       const offset = -index * layoutRef.current.width;
 
       const { timing, ...transitionConfig } = DefaultTransitionSpec;
 
-      Animated.parallel([
-        timing(panX, {
-          ...transitionConfig,
-          toValue: offset,
-          useNativeDriver: false,
-        }),
-      ]).start(({ finished }) => {
-        if (finished) {
-          onIndexChangeRef.current(index);
-          pendingIndexRef.current = undefined;
-        }
-      });
-
-      pendingIndexRef.current = index;
+      if (animate) {
+        Animated.parallel([
+          timing(panX, {
+            ...transitionConfig,
+            toValue: offset,
+            useNativeDriver: false,
+          }),
+        ]).start(({ finished }) => {
+          if (finished) {
+            onIndexChangeRef.current(index);
+            pendingIndexRef.current = undefined;
+          }
+        });
+        pendingIndexRef.current = index;
+      } else {
+        panX.setValue(offset);
+        onIndexChangeRef.current(index);
+        pendingIndexRef.current = undefined;
+      }
     },
-    [panX]
+    [animationEnabled, panX]
   );
 
   React.useEffect(() => {
@@ -230,7 +236,7 @@ export default function PanResponderAdapter<T extends Route>({
       nextIndex = currentIndex;
     }
 
-    jumpToIndex(nextIndex);
+    jumpToIndex(nextIndex, true);
   };
 
   // TODO: use the listeners
@@ -277,10 +283,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,23 @@
 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

@@ -17,121 +17,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({