react-native-tab-view 3.2.1 → 3.3.0

package/lib/module/TabBarItem.js

@@ -1,182 +1,206 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import * as React from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
+import useLatestCallback from 'use-latest-callback';
 import PlatformPressable from './PlatformPressable';
 const DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';
 const DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';
-export default class TabBarItem extends React.Component {
-  constructor() {
-    super(...arguments);
 
-    _defineProperty(this, "getActiveOpacity", (position, routes, tabIndex) => {
-      if (routes.length > 1) {
-        const inputRange = routes.map((_, i) => i);
-        return position.interpolate({
-          inputRange,
-          outputRange: inputRange.map(i => i === tabIndex ? 1 : 0)
-        });
-      } else {
-        return 1;
-      }
+const getActiveOpacity = (position, routesLength, tabIndex) => {
+  if (routesLength > 1) {
+    const inputRange = Array.from({
+      length: routesLength
+    }, (_, i) => i);
+    return position.interpolate({
+      inputRange,
+      outputRange: inputRange.map(i => i === tabIndex ? 1 : 0)
     });
+  } else {
+    return 1;
+  }
+};
 
-    _defineProperty(this, "getInactiveOpacity", (position, routes, tabIndex) => {
-      if (routes.length > 1) {
-        const inputRange = routes.map((_, i) => i);
-        return position.interpolate({
-          inputRange,
-          outputRange: inputRange.map(i => i === tabIndex ? 0 : 1)
-        });
-      } else {
-        return 0;
-      }
+const getInactiveOpacity = (position, routesLength, tabIndex) => {
+  if (routesLength > 1) {
+    const inputRange = Array.from({
+      length: routesLength
+    }, (_, i) => i);
+    return position.interpolate({
+      inputRange,
+      outputRange: inputRange.map(i => i === tabIndex ? 0 : 1)
     });
+  } else {
+    return 0;
   }
+};
 
-  render() {
-    const {
-      route,
-      position,
-      navigationState,
-      renderLabel: renderLabelCustom,
-      renderIcon,
-      renderBadge,
-      getLabelText,
-      getTestID,
-      getAccessibilityLabel,
-      getAccessible,
-      activeColor: activeColorCustom,
-      inactiveColor: inactiveColorCustom,
-      pressColor,
-      pressOpacity,
-      labelStyle,
-      style,
-      onLayout,
-      onPress,
-      onLongPress
-    } = this.props;
-    const tabIndex = navigationState.routes.indexOf(route);
-    const isFocused = navigationState.index === tabIndex;
-    const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;
-    const activeColor = activeColorCustom !== undefined ? activeColorCustom : typeof labelColorFromStyle === 'string' ? labelColorFromStyle : DEFAULT_ACTIVE_COLOR;
-    const inactiveColor = inactiveColorCustom !== undefined ? inactiveColorCustom : typeof labelColorFromStyle === 'string' ? labelColorFromStyle : DEFAULT_INACTIVE_COLOR;
-    const activeOpacity = this.getActiveOpacity(position, navigationState.routes, tabIndex);
-    const inactiveOpacity = this.getInactiveOpacity(position, navigationState.routes, tabIndex);
-    let icon = null;
-    let label = null;
-
-    if (renderIcon) {
-      const activeIcon = renderIcon({
-        route,
-        focused: true,
-        color: activeColor
-      });
-      const inactiveIcon = renderIcon({
-        route,
-        focused: false,
-        color: inactiveColor
-      });
-
-      if (inactiveIcon != null && activeIcon != null) {
-        icon = /*#__PURE__*/React.createElement(View, {
-          style: styles.icon
-        }, /*#__PURE__*/React.createElement(Animated.View, {
-          style: {
-            opacity: inactiveOpacity
-          }
-        }, inactiveIcon), /*#__PURE__*/React.createElement(Animated.View, {
-          style: [StyleSheet.absoluteFill, {
-            opacity: activeOpacity
-          }]
-        }, activeIcon));
-      }
-    }
+const TabBarItemInternal = _ref => {
+  let {
+    getAccessibilityLabel,
+    getAccessible,
+    getLabelText,
+    getTestID,
+    onLongPress,
+    onPress,
+    isFocused,
+    position,
+    route,
+    style,
+    inactiveColor: inactiveColorCustom,
+    activeColor: activeColorCustom,
+    labelStyle,
+    onLayout,
+    index: tabIndex,
+    pressColor,
+    pressOpacity,
+    renderBadge,
+    renderIcon,
+    defaultTabWidth,
+    routesLength,
+    renderLabel: renderLabelCustom
+  } = _ref;
+  const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;
+  const activeColor = activeColorCustom !== undefined ? activeColorCustom : typeof labelColorFromStyle === 'string' ? labelColorFromStyle : DEFAULT_ACTIVE_COLOR;
+  const inactiveColor = inactiveColorCustom !== undefined ? inactiveColorCustom : typeof labelColorFromStyle === 'string' ? labelColorFromStyle : DEFAULT_INACTIVE_COLOR;
+  const activeOpacity = getActiveOpacity(position, routesLength, tabIndex);
+  const inactiveOpacity = getInactiveOpacity(position, routesLength, tabIndex);
+  let icon = null;
+  let label = null;
 
-    const renderLabel = renderLabelCustom !== undefined ? renderLabelCustom : _ref => {
-      let {
-        route,
-        color
-      } = _ref;
-      const labelText = getLabelText({
-        route
-      });
-
-      if (typeof labelText === 'string') {
-        return /*#__PURE__*/React.createElement(Animated.Text, {
-          style: [styles.label, icon ? {
-            marginTop: 0
-          } : null, labelStyle, {
-            color
-          }]
-        }, labelText);
-      }
-
-      return labelText;
-    };
+  if (renderIcon) {
+    const activeIcon = renderIcon({
+      route,
+      focused: true,
+      color: activeColor
+    });
+    const inactiveIcon = renderIcon({
+      route,
+      focused: false,
+      color: inactiveColor
+    });
 
-    if (renderLabel) {
-      const activeLabel = renderLabel({
-        route,
-        focused: true,
-        color: activeColor
-      });
-      const inactiveLabel = renderLabel({
-        route,
-        focused: false,
-        color: inactiveColor
-      });
-      label = /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Animated.View, {
+    if (inactiveIcon != null && activeIcon != null) {
+      icon = /*#__PURE__*/React.createElement(View, {
+        style: styles.icon
+      }, /*#__PURE__*/React.createElement(Animated.View, {
         style: {
           opacity: inactiveOpacity
         }
-      }, inactiveLabel), /*#__PURE__*/React.createElement(Animated.View, {
+      }, inactiveIcon), /*#__PURE__*/React.createElement(Animated.View, {
         style: [StyleSheet.absoluteFill, {
           opacity: activeOpacity
         }]
-      }, activeLabel));
+      }, activeIcon));
+    }
+  }
+
+  const renderLabel = renderLabelCustom !== undefined ? renderLabelCustom : labelProps => {
+    const labelText = getLabelText({
+      route: labelProps.route
+    });
+
+    if (typeof labelText === 'string') {
+      return /*#__PURE__*/React.createElement(Animated.Text, {
+        style: [styles.label, icon ? {
+          marginTop: 0
+        } : null, labelStyle, {
+          color: labelProps.color
+        }]
+      }, labelText);
     }
 
-    const tabStyle = StyleSheet.flatten(style);
-    const isWidthSet = (tabStyle === null || tabStyle === void 0 ? void 0 : tabStyle.width) !== undefined;
-    const tabContainerStyle = isWidthSet ? null : {
-      flex: 1
-    };
-    const scene = {
-      route
-    };
-    let accessibilityLabel = getAccessibilityLabel(scene);
-    accessibilityLabel = typeof accessibilityLabel !== 'undefined' ? accessibilityLabel : getLabelText(scene);
-    const badge = renderBadge ? renderBadge(scene) : null;
-    return /*#__PURE__*/React.createElement(PlatformPressable, {
-      android_ripple: {
-        borderless: true
-      },
-      testID: getTestID(scene),
-      accessible: getAccessible(scene),
-      accessibilityLabel: accessibilityLabel,
-      accessibilityRole: "tab",
-      accessibilityState: {
-        selected: isFocused
-      } // @ts-ignore: this is to support older React Native versions
-      ,
-      accessibilityStates: isFocused ? ['selected'] : [],
-      pressColor: pressColor,
-      pressOpacity: pressOpacity,
-      delayPressIn: 0,
-      onLayout: onLayout,
-      onPress: onPress,
-      onLongPress: onLongPress,
-      style: [styles.pressable, tabContainerStyle]
-    }, /*#__PURE__*/React.createElement(View, {
-      pointerEvents: "none",
-      style: [styles.item, tabStyle]
-    }, icon, label, badge != null ? /*#__PURE__*/React.createElement(View, {
-      style: styles.badge
-    }, badge) : null));
+    return labelText;
+  };
+
+  if (renderLabel) {
+    const activeLabel = renderLabel({
+      route,
+      focused: true,
+      color: activeColor
+    });
+    const inactiveLabel = renderLabel({
+      route,
+      focused: false,
+      color: inactiveColor
+    });
+    label = /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Animated.View, {
+      style: {
+        opacity: inactiveOpacity
+      }
+    }, inactiveLabel), /*#__PURE__*/React.createElement(Animated.View, {
+      style: [StyleSheet.absoluteFill, {
+        opacity: activeOpacity
+      }]
+    }, activeLabel));
   }
 
+  const tabStyle = StyleSheet.flatten(style);
+  const isWidthSet = (tabStyle === null || tabStyle === void 0 ? void 0 : tabStyle.width) !== undefined;
+  const tabContainerStyle = isWidthSet ? null : {
+    width: defaultTabWidth
+  };
+  const scene = {
+    route
+  };
+  let accessibilityLabel = getAccessibilityLabel(scene);
+  accessibilityLabel = typeof accessibilityLabel !== 'undefined' ? accessibilityLabel : getLabelText(scene);
+  const badge = renderBadge ? renderBadge(scene) : null;
+  return /*#__PURE__*/React.createElement(PlatformPressable, {
+    android_ripple: {
+      borderless: true
+    },
+    testID: getTestID(scene),
+    accessible: getAccessible(scene),
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: "tab",
+    accessibilityState: {
+      selected: isFocused
+    } // @ts-ignore: this is to support older React Native versions
+    ,
+    accessibilityStates: isFocused ? ['selected'] : [],
+    pressColor: pressColor,
+    pressOpacity: pressOpacity,
+    delayPressIn: 0,
+    onLayout: onLayout,
+    onPress: onPress,
+    onLongPress: onLongPress,
+    style: [styles.pressable, tabContainerStyle]
+  }, /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none",
+    style: [styles.item, tabStyle]
+  }, icon, label, badge != null ? /*#__PURE__*/React.createElement(View, {
+    style: styles.badge
+  }, badge) : null));
+};
+
+const MemoizedTabBarItemInternal = /*#__PURE__*/React.memo(TabBarItemInternal);
+
+function TabBarItem(props) {
+  const {
+    onPress,
+    onLongPress,
+    onLayout,
+    navigationState,
+    route,
+    ...rest
+  } = props;
+  const onPressLatest = useLatestCallback(onPress);
+  const onLongPressLatest = useLatestCallback(onLongPress);
+  const onLayoutLatest = useLatestCallback(onLayout ? onLayout : () => {});
+  const tabIndex = navigationState.routes.indexOf(route);
+  return /*#__PURE__*/React.createElement(MemoizedTabBarItemInternal, _extends({}, rest, {
+    onPress: onPressLatest,
+    onLayout: onLayoutLatest,
+    onLongPress: onLongPressLatest,
+    isFocused: navigationState.index === tabIndex,
+    route: route,
+    index: tabIndex,
+    routesLength: navigationState.routes.length
+  }));
 }
+
+export default TabBarItem;
 const styles = StyleSheet.create({
   label: {
     margin: 4,

package/lib/module/TabBarItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Animated","StyleSheet","View","PlatformPressable","DEFAULT_ACTIVE_COLOR","DEFAULT_INACTIVE_COLOR","TabBarItem","Component","position","routes","tabIndex","length","inputRange","map","_","i","interpolate","outputRange","render","route","navigationState","renderLabel","renderLabelCustom","renderIcon","renderBadge","getLabelText","getTestID","getAccessibilityLabel","getAccessible","activeColor","activeColorCustom","inactiveColor","inactiveColorCustom","pressColor","pressOpacity","labelStyle","style","onLayout","onPress","onLongPress","props","indexOf","isFocused","index","labelColorFromStyle","flatten","color","undefined","activeOpacity","getActiveOpacity","inactiveOpacity","getInactiveOpacity","icon","label","activeIcon","focused","inactiveIcon","styles","opacity","absoluteFill","labelText","marginTop","activeLabel","inactiveLabel","tabStyle","isWidthSet","width","tabContainerStyle","flex","scene","accessibilityLabel","badge","borderless","selected","pressable","item","create","margin","backgroundColor","textTransform","alignItems","justifyContent","padding","minHeight","top","right"],"sources":["TabBarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Animated,\n  StyleSheet,\n  View,\n  StyleProp,\n  LayoutChangeEvent,\n  TextStyle,\n  ViewStyle,\n} from 'react-native';\nimport PlatformPressable from './PlatformPressable';\nimport type { Scene, Route, NavigationState } from './types';\n\nexport type Props<T extends Route> = {\n  position: Animated.AnimatedInterpolation;\n  route: T;\n  navigationState: NavigationState<T>;\n  activeColor?: string;\n  inactiveColor?: string;\n  pressColor?: string;\n  pressOpacity?: number;\n  getLabelText: (scene: Scene<T>) => string | undefined;\n  getAccessible: (scene: Scene<T>) => boolean | undefined;\n  getAccessibilityLabel: (scene: Scene<T>) => string | undefined;\n  getTestID: (scene: Scene<T>) => string | undefined;\n  renderLabel?: (scene: {\n    route: T;\n    focused: boolean;\n    color: string;\n  }) => React.ReactNode;\n  renderIcon?: (scene: {\n    route: T;\n    focused: boolean;\n    color: string;\n  }) => React.ReactNode;\n  renderBadge?: (scene: Scene<T>) => React.ReactNode;\n  onLayout?: (event: LayoutChangeEvent) => void;\n  onPress: () => void;\n  onLongPress: () => void;\n  labelStyle?: StyleProp<TextStyle>;\n  style: StyleProp<ViewStyle>;\n};\n\nconst DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';\nconst DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';\n\nexport default class TabBarItem<T extends Route> extends React.Component<\n  Props<T>\n> {\n  private getActiveOpacity = (\n    position: Animated.AnimatedInterpolation,\n    routes: Route[],\n    tabIndex: number\n  ) => {\n    if (routes.length > 1) {\n      const inputRange = routes.map((_, i) => i);\n\n      return position.interpolate({\n        inputRange,\n        outputRange: inputRange.map((i) => (i === tabIndex ? 1 : 0)),\n      });\n    } else {\n      return 1;\n    }\n  };\n\n  private getInactiveOpacity = (\n    position: Animated.AnimatedInterpolation,\n    routes: Route[],\n    tabIndex: number\n  ) => {\n    if (routes.length > 1) {\n      const inputRange = routes.map((_: Route, i: number) => i);\n\n      return position.interpolate({\n        inputRange,\n        outputRange: inputRange.map((i: number) => (i === tabIndex ? 0 : 1)),\n      });\n    } else {\n      return 0;\n    }\n  };\n\n  render() {\n    const {\n      route,\n      position,\n      navigationState,\n      renderLabel: renderLabelCustom,\n      renderIcon,\n      renderBadge,\n      getLabelText,\n      getTestID,\n      getAccessibilityLabel,\n      getAccessible,\n      activeColor: activeColorCustom,\n      inactiveColor: inactiveColorCustom,\n      pressColor,\n      pressOpacity,\n      labelStyle,\n      style,\n      onLayout,\n      onPress,\n      onLongPress,\n    } = this.props;\n\n    const tabIndex = navigationState.routes.indexOf(route);\n    const isFocused = navigationState.index === tabIndex;\n\n    const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;\n\n    const activeColor =\n      activeColorCustom !== undefined\n        ? activeColorCustom\n        : typeof labelColorFromStyle === 'string'\n        ? labelColorFromStyle\n        : DEFAULT_ACTIVE_COLOR;\n    const inactiveColor =\n      inactiveColorCustom !== undefined\n        ? inactiveColorCustom\n        : typeof labelColorFromStyle === 'string'\n        ? labelColorFromStyle\n        : DEFAULT_INACTIVE_COLOR;\n\n    const activeOpacity = this.getActiveOpacity(\n      position,\n      navigationState.routes,\n      tabIndex\n    );\n    const inactiveOpacity = this.getInactiveOpacity(\n      position,\n      navigationState.routes,\n      tabIndex\n    );\n\n    let icon: React.ReactNode | null = null;\n    let label: React.ReactNode | null = null;\n\n    if (renderIcon) {\n      const activeIcon = renderIcon({\n        route,\n        focused: true,\n        color: activeColor,\n      });\n      const inactiveIcon = renderIcon({\n        route,\n        focused: false,\n        color: inactiveColor,\n      });\n\n      if (inactiveIcon != null && activeIcon != null) {\n        icon = (\n          <View style={styles.icon}>\n            <Animated.View style={{ opacity: inactiveOpacity }}>\n              {inactiveIcon}\n            </Animated.View>\n            <Animated.View\n              style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}\n            >\n              {activeIcon}\n            </Animated.View>\n          </View>\n        );\n      }\n    }\n\n    const renderLabel =\n      renderLabelCustom !== undefined\n        ? renderLabelCustom\n        : ({ route, color }: { route: T; color: string }) => {\n            const labelText = getLabelText({ route });\n\n            if (typeof labelText === 'string') {\n              return (\n                <Animated.Text\n                  style={[\n                    styles.label,\n                    icon ? { marginTop: 0 } : null,\n                    labelStyle,\n                    { color },\n                  ]}\n                >\n                  {labelText}\n                </Animated.Text>\n              );\n            }\n\n            return labelText;\n          };\n\n    if (renderLabel) {\n      const activeLabel = renderLabel({\n        route,\n        focused: true,\n        color: activeColor,\n      });\n      const inactiveLabel = renderLabel({\n        route,\n        focused: false,\n        color: inactiveColor,\n      });\n\n      label = (\n        <View>\n          <Animated.View style={{ opacity: inactiveOpacity }}>\n            {inactiveLabel}\n          </Animated.View>\n          <Animated.View\n            style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}\n          >\n            {activeLabel}\n          </Animated.View>\n        </View>\n      );\n    }\n\n    const tabStyle = StyleSheet.flatten(style);\n    const isWidthSet = tabStyle?.width !== undefined;\n    const tabContainerStyle: ViewStyle | null = isWidthSet ? null : { flex: 1 };\n\n    const scene = { route };\n\n    let accessibilityLabel = getAccessibilityLabel(scene);\n\n    accessibilityLabel =\n      typeof accessibilityLabel !== 'undefined'\n        ? accessibilityLabel\n        : getLabelText(scene);\n\n    const badge = renderBadge ? renderBadge(scene) : null;\n\n    return (\n      <PlatformPressable\n        android_ripple={{ borderless: true }}\n        testID={getTestID(scene)}\n        accessible={getAccessible(scene)}\n        accessibilityLabel={accessibilityLabel}\n        accessibilityRole=\"tab\"\n        accessibilityState={{ selected: isFocused }}\n        // @ts-ignore: this is to support older React Native versions\n        accessibilityStates={isFocused ? ['selected'] : []}\n        pressColor={pressColor}\n        pressOpacity={pressOpacity}\n        delayPressIn={0}\n        onLayout={onLayout}\n        onPress={onPress}\n        onLongPress={onLongPress}\n        style={[styles.pressable, tabContainerStyle]}\n      >\n        <View pointerEvents=\"none\" style={[styles.item, tabStyle]}>\n          {icon}\n          {label}\n          {badge != null ? <View style={styles.badge}>{badge}</View> : null}\n        </View>\n      </PlatformPressable>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  label: {\n    margin: 4,\n    backgroundColor: 'transparent',\n    textTransform: 'uppercase',\n  },\n  icon: {\n    margin: 2,\n  },\n  item: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: 10,\n    minHeight: 48,\n  },\n  badge: {\n    position: 'absolute',\n    top: 0,\n    right: 0,\n  },\n  pressable: {\n    // The label is not pressable on Windows\n    // Adding backgroundColor: 'transparent' seems to fix it\n    backgroundColor: 'transparent',\n  },\n});\n"],"mappings":"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"}
+{"version":3,"names":["React","Animated","StyleSheet","View","useLatestCallback","PlatformPressable","DEFAULT_ACTIVE_COLOR","DEFAULT_INACTIVE_COLOR","getActiveOpacity","position","routesLength","tabIndex","inputRange","Array","from","length","_","i","interpolate","outputRange","map","getInactiveOpacity","TabBarItemInternal","getAccessibilityLabel","getAccessible","getLabelText","getTestID","onLongPress","onPress","isFocused","route","style","inactiveColor","inactiveColorCustom","activeColor","activeColorCustom","labelStyle","onLayout","index","pressColor","pressOpacity","renderBadge","renderIcon","defaultTabWidth","renderLabel","renderLabelCustom","labelColorFromStyle","flatten","color","undefined","activeOpacity","inactiveOpacity","icon","label","activeIcon","focused","inactiveIcon","styles","opacity","absoluteFill","labelProps","labelText","marginTop","activeLabel","inactiveLabel","tabStyle","isWidthSet","width","tabContainerStyle","scene","accessibilityLabel","badge","borderless","selected","pressable","item","MemoizedTabBarItemInternal","memo","TabBarItem","props","navigationState","rest","onPressLatest","onLongPressLatest","onLayoutLatest","routes","indexOf","create","margin","backgroundColor","textTransform","flex","alignItems","justifyContent","padding","minHeight","top","right"],"sources":["TabBarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Animated,\n  StyleSheet,\n  View,\n  StyleProp,\n  LayoutChangeEvent,\n  TextStyle,\n  ViewStyle,\n} from 'react-native';\nimport useLatestCallback from 'use-latest-callback';\nimport PlatformPressable from './PlatformPressable';\nimport type { Scene, Route, NavigationState } from './types';\n\nexport type Props<T extends Route> = {\n  position: Animated.AnimatedInterpolation;\n  route: T;\n  navigationState: NavigationState<T>;\n  activeColor?: string;\n  inactiveColor?: string;\n  pressColor?: string;\n  pressOpacity?: number;\n  getLabelText: (scene: Scene<T>) => string | undefined;\n  getAccessible: (scene: Scene<T>) => boolean | undefined;\n  getAccessibilityLabel: (scene: Scene<T>) => string | undefined;\n  getTestID: (scene: Scene<T>) => string | undefined;\n  renderLabel?: (scene: {\n    route: T;\n    focused: boolean;\n    color: string;\n  }) => React.ReactNode;\n  renderIcon?: (scene: {\n    route: T;\n    focused: boolean;\n    color: string;\n  }) => React.ReactNode;\n  renderBadge?: (scene: Scene<T>) => React.ReactNode;\n  onLayout?: (event: LayoutChangeEvent) => void;\n  onPress: () => void;\n  onLongPress: () => void;\n  defaultTabWidth?: number;\n  labelStyle?: StyleProp<TextStyle>;\n  style: StyleProp<ViewStyle>;\n};\n\nconst DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';\nconst DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';\n\nconst getActiveOpacity = (\n  position: Animated.AnimatedInterpolation,\n  routesLength: number,\n  tabIndex: number\n) => {\n  if (routesLength > 1) {\n    const inputRange = Array.from({ length: routesLength }, (_, i) => i);\n\n    return position.interpolate({\n      inputRange,\n      outputRange: inputRange.map((i) => (i === tabIndex ? 1 : 0)),\n    });\n  } else {\n    return 1;\n  }\n};\n\nconst getInactiveOpacity = (\n  position: Animated.AnimatedInterpolation,\n  routesLength: number,\n  tabIndex: number\n) => {\n  if (routesLength > 1) {\n    const inputRange = Array.from({ length: routesLength }, (_, i) => i);\n\n    return position.interpolate({\n      inputRange,\n      outputRange: inputRange.map((i: number) => (i === tabIndex ? 0 : 1)),\n    });\n  } else {\n    return 0;\n  }\n};\n\ntype TabBarItemInternalProps<T extends Route> = Omit<\n  Props<T>,\n  'navigationState'\n> & {\n  isFocused: boolean;\n  index: number;\n  routesLength: number;\n};\n\nconst TabBarItemInternal = <T extends Route>({\n  getAccessibilityLabel,\n  getAccessible,\n  getLabelText,\n  getTestID,\n  onLongPress,\n  onPress,\n  isFocused,\n  position,\n  route,\n  style,\n  inactiveColor: inactiveColorCustom,\n  activeColor: activeColorCustom,\n  labelStyle,\n  onLayout,\n  index: tabIndex,\n  pressColor,\n  pressOpacity,\n  renderBadge,\n  renderIcon,\n  defaultTabWidth,\n  routesLength,\n  renderLabel: renderLabelCustom,\n}: TabBarItemInternalProps<T>) => {\n  const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;\n\n  const activeColor =\n    activeColorCustom !== undefined\n      ? activeColorCustom\n      : typeof labelColorFromStyle === 'string'\n      ? labelColorFromStyle\n      : DEFAULT_ACTIVE_COLOR;\n  const inactiveColor =\n    inactiveColorCustom !== undefined\n      ? inactiveColorCustom\n      : typeof labelColorFromStyle === 'string'\n      ? labelColorFromStyle\n      : DEFAULT_INACTIVE_COLOR;\n\n  const activeOpacity = getActiveOpacity(position, routesLength, tabIndex);\n  const inactiveOpacity = getInactiveOpacity(position, routesLength, tabIndex);\n\n  let icon: React.ReactNode | null = null;\n  let label: React.ReactNode | null = null;\n\n  if (renderIcon) {\n    const activeIcon = renderIcon({\n      route,\n      focused: true,\n      color: activeColor,\n    });\n    const inactiveIcon = renderIcon({\n      route,\n      focused: false,\n      color: inactiveColor,\n    });\n\n    if (inactiveIcon != null && activeIcon != null) {\n      icon = (\n        <View style={styles.icon}>\n          <Animated.View style={{ opacity: inactiveOpacity }}>\n            {inactiveIcon}\n          </Animated.View>\n          <Animated.View\n            style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}\n          >\n            {activeIcon}\n          </Animated.View>\n        </View>\n      );\n    }\n  }\n\n  const renderLabel =\n    renderLabelCustom !== undefined\n      ? renderLabelCustom\n      : (labelProps: { route: T; color: string }) => {\n          const labelText = getLabelText({ route: labelProps.route });\n\n          if (typeof labelText === 'string') {\n            return (\n              <Animated.Text\n                style={[\n                  styles.label,\n                  icon ? { marginTop: 0 } : null,\n                  labelStyle,\n                  { color: labelProps.color },\n                ]}\n              >\n                {labelText}\n              </Animated.Text>\n            );\n          }\n\n          return labelText;\n        };\n\n  if (renderLabel) {\n    const activeLabel = renderLabel({\n      route,\n      focused: true,\n      color: activeColor,\n    });\n    const inactiveLabel = renderLabel({\n      route,\n      focused: false,\n      color: inactiveColor,\n    });\n\n    label = (\n      <View>\n        <Animated.View style={{ opacity: inactiveOpacity }}>\n          {inactiveLabel}\n        </Animated.View>\n        <Animated.View\n          style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}\n        >\n          {activeLabel}\n        </Animated.View>\n      </View>\n    );\n  }\n\n  const tabStyle = StyleSheet.flatten(style);\n  const isWidthSet = tabStyle?.width !== undefined;\n\n  const tabContainerStyle: ViewStyle | null = isWidthSet\n    ? null\n    : { width: defaultTabWidth };\n\n  const scene = { route };\n\n  let accessibilityLabel = getAccessibilityLabel(scene);\n\n  accessibilityLabel =\n    typeof accessibilityLabel !== 'undefined'\n      ? accessibilityLabel\n      : getLabelText(scene);\n\n  const badge = renderBadge ? renderBadge(scene) : null;\n\n  return (\n    <PlatformPressable\n      android_ripple={{ borderless: true }}\n      testID={getTestID(scene)}\n      accessible={getAccessible(scene)}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityRole=\"tab\"\n      accessibilityState={{ selected: isFocused }}\n      // @ts-ignore: this is to support older React Native versions\n      accessibilityStates={isFocused ? ['selected'] : []}\n      pressColor={pressColor}\n      pressOpacity={pressOpacity}\n      delayPressIn={0}\n      onLayout={onLayout}\n      onPress={onPress}\n      onLongPress={onLongPress}\n      style={[styles.pressable, tabContainerStyle]}\n    >\n      <View pointerEvents=\"none\" style={[styles.item, tabStyle]}>\n        {icon}\n        {label}\n        {badge != null ? <View style={styles.badge}>{badge}</View> : null}\n      </View>\n    </PlatformPressable>\n  );\n};\n\nconst MemoizedTabBarItemInternal = React.memo(\n  TabBarItemInternal\n) as typeof TabBarItemInternal;\n\nfunction TabBarItem<T extends Route>(props: Props<T>) {\n  const { onPress, onLongPress, onLayout, navigationState, route, ...rest } =\n    props;\n  const onPressLatest = useLatestCallback(onPress);\n  const onLongPressLatest = useLatestCallback(onLongPress);\n  const onLayoutLatest = useLatestCallback(onLayout ? onLayout : () => {});\n\n  const tabIndex = navigationState.routes.indexOf(route);\n\n  return (\n    <MemoizedTabBarItemInternal\n      {...rest}\n      onPress={onPressLatest}\n      onLayout={onLayoutLatest}\n      onLongPress={onLongPressLatest}\n      isFocused={navigationState.index === tabIndex}\n      route={route}\n      index={tabIndex}\n      routesLength={navigationState.routes.length}\n    />\n  );\n}\n\nexport default TabBarItem;\n\nconst styles = StyleSheet.create({\n  label: {\n    margin: 4,\n    backgroundColor: 'transparent',\n    textTransform: 'uppercase',\n  },\n  icon: {\n    margin: 2,\n  },\n  item: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: 10,\n    minHeight: 48,\n  },\n  badge: {\n    position: 'absolute',\n    top: 0,\n    right: 0,\n  },\n  pressable: {\n    // The label is not pressable on Windows\n    // Adding backgroundColor: 'transparent' seems to fix it\n    backgroundColor: 'transparent',\n  },\n});\n"],"mappings":"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"}

package/lib/typescript/SceneMap.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import type { SceneRendererProps } from './types';
+declare type SceneProps = {
+    route: any;
+} & Omit<SceneRendererProps, 'layout'>;
 export default function SceneMap<T extends any>(scenes: {
     [key: string]: React.ComponentType<T>;
-}): ({ route, jumpTo, position }: SceneRendererProps & {
-    route: any;
-}) => JSX.Element;
+}): ({ route, jumpTo, position }: SceneProps) => JSX.Element;
+export {};

package/lib/typescript/SceneView.d.ts

@@ -11,22 +11,5 @@ declare type Props<T extends Route> = SceneRendererProps & EventEmitterProps & {
     }) => React.ReactNode;
     style?: StyleProp<ViewStyle>;
 };
