@react-navigation/bottom-tabs 7.19.2 → 7.21.0

package/lib/module/unstable/Deferred.js

@@ -19,21 +19,14 @@ export function Deferred({
   visible,
   children
 }) {
-  const [rendered, setRendered] = React.useState(lazy ? visible : false);
+  const [rendered, setRendered] = React.useState(visible);
   const shouldRenderDeferred = !(lazy || visible || rendered);
-  React.useEffect(() => {
-    if (shouldRenderDeferred === false) {
-      return;
-    }
-    React.startTransition(() => {
-      setRendered(true);
-    });
-  }, [shouldRenderDeferred]);
+  const canRenderDeferred = React.useDeferredValue(shouldRenderDeferred, false);
   if (visible && rendered === false) {
     setRendered(true);
     return children;
   }
-  if (rendered) {
+  if (rendered || canRenderDeferred) {
     return children;
   }
   return null;

package/lib/module/unstable/Deferred.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Deferred","lazy","visible","children","rendered","setRendered","useState","shouldRenderDeferred","useEffect","startTransition"],"sourceRoot":"../../../src","sources":["unstable/Deferred.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAiB9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQA,CAAC;EAAEC,IAAI;EAAEC,OAAO;EAAEC;AAAgB,CAAC,EAAE;EAC3D,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGN,KAAK,CAACO,QAAQ,CAACL,IAAI,GAAGC,OAAO,GAAG,KAAK,CAAC;EAEtE,MAAMK,oBAAoB,GAAG,EAAEN,IAAI,IAAIC,OAAO,IAAIE,QAAQ,CAAC;EAE3DL,KAAK,CAACS,SAAS,CAAC,MAAM;IACpB,IAAID,oBAAoB,KAAK,KAAK,EAAE;MAClC;IACF;IAEAR,KAAK,CAACU,eAAe,CAAC,MAAM;MAC1BJ,WAAW,CAAC,IAAI,CAAC;IACnB,CAAC,CAAC;EACJ,CAAC,EAAE,CAACE,oBAAoB,CAAC,CAAC;EAE1B,IAAIL,OAAO,IAAIE,QAAQ,KAAK,KAAK,EAAE;IACjCC,WAAW,CAAC,IAAI,CAAC;IAEjB,OAAOF,QAAQ;EACjB;EAEA,IAAIC,QAAQ,EAAE;IACZ,OAAOD,QAAQ;EACjB;EAEA,OAAO,IAAI;AACb","ignoreList":[]}
+{"version":3,"names":["React","Deferred","lazy","visible","children","rendered","setRendered","useState","shouldRenderDeferred","canRenderDeferred","useDeferredValue"],"sourceRoot":"../../../src","sources":["unstable/Deferred.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAiB9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQA,CAAC;EAAEC,IAAI;EAAEC,OAAO;EAAEC;AAAgB,CAAC,EAAE;EAC3D,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGN,KAAK,CAACO,QAAQ,CAACJ,OAAO,CAAC;EAEvD,MAAMK,oBAAoB,GAAG,EAAEN,IAAI,IAAIC,OAAO,IAAIE,QAAQ,CAAC;EAE3D,MAAMI,iBAAiB,GAAGT,KAAK,CAACU,gBAAgB,CAACF,oBAAoB,EAAE,KAAK,CAAC;EAE7E,IAAIL,OAAO,IAAIE,QAAQ,KAAK,KAAK,EAAE;IACjCC,WAAW,CAAC,IAAI,CAAC;IAEjB,OAAOF,QAAQ;EACjB;EAEA,IAAIC,QAAQ,IAAII,iBAAiB,EAAE;IACjC,OAAOL,QAAQ;EACjB;EAEA,OAAO,IAAI;AACb","ignoreList":[]}

package/lib/module/unstable/NativeBottomTabView.native.js

@@ -12,6 +12,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const meta = {
   type: 'native-tabs'
 };
+const SUPPORTS_PROMINENT_TAB = Platform.OS === 'ios' && parseInt(Platform.Version, 10) >= 27;
 function reducer(state, action) {
   switch (action.type) {
     case 'CONFIRM_STATE':
@@ -71,7 +72,8 @@ export function NativeBottomTabView({
     const {
       selectedScreenKey,
       provenance,
-      actionOrigin
+      actionOrigin,
+      isRepeated
     } = event.nativeEvent;
     const confirmed = {
       routeKey: selectedScreenKey,
@@ -83,9 +85,19 @@ export function NativeBottomTabView({
       return;
     }
     if (actionOrigin === 'user') {
+      const {
+        tabBarRepeatedPressBehavior
+      } = descriptors[route.key].options;
       navigation.emit({
         type: 'tabPress',
-        target: route.key
+        target: route.key,
+        data: {
+          origin: 'native',
+          behavior: {
+            scrollToTop: isRepeated && tabBarRepeatedPressBehavior?.scrollToTop !== false,
+            popToTop: isRepeated && tabBarRepeatedPressBehavior?.popToTop !== false
+          }
+        }
       });
     }
     if (actionOrigin === 'programmatic-js' || focusedRouteKey === route.key) {
@@ -138,7 +150,14 @@ export function NativeBottomTabView({
     });
     navigation.emit({
       type: 'tabPress',
-      target: preventedScreenKey
+      target: preventedScreenKey,
+      data: {
+        origin: 'native',
+        behavior: {
+          scrollToTop: false,
+          popToTop: false
+        }
+      }
     });
   };
   const currentOptions = descriptors[state.routes[state.index].key]?.options;
@@ -155,38 +174,27 @@ export function NativeBottomTabView({
     fontStyle,
     color: fontColor
   } = currentOptions.tabBarLabelStyle || {};
-  const activeTintColor = currentOptions.tabBarActiveTintColor ?? colors.primary;
-  const inactiveTintColor = currentOptions.tabBarInactiveTintColor ?? Platform.select({
-    ios: PlatformColor('label'),
-    default: colors.text
-  });
-  const activeIndicatorColor = currentOptions?.tabBarActiveIndicatorColor ?? typeof activeTintColor === 'string' ? Color(activeTintColor)?.alpha(0.1).string() : undefined;
-  const onTransitionStart = ({
-    closing,
-    route
-  }) => {
-    navigation.emit({
-      type: 'transitionStart',
-      data: {
-        closing
-      },
-      target: route.key
-    });
-  };
-  const onTransitionEnd = ({
-    closing,
-    route
-  }) => {
-    navigation.emit({
-      type: 'transitionEnd',
-      data: {
-        closing
-      },
-      target: route.key
+  const {
+    activeIndicatorColor,
+    activeTintColor,
+    inactiveTintColor
+  } = React.useMemo(() => {
+    const activeTintColor = currentOptions.tabBarActiveTintColor ?? colors.primary;
+    const inactiveTintColor = currentOptions.tabBarInactiveTintColor ?? Platform.select({
+      ios: PlatformColor('label'),
+      default: colors.text
     });
-  };
+    const activeIndicatorColor = currentOptions?.tabBarActiveIndicatorColor ?? (typeof activeTintColor === 'string' ? Color(activeTintColor)?.alpha(0.1).string() : undefined);
+    return {
+      activeIndicatorColor,
+      activeTintColor,
+      inactiveTintColor
+    };
+  }, [currentOptions?.tabBarActiveIndicatorColor, currentOptions.tabBarActiveTintColor, currentOptions.tabBarInactiveTintColor, colors.primary, colors.text]);
   const tabBarControllerMode = currentOptions.tabBarControllerMode === 'auto' ? 'automatic' : currentOptions.tabBarControllerMode;
   const tabBarMinimizeBehavior = currentOptions.tabBarMinimizeBehavior === 'auto' ? 'automatic' : currentOptions.tabBarMinimizeBehavior === 'none' ? 'never' : currentOptions.tabBarMinimizeBehavior;
+  const tabBarSidebarPreferredPlacement = currentOptions.tabBarSidebarPreferredPlacement === 'auto' ? 'automatic' : currentOptions.tabBarSidebarPreferredPlacement;
+  const prominentScreenKey = SUPPORTS_PROMINENT_TAB ? state.routes.find(route => descriptors[route.key]?.options.tabBarRole === 'prominent')?.key : undefined;
   const shouldHideTabBar = currentOptions.tabBarStyle?.display === 'none';
   const bottomAccessory = currentOptions.bottomAccessory;
   return /*#__PURE__*/_jsx(SafeAreaProviderCompat, {
@@ -205,173 +213,265 @@ export function NativeBottomTabView({
         backgroundColor: colors.background
       },
       ios: {
+        prominentScreenKey,
         bottomAccessory: bottomAccessory ? environment => bottomAccessory({
           placement: environment
         }) : undefined,
+        tabBarHiddenAnimationEnabled: currentOptions.tabBarVisibilityAnimationEnabled,
         tabBarControllerMode,
+        tabBarSidebarPreferredPlacement,
         tabBarMinimizeBehavior,
         tabBarTintColor: activeTintColor
       },
       children: state.routes.map((route, index) => {
-        const {
-          options,
-          render,
-          navigation
-        } = descriptors[route.key];
+        const descriptor = descriptors[route.key];
         const isFocused = state.index === index;
         const isPreloaded = state.preloadedRouteKeys.includes(route.key);
         const {
-          title,
-          lazy = false,
-          tabBarLabel,
-          tabBarSelectionEnabled,
-          tabBarBadgeStyle,
-          tabBarIcon,
-          tabBarBadge,
-          tabBarSystemItem,
-          tabBarBlurEffect = dark ? 'systemMaterialDark' : 'systemMaterial',
-          tabBarStyle,
-          overrideScrollViewContentInsetAdjustmentBehavior
-        } = options;
-        const {
-          backgroundColor: tabBarBackgroundColor,
-          shadowColor: tabBarShadowColor
-        } = tabBarStyle || {};
-        const tabTitle =
-        // On iOS, `systemItem` already provides a localized label
-        // So we should only use `tabBarLabel` if explicitly provided
-        Platform.OS === 'ios' && tabBarSystemItem != null ? tabBarLabel : getLabel({
-          label: tabBarLabel,
-          title
-        }, route.name);
-        const badgeBackgroundColor = tabBarBadgeStyle?.backgroundColor ?? colors.notification;
-        const badgeTextColor = tabBarBadgeStyle?.color ?? (typeof badgeBackgroundColor === 'string' ? Color(badgeBackgroundColor).isLight() ? 'black' : 'white' : undefined);
-        const tabItemAppearance = {
-          tabBarItemTitleFontFamily: fontFamily,
-          tabBarItemTitleFontSize: fontSize,
-          tabBarItemTitleFontWeight: fontWeight,
-          tabBarItemTitleFontStyle: fontStyle,
-          tabBarItemTitleFontColor: inactiveTintColor ?? fontColor,
-          tabBarItemIconColor: inactiveTintColor,
-          tabBarItemBadgeBackgroundColor: badgeBackgroundColor
-        };
-        const normalTabItemAppearance = {
-          tabBarItemTitleFontColor: inactiveTintColor ?? fontColor,
-          tabBarItemIconColor: inactiveTintColor
-        };
-        const selectedTabItemAppearance = {
-          tabBarItemTitleFontColor: activeTintColor,
-          tabBarItemIconColor: activeTintColor
-        };
-        const icon = typeof tabBarIcon === 'function' ? getPlatformIcon(tabBarIcon({
-          focused: false
-        })) : tabBarIcon != null ? getPlatformIcon(tabBarIcon) : undefined;
-        const selectedIcon = typeof tabBarIcon === 'function' ? getPlatformIcon(tabBarIcon({
-          focused: true
-        })) : undefined;
-        return /*#__PURE__*/_jsx(Tabs.Screen, {
-          onWillDisappear: () => onTransitionStart({
-            closing: true,
-            route
-          }),
-          onWillAppear: () => onTransitionStart({
-            closing: false,
-            route
-          }),
-          onDidAppear: () => onTransitionEnd({
-            closing: false,
-            route
-          }),
-          onDidDisappear: () => onTransitionEnd({
-            closing: true,
-            route
-          }),
-          screenKey: route.key,
-          preventNativeSelection: tabBarSelectionEnabled === false,
-          badgeValue: tabBarBadge?.toString(),
-          title: tabTitle,
-          nativeContainerStyle: {
-            backgroundColor: colors.background
-          },
-          specialEffects: {
-            repeatedTabSelection: {
-              popToRoot: true,
-              scrollToTop: true
-            }
-          },
-          android: {
-            icon: icon?.android ?? icon?.shared,
-            selectedIcon: selectedIcon?.android ?? selectedIcon?.shared,
-            standardAppearance: {
-              tabBarBackgroundColor: tabBarBackgroundColor ?? colors.card,
-              tabBarItemRippleColor: currentOptions?.tabBarRippleColor,
-              tabBarItemLabelVisibilityMode: currentOptions?.tabBarLabelVisibilityMode,
-              normal: normalTabItemAppearance,
-              selected: selectedTabItemAppearance,
-              tabBarItemActiveIndicatorColor: activeIndicatorColor,
-              tabBarItemActiveIndicatorEnabled: currentOptions?.tabBarActiveIndicatorEnabled,
-              tabBarItemTitleFontFamily: fontFamily,
-              tabBarItemTitleFontWeight: fontWeight,
-              tabBarItemTitleSmallLabelFontSize: fontSize,
-              tabBarItemTitleLargeLabelFontSize: fontSize,
-              tabBarItemTitleFontStyle: fontStyle,
-              tabBarItemBadgeBackgroundColor: badgeBackgroundColor,
-              tabBarItemBadgeTextColor: badgeTextColor
-            }
-          },
-          ios: {
-            icon: icon?.ios ?? icon?.shared,
-            selectedIcon: selectedIcon?.ios ?? selectedIcon?.shared,
-            systemItem: tabBarSystemItem,
-            scrollEdgeAppearance: {
-              tabBarBackgroundColor,
-              tabBarShadowColor,
-              tabBarBlurEffect,
-              stacked: {
-                normal: tabItemAppearance
-              },
-              inline: {
-                normal: tabItemAppearance
-              },
-              compactInline: {
-                normal: tabItemAppearance
-              }
-            },
-            standardAppearance: {
-              tabBarBackgroundColor,
-              tabBarShadowColor,
-              tabBarBlurEffect,
-              stacked: {
-                normal: tabItemAppearance
-              },
-              inline: {
-                normal: tabItemAppearance
-              },
-              compactInline: {
-                normal: tabItemAppearance
-              }
-            },
-            overrideScrollViewContentInsetAdjustmentBehavior
-          },
-          children: /*#__PURE__*/_jsx(Deferred, {
-            lazy: lazy,
-            visible: isFocused || isPreloaded,
-            children: /*#__PURE__*/_jsx(ScreenWithHeader, {
-              isFocused: isFocused,
-              route: route,
-              navigation: navigation,
-              options: options,
-              children: /*#__PURE__*/_jsx(NavigationMetaContext.Provider, {
-                value: meta,
-                children: render()
-              })
-            })
-          })
+          lazy = false
+        } = descriptor.options;
+        return /*#__PURE__*/_jsx(TabScene, {
+          route: route,
+          descriptor: descriptor,
+          navigation: navigation,
+          isFocused: isFocused,
+          lazy: lazy,
+          visible: isFocused || isPreloaded,
+          fontFamily: fontFamily,
+          fontWeight: fontWeight,
+          fontSize: fontSize,
+          fontStyle: fontStyle,
+          fontColor: fontColor,
+          activeTintColor: activeTintColor,
+          inactiveTintColor: inactiveTintColor,
+          activeIndicatorColor: activeIndicatorColor,
+          rippleColor: currentOptions.tabBarRippleColor,
+          labelVisibilityMode: currentOptions.tabBarLabelVisibilityMode,
+          activeIndicatorEnabled: currentOptions.tabBarActiveIndicatorEnabled
         }, route.key);
       })
     })
   });
 }
+const TabScene = /*#__PURE__*/React.memo(function TabScene({
+  route,
+  descriptor,
+  navigation,
+  isFocused,
+  lazy,
+  visible,
+  fontFamily,
+  fontWeight,
+  fontSize,
+  fontStyle,
+  fontColor,
+  activeTintColor,
+  inactiveTintColor,
+  activeIndicatorColor,
+  rippleColor,
+  labelVisibilityMode,
+  activeIndicatorEnabled
+}) {
+  const {
+    dark,
+    colors
+  } = useTheme();
+  const onTransitionStart = ({
+    closing,
+    route
+  }) => {
+    navigation.emit({
+      type: 'transitionStart',
+      data: {
+        closing
+      },
+      target: route.key
+    });
+  };
+  const onTransitionEnd = ({
+    closing,
+    route
+  }) => {
+    navigation.emit({
+      type: 'transitionEnd',
+      data: {
+        closing
+      },
+      target: route.key
+    });
+  };
+  const {
+    options,
+    render
+  } = descriptor;
+  const {
+    title,
+    tabBarLabel,
+    tabBarLabelPositionAdjustment,
+    tabBarSelectionEnabled,
+    tabBarRepeatedPressBehavior,
+    tabBarBadgeStyle,
+    tabBarIcon,
+    tabBarIconSize,
+    tabBarActiveIndicatorWidth,
+    tabBarActiveIndicatorHeight,
+    tabBarBadge,
+    tabBarSystemItem,
+    tabBarRole,
+    tabBarSearchAutoFocus,
+    tabBarBlurEffect = dark ? 'systemMaterialDark' : 'systemMaterial',
+    tabBarStyle,
+    overrideScrollViewContentInsetAdjustmentBehavior
+  } = options;
+  const systemItem = tabBarSystemItem ?? (
+  // Setting the `role` to 'search' doesn't add title and icon automatically
+  // So we also set `tabBarSystemItem` to 'search' to match SwiftUI's behavior
+  tabBarRole === 'search' ? 'search' : undefined);
+  const {
+    backgroundColor: tabBarBackgroundColor,
+    shadowColor: tabBarShadowColor
+  } = tabBarStyle || {};
+  const tabTitle =
+  // On iOS, `systemItem` already provides a localized label
+  // So we should only use `tabBarLabel` if explicitly provided
+  Platform.OS === 'ios' && systemItem != null ? tabBarLabel : getLabel({
+    label: tabBarLabel,
+    title
+  }, route.name);
+  const badgeBackgroundColor = tabBarBadgeStyle?.backgroundColor ?? colors.notification;
+  const badgeTextColor = tabBarBadgeStyle?.color ?? (typeof badgeBackgroundColor === 'string' ? Color(badgeBackgroundColor).isLight() ? 'black' : 'white' : undefined);
+  const tabItemAppearance = {
+    tabBarItemTitleFontFamily: fontFamily,
+    tabBarItemTitleFontSize: fontSize,
+    tabBarItemTitleFontWeight: fontWeight,
+    tabBarItemTitleFontStyle: fontStyle,
+    tabBarItemTitleFontColor: inactiveTintColor ?? fontColor,
+    tabBarItemIconColor: inactiveTintColor,
+    tabBarItemBadgeBackgroundColor: badgeBackgroundColor
+  };
+  const tabItemLayoutAppearance = {
+    stacked: {
+      normal: {
+        ...tabItemAppearance,
+        tabBarItemTitlePositionAdjustment: tabBarLabelPositionAdjustment?.stacked
+      }
+    },
+    inline: {
+      normal: {
+        ...tabItemAppearance,
+        tabBarItemTitlePositionAdjustment: tabBarLabelPositionAdjustment?.inline
+      }
+    },
+    compactInline: {
+      normal: {
+        ...tabItemAppearance,
+        tabBarItemTitlePositionAdjustment: tabBarLabelPositionAdjustment?.compactInline
+      }
+    }
+  };
+  const normalTabItemAppearance = {
+    tabBarItemTitleFontColor: inactiveTintColor ?? fontColor,
+    tabBarItemIconColor: inactiveTintColor
+  };
+  const selectedTabItemAppearance = {
+    tabBarItemTitleFontColor: activeTintColor,
+    tabBarItemIconColor: activeTintColor
+  };
+  const icon = typeof tabBarIcon === 'function' ? getPlatformIcon(tabBarIcon({
+    focused: false
+  })) : tabBarIcon != null ? getPlatformIcon(tabBarIcon) : undefined;
+  const selectedIcon = typeof tabBarIcon === 'function' ? getPlatformIcon(tabBarIcon({
+    focused: true
+  })) : undefined;
+  return /*#__PURE__*/_jsx(Tabs.Screen, {
+    onWillDisappear: () => onTransitionStart({
+      closing: true,
+      route
+    }),
+    onWillAppear: () => onTransitionStart({
+      closing: false,
+      route
+    }),
+    onDidAppear: () => onTransitionEnd({
+      closing: false,
+      route
+    }),
+    onDidDisappear: () => onTransitionEnd({
+      closing: true,
+      route
+    }),
+    screenKey: route.key,
+    preventNativeSelection: tabBarSelectionEnabled === false,
+    badgeValue: tabBarBadge?.toString(),
+    title: tabTitle,
+    style: {
+      backgroundColor: colors.background
+    },
+    specialEffects: {
+      repeatedTabSelection: {
+        popToRoot: tabBarRepeatedPressBehavior?.popToTop !== false,
+        scrollToTop: tabBarRepeatedPressBehavior?.scrollToTop !== false
+      }
+    },
+    android: {
+      icon: icon?.android ?? icon?.shared,
+      selectedIcon: selectedIcon?.android ?? selectedIcon?.shared,
+      standardAppearance: {
+        tabBarBackgroundColor: tabBarBackgroundColor ?? colors.card,
+        tabBarItemRippleColor: rippleColor,
+        tabBarItemLabelVisibilityMode: labelVisibilityMode,
+        normal: normalTabItemAppearance,
+        selected: selectedTabItemAppearance,
+        tabBarItemIconSize: tabBarIconSize,
+        tabBarItemActiveIndicatorColor: activeIndicatorColor,
+        tabBarItemActiveIndicatorEnabled: activeIndicatorEnabled,
+        tabBarItemActiveIndicatorWidth: tabBarActiveIndicatorWidth,
+        tabBarItemActiveIndicatorHeight: tabBarActiveIndicatorHeight,
+        tabBarItemTitleFontFamily: fontFamily,
+        tabBarItemTitleFontWeight: fontWeight,
+        tabBarItemTitleSmallLabelFontSize: fontSize,
+        tabBarItemTitleLargeLabelFontSize: fontSize,
+        tabBarItemTitleFontStyle: fontStyle,
+        tabBarItemBadgeBackgroundColor: badgeBackgroundColor,
+        tabBarItemBadgeTextColor: badgeTextColor
+      }
+    },
+    ios: {
+      icon: icon?.ios ?? icon?.shared,
+      selectedIcon: selectedIcon?.ios ?? selectedIcon?.shared,
+      systemItem,
+      role: tabBarRole === 'search' ? tabBarRole : undefined,
+      automaticallyActivatesSearch: tabBarSearchAutoFocus,
+      scrollEdgeAppearance: {
+        tabBarBackgroundColor,
+        tabBarShadowColor,
+        tabBarBlurEffect,
+        ...tabItemLayoutAppearance
+      },
+      standardAppearance: {
+        tabBarBackgroundColor,
+        tabBarShadowColor,
+        tabBarBlurEffect,
+        ...tabItemLayoutAppearance
+      },
+      overrideScrollViewContentInsetAdjustmentBehavior
+    },
+    children: /*#__PURE__*/_jsx(Deferred, {
+      lazy: lazy,
+      visible: visible,
+      children: /*#__PURE__*/_jsx(ScreenWithHeader, {
+        isFocused: isFocused,
+        route: route,
+        navigation: descriptor.navigation,
+        options: options,
+        children: /*#__PURE__*/_jsx(NavigationMetaContext.Provider, {
+          value: meta,
+          children: render()
+        })
+      })
+    })
+  });
+});
 function ScreenWithHeader({
   isFocused,
   route,
@@ -417,25 +517,36 @@ function getPlatformIcon(icon) {
   switch (icon.type) {
     case 'sfSymbol':
       return {
-        ios: icon,
+        ios: {
+          type: 'sfSymbol',
+          name: icon.name,
+          renderingMode: icon.renderingMode === 'multicolor' ? 'original' : icon.renderingMode
+        },
         android: undefined,
         shared: undefined
       };
     case 'image':
-      return {
-        ios: icon.tinted === false ? {
-          type: 'imageSource',
-          imageSource: icon.source
-        } : {
-          type: 'templateSource',
-          templateSource: icon.source
-        },
-        android: undefined,
-        shared: {
-          type: 'imageSource',
-          imageSource: icon.source
-        }
-      };
+      {
+        // A `{ uri: 'name' }` source maps to an Android drawable by name.
+        const drawableName = typeof icon.source === 'object' && 'uri' in icon.source && icon.source.uri?.includes(':') === false ? icon.source.uri : undefined;
+        return {
+          ios: {
+            type: 'imageSource',
+            imageSource: icon.source,
+            renderingMode: icon.tinted === false ? 'original' : 'template'
+          },
+          android: drawableName != null ? {
+            type: 'drawableResource',
+            name: drawableName,
+            tinting: icon.tinted === false ? 'original' : 'tinted'
+          } : {
+            type: 'imageSource',
+            imageSource: icon.source,
+            tinting: icon.tinted === false ? 'original' : 'tinted'
+          },
+          shared: undefined
+        };
+      }
     default:
       {
         const _exhaustiveCheck = icon;