@react-navigation/bottom-tabs 7.19.2 → 7.21.0

package/src/views/BottomTabView.tsx

@@ -5,6 +5,7 @@ import {
   Screen,
 } from '@react-navigation/elements';
 import {
+  type NavigationRoute,
   type ParamListBase,
   StackActions,
   type TabNavigationState,
@@ -19,6 +20,7 @@ import {
 } from '../TransitionConfigs/TransitionPresets';
 import type {
   BottomTabBarProps,
+  BottomTabDescriptor,
   BottomTabDescriptorMap,
   BottomTabHeaderProps,
   BottomTabNavigationConfig,
@@ -187,9 +189,7 @@ export function BottomTabView(props: Props) {
           // Delay clearing so the previous screen stays attached
           // This will give time for any native logic to run
           timer = setTimeout(() => {
-            setLastUpdate((update) =>
-              update.animating ? { ...update, animating: false } : update
-            );
+            setLastUpdate({ current: focusedRouteKey, animating: false });
           }, 32);
         }
       });
@@ -285,12 +285,7 @@ export function BottomTabView(props: Props) {
       >
         {routes.map((route, index) => {
           const descriptor = descriptors[route.key];
-          const {
-            lazy = true,
-            animation = 'none',
-            sceneStyleInterpolator = NAMED_TRANSITIONS_PRESETS[animation]
-              .sceneStyleInterpolator,
-          } = descriptor.options;
+          const { lazy = true } = descriptor.options;
           const isFocused = state.index === index;
           const isPreloaded = state.preloadedRouteKeys.includes(route.key);
 
@@ -304,73 +299,23 @@ export function BottomTabView(props: Props) {
             return null;
           }
 
-          const {
-            freezeOnBlur,
-            header = ({ layout, options }: BottomTabHeaderProps) => (
-              <Header
-                {...options}
-                layout={layout}
-                title={getHeaderTitle(options, route.name)}
-              />
-            ),
-            headerShown,
-            headerStatusBarHeight,
-            headerTransparent,
-            sceneStyle: customSceneStyle,
-          } = descriptor.options;
-
-          const { sceneStyle } =
-            sceneStyleInterpolator?.({
-              current: {
-                progress: tabAnims[route.key],
-              },
-            }) ?? {};
-
-          const animationEnabled = hasAnimation(descriptor.options);
           const isAnimatingRoute =
             lastUpdate.animating &&
             (lastUpdate.previous === route.key ||
               lastUpdate.current === route.key);
 
-          const activityState = isFocused
-            ? STATE_ON_TOP // the screen is on top after the transition
-            : animationEnabled && isAnimatingRoute
-              ? STATE_TRANSITIONING_OR_BELOW_TOP // screen visible during transition
-              : STATE_INACTIVE;
-
           return (
-            <MaybeScreen
+            <TabScene
               key={route.key}
-              style={[StyleSheet.absoluteFill, { zIndex: isFocused ? 0 : -1 }]}
-              active={activityState}
-              enabled={detachInactiveScreens}
-              freezeOnBlur={freezeOnBlur}
-              shouldFreeze={activityState === STATE_INACTIVE && !isPreloaded}
-              pointerEvents={isFocused ? 'box-none' : 'none'}
-            >
-              <BottomTabBarHeightContext.Provider
-                value={tabBarPosition === 'bottom' ? tabBarHeight : 0}
-              >
-                <Screen
-                  focused={isFocused}
-                  route={descriptor.route}
-                  navigation={descriptor.navigation}
-                  headerShown={headerShown}
-                  headerStatusBarHeight={headerStatusBarHeight}
-                  headerTransparent={headerTransparent}
-                  header={header({
-                    layout: dimensions,
-                    route: descriptor.route,
-                    navigation:
-                      descriptor.navigation as BottomTabNavigationProp<ParamListBase>,
-                    options: descriptor.options,
-                  })}
-                  style={[customSceneStyle, animationEnabled && sceneStyle]}
-                >
-                  {descriptor.render()}
-                </Screen>
-              </BottomTabBarHeightContext.Provider>
-            </MaybeScreen>
+              route={route}
+              descriptor={descriptor}
+              isFocused={isFocused}
+              isPreloaded={isPreloaded}
+              isAnimatingRoute={isAnimatingRoute}
+              tabAnimation={tabAnims[route.key]}
+              tabBarHeight={tabBarPosition === 'bottom' ? tabBarHeight : 0}
+              detachInactiveScreens={detachInactiveScreens}
+            />
           );
         })}
       </MaybeScreenContainer>
@@ -381,6 +326,93 @@ export function BottomTabView(props: Props) {
   );
 }
 
