@react-navigation/bottom-tabs 7.0.0-rc.2 → 7.0.0-rc.21

package/src/views/TabBarIcon.tsx

@@ -12,7 +12,8 @@ import { Badge } from './Badge';
 
 type Props = {
   route: Route<string>;
-  horizontal: boolean;
+  variant: 'uikit' | 'material';
+  size: 'compact' | 'regular';
   badge?: string | number;
   badgeStyle?: StyleProp<TextStyle>;
   activeOpacity: number;
@@ -27,11 +28,22 @@ type Props = {
   style: StyleProp<ViewStyle>;
 };
 
-const ICON_SIZE = 25;
+/**
+ * Icon sizes taken from Apple HIG
+ * https://developer.apple.com/design/human-interface-guidelines/tab-bars
+ */
+const ICON_SIZE_WIDE = 31;
+const ICON_SIZE_WIDE_COMPACT = 23;
+const ICON_SIZE_TALL = 28;
+const ICON_SIZE_TALL_COMPACT = 20;
+const ICON_SIZE_ROUND = 25;
+const ICON_SIZE_ROUND_COMPACT = 18;
+const ICON_SIZE_MATERIAL = 24;
 
 export function TabBarIcon({
   route: _,
-  horizontal,
+  variant,
+  size,
   badge,
   badgeStyle,
   activeOpacity,
@@ -41,30 +53,53 @@ export function TabBarIcon({
   renderIcon,
   style,
 }: Props) {
+  const iconSize =
+    variant === 'material'
+      ? ICON_SIZE_MATERIAL
+      : size === 'compact'
+        ? ICON_SIZE_ROUND_COMPACT
+        : 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.
   return (
     <View
-      style={[horizontal ? styles.iconHorizontal : styles.iconVertical, style]}
+      style={[
+        variant === 'material'
+          ? styles.wrapperMaterial
+          : size === 'compact'
+            ? styles.wrapperUikitCompact
+            : styles.wrapperUikit,
+        style,
+      ]}
     >
-      <View style={[styles.icon, { opacity: activeOpacity }]}>
+      <View
+        style={[
+          styles.icon,
+          {
+            opacity: activeOpacity,
+            // Workaround for react-native >= 0.54 layout bug
+            minWidth: iconSize,
+          },
+        ]}
+      >
         {renderIcon({
           focused: true,
-          size: ICON_SIZE,
+          size: iconSize,
           color: activeTintColor,
         })}
       </View>
       <View style={[styles.icon, { opacity: inactiveOpacity }]}>
         {renderIcon({
           focused: false,
-          size: ICON_SIZE,
+          size: iconSize,
           color: inactiveTintColor,
         })}
       </View>
       <Badge
         visible={badge != null}
         style={[styles.badge, badgeStyle]}
-        size={ICON_SIZE * 0.75}
+        size={iconSize * 0.75}
       >
         {badge}
       </Badge>
@@ -83,20 +118,22 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     height: '100%',
     width: '100%',
-    // Workaround for react-native >= 0.54 layout bug
-    minWidth: ICON_SIZE,
   },
-  iconVertical: {
-    width: ICON_SIZE,
-    height: ICON_SIZE,
+  wrapperUikit: {
+    width: ICON_SIZE_WIDE,
+    height: ICON_SIZE_TALL,
+  },
+  wrapperUikitCompact: {
+    width: ICON_SIZE_WIDE_COMPACT,
+    height: ICON_SIZE_TALL_COMPACT,
   },
-  iconHorizontal: {
-    width: ICON_SIZE,
-    height: ICON_SIZE,
+  wrapperMaterial: {
+    width: ICON_SIZE_MATERIAL,
+    height: ICON_SIZE_MATERIAL,
   },
   badge: {
     position: 'absolute',
-    end: -5,
-    top: -5,
+    end: -3,
+    top: -3,
   },
 });