-declare type State = {
-    loading: boolean;
-};
-export default class SceneView<T extends Route> extends React.Component<Props<T>, State> {
-    static getDerivedStateFromProps(props: Props<Route>, state: State): {
-        loading: boolean;
-    } | null;
-    state: {
-        loading: boolean;
-    };
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Props<T>, prevState: State): void;
-    componentWillUnmount(): void;
-    private timerHandler;
-    private unsubscribe;
-    private handleEnter;
-    render(): JSX.Element;
-}
+export default function SceneView<T extends Route>({ children, navigationState, lazy, layout, index, lazyPreloadDistance, addEnterListener, style, }: Props<T>): JSX.Element;
 export {};

package/lib/typescript/TabBar.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { Props as TabBarItemProps } from './TabBarItem';
 import { Props as IndicatorProps } from './TabBarIndicator';
-import type { Route, Scene, SceneRendererProps, NavigationState, Layout, Event } from './types';
+import type { Route, Scene, SceneRendererProps, NavigationState, Event } from './types';
 export declare type Props<T extends Route> = SceneRendererProps & {
     navigationState: NavigationState<T>;
     scrollEnabled?: boolean;
@@ -11,10 +11,10 @@ export declare type Props<T extends Route> = SceneRendererProps & {
     inactiveColor?: string;
     pressColor?: string;
     pressOpacity?: number;
-    getLabelText: (scene: Scene<T>) => string | undefined;
-    getAccessible: (scene: Scene<T>) => boolean | undefined;
-    getAccessibilityLabel: (scene: Scene<T>) => string | undefined;
-    getTestID: (scene: Scene<T>) => string | undefined;
+    getLabelText?: (scene: Scene<T>) => string | undefined;
+    getAccessible?: (scene: Scene<T>) => boolean | undefined;
+    getAccessibilityLabel?: (scene: Scene<T>) => string | undefined;
+    getTestID?: (scene: Scene<T>) => string | undefined;
     renderLabel?: (scene: Scene<T> & {
         focused: boolean;
         color: string;
@@ -24,7 +24,7 @@ export declare type Props<T extends Route> = SceneRendererProps & {
         color: string;
     }) => React.ReactNode;
     renderBadge?: (scene: Scene<T>) => React.ReactNode;
-    renderIndicator: (props: IndicatorProps<T>) => React.ReactNode;
+    renderIndicator?: (props: IndicatorProps<T>) => React.ReactNode;
     renderTabBarItem?: (props: TabBarItemProps<T> & {
         key: string;
     }) => React.ReactElement;
@@ -38,35 +38,4 @@ export declare type Props<T extends Route> = SceneRendererProps & {
     style?: StyleProp<ViewStyle>;
     gap?: number;
 };
-declare type State = {
-    layout: Layout;
-    tabWidths: {
-        [key: string]: number;
-    };
-};
-export default class TabBar<T extends Route> extends React.Component<Props<T>, State> {
-    static defaultProps: {
-        getLabelText: ({ route }: Scene<Route>) => string | undefined;
-        getAccessible: ({ route }: Scene<Route>) => boolean;
-        getAccessibilityLabel: ({ route }: Scene<Route>) => string | undefined;
-        getTestID: ({ route }: Scene<Route>) => string | undefined;
-        renderIndicator: (props: IndicatorProps<Route>) => JSX.Element;
-        gap: number;
-    };
-    state: State;
-    componentDidUpdate(prevProps: Props<T>, prevState: State): void;
-    private measuredTabWidths;
-    private scrollAmount;
-    private flatListRef;
-    private getFlattenedTabWidth;
-    private getComputedTabWidth;
-    private getMaxScrollDistance;
-    private getTabBarWidth;
-    private normalizeScrollValue;
-    private getScrollAmount;
-    private resetScroll;
-    private handleLayout;
-    private getTranslateX;
-    render(): JSX.Element;
-}
-export {};
+export default function TabBar<T extends Route>({ getLabelText, getAccessible, getAccessibilityLabel, getTestID, renderIndicator, gap, scrollEnabled, jumpTo, navigationState, position, activeColor, bounces, contentContainerStyle, inactiveColor, indicatorContainerStyle, indicatorStyle, labelStyle, onTabLongPress, onTabPress, pressColor, pressOpacity, renderBadge, renderIcon, renderLabel, renderTabBarItem, style, tabStyle, }: Props<T>): JSX.Element;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-tab-view",
-  "version": "3.2.1",
+  "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

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

@@ -283,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) => (