+type TabSceneProps = {
+  route: NavigationRoute<ParamListBase, string>;
+  descriptor: BottomTabDescriptor;
+  isFocused: boolean;
+  isPreloaded: boolean;
+  isAnimatingRoute: boolean;
+  tabAnimation: Animated.Value;
+  tabBarHeight: number;
+  detachInactiveScreens: boolean;
+};
+
+const TabScene = React.memo(function TabScene({
+  route,
+  descriptor,
+  isFocused,
+  isPreloaded,
+  isAnimatingRoute,
+  tabAnimation,
+  tabBarHeight,
+  detachInactiveScreens,
+}: TabSceneProps) {
+  const {
+    animation = 'none',
+    sceneStyleInterpolator = NAMED_TRANSITIONS_PRESETS[animation]
+      .sceneStyleInterpolator,
+    freezeOnBlur,
+    header = ({ layout, options }: BottomTabHeaderProps) => (
+      <Header
+        {...options}
+        layout={layout}
+        title={getHeaderTitle(options, route.name)}
+      />
+    ),
+    headerShown,
+    headerStatusBarHeight,
+    headerTransparent,
+    sceneStyle: customSceneStyle,
+  } = descriptor.options;
+
+  const { sceneStyle } =
+    sceneStyleInterpolator?.({
+      current: {
+        progress: tabAnimation,
+      },
+    }) ?? {};
+
+  const animationEnabled = hasAnimation(descriptor.options);
+
+  const activityState = isFocused
+    ? STATE_ON_TOP // the screen is on top after the transition
+    : animationEnabled && isAnimatingRoute
+      ? STATE_TRANSITIONING_OR_BELOW_TOP // screen visible during transition
+      : STATE_INACTIVE;
+
+  return (
+    <MaybeScreen
+      style={[StyleSheet.absoluteFill, { zIndex: isFocused ? 0 : -1 }]}
+      active={activityState}
+      enabled={detachInactiveScreens}
+      freezeOnBlur={freezeOnBlur}
+      shouldFreeze={activityState === STATE_INACTIVE && !isPreloaded}
+      pointerEvents={isFocused ? 'box-none' : 'none'}
+    >
+      <BottomTabBarHeightContext.Provider value={tabBarHeight}>
+        <Screen
+          focused={isFocused}
+          route={descriptor.route}
+          navigation={descriptor.navigation}
+          headerShown={headerShown}
+          headerStatusBarHeight={headerStatusBarHeight}
+          headerTransparent={headerTransparent}
+          header={header({
+            layout: SafeAreaProviderCompat.initialMetrics.frame,
+            route: descriptor.route,
+            navigation:
+              descriptor.navigation as BottomTabNavigationProp<ParamListBase>,
+            options: descriptor.options,
+          })}
+          style={[customSceneStyle, animationEnabled && sceneStyle]}
+        >
+          {descriptor.render()}
+        </Screen>
+      </BottomTabBarHeightContext.Provider>
+    </MaybeScreen>
+  );
+});
+
 const styles = StyleSheet.create({
   screens: {
     flex: 1,

package/src/views/TabBarIcon.tsx

@@ -13,6 +13,7 @@ type Props = {
   route: Route<string>;
   variant: 'uikit' | 'material';
   size: 'compact' | 'regular';
+  iconSize?: number;
   badge?: string | number;
   badgeStyle?: StyleProp<TextStyle>;
   activeOpacity: number;
@@ -44,6 +45,7 @@ export function TabBarIcon({
   route: _,
   variant,
   size,
+  iconSize: iconSizeOverride,
   badge,
   badgeStyle,
   activeOpacity,
@@ -55,11 +57,12 @@ export function TabBarIcon({
   style,
 }: Props) {
   const iconSize =
-    variant === 'material'
+    iconSizeOverride ??
+    (variant === 'material'
       ? ICON_SIZE_MATERIAL
       : size === 'compact'
         ? ICON_SIZE_ROUND_COMPACT
-        : ICON_SIZE_ROUND;
+        : ICON_SIZE_ROUND);
 
   // We render the icon twice at the same position on top of each other:
   // active and inactive one, so we can fade between them.
@@ -71,6 +74,10 @@ export function TabBarIcon({
           : size === 'compact'
             ? styles.wrapperUikitCompact
             : styles.wrapperUikit,
+        iconSizeOverride != null && {
+          width: iconSizeOverride,
+          height: iconSizeOverride,
+        },
         style,
       ]}
     >