@react-navigation/bottom-tabs 8.0.0-alpha.4 → 8.0.0-alpha.41

package/src/views/Deferred.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+type Props = {
+  /**
+   * Whether lazy rendering is enabled.
+   */
+  lazy: boolean;
+  /**
+   * Whether the component is visible.
+   */
+  visible: boolean;
+  /**
+   * Content to render.
+   */
+  children: React.ReactElement;
+};
+
+/**
+ * Render content lazily based on visibility.
+ *
+ * When lazy is enabled:
+ * - If content is visible, it will render immediately
+ * - If content is not visible, it won't render until it becomes visible
+ *
+ * Otherwise:
+ * - If content is visible, it will render immediately
+ * - If content is not visible, it will defer rendering
+ *
+ * Once rendered, the content remains rendered.
+ */
+export function Deferred({ lazy, visible, children }: Props) {
+  const [rendered, setRendered] = React.useState(lazy ? visible : false);
+
+  const shouldRenderDeferred = !(lazy || visible || rendered);
+
+  React.useEffect(() => {
+    if (shouldRenderDeferred === false) {
+      return;
+    }
+
+    React.startTransition(() => {
+      setRendered(true);
+    });
+  }, [shouldRenderDeferred]);
+
+  if (visible && rendered === false) {
+    setRendered(true);
+
+    return children;
+  }
+
+  if (rendered) {
+    return children;
+  }
+
+  return null;
+}

package/src/views/ScreenContent.tsx

@@ -2,7 +2,6 @@ import { getHeaderTitle, Header } from '@react-navigation/elements';
 import { Screen } from '@react-navigation/elements/internal';
 import type { ParamListBase, Route } from '@react-navigation/native';
 import * as React from 'react';
-import { type StyleProp, type ViewStyle } from 'react-native';
 
 import type {
   BottomTabNavigationOptions,
@@ -21,7 +20,7 @@ export function ScreenContent({
   route: Route<string>;
   navigation: BottomTabNavigationProp<ParamListBase>;
   options: BottomTabNavigationOptions;
-  style?: StyleProp<ViewStyle>;
+  style?: React.ComponentProps<typeof Screen>['style'];
   children: React.ReactNode;
 }) {
   const {

package/src/views/TabBarIcon.tsx

@@ -1,10 +1,9 @@
-import { Badge } from '@react-navigation/elements';
+import { Badge, type Icon, PlatformIcon } from '@react-navigation/elements';
 import { MissingIcon } from '@react-navigation/elements/internal';
-import { MaterialSymbol, type Route, SFSymbol } from '@react-navigation/native';
-import React from 'react';
+import { type Route } from '@react-navigation/native';
+import * as React from 'react';
 import {
   type ColorValue,
-  Image,
   type StyleProp,
   StyleSheet,
   type TextStyle,
@@ -12,26 +11,24 @@ import {
   type ViewStyle,
 } from 'react-native';
 
-import type { BottomTabIcon } from '../types';
-
 export type TabBarIconProps = {
   route: Route<string>;
   variant: 'uikit' | 'material';
   size: 'compact' | 'regular';
-  badge?: string | number;
-  badgeStyle?: StyleProp<TextStyle>;
+  badge?: string | number | undefined;
+  badgeStyle?: StyleProp<TextStyle> | undefined;
   activeOpacity: number;
   inactiveOpacity: number;
   activeTintColor: ColorValue;
   inactiveTintColor: ColorValue;
   icon:
-    | BottomTabIcon
+    | Icon
     | ((props: {
         focused: boolean;
         color: ColorValue;
         size: number;
-      }) => BottomTabIcon | React.ReactNode);
-  allowFontScaling?: boolean;
+      }) => Icon | React.ReactNode);
+  allowFontScaling?: boolean | undefined;
   style: StyleProp<ViewStyle>;
 };
 
@@ -43,8 +40,8 @@ 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_SQUARE = 23;
+const ICON_SIZE_SQUARE_COMPACT = 17;
 const ICON_SIZE_MATERIAL = 24;
 
 export function TabBarIcon({
@@ -65,8 +62,8 @@ export function TabBarIcon({
     variant === 'material'
       ? ICON_SIZE_MATERIAL
       : size === 'compact'
-        ? ICON_SIZE_ROUND_COMPACT
-        : ICON_SIZE_ROUND;
+        ? ICON_SIZE_SQUARE_COMPACT
+        : ICON_SIZE_SQUARE;
 
   // We render the icon twice at the same position on top of each other:
   // active and inactive one, so we can fade between them.
@@ -141,47 +138,7 @@ function renderIcon({
     iconValue != null &&
     'type' in iconValue
   ) {
-    switch (iconValue.type) {
-      case 'image':
-        return (
-          <Image
-            source={iconValue.source}
-            style={{
-              width: size,
-              height: size,
-              tintColor: iconValue.tinted === false ? undefined : color,
-            }}
-          />
-        );
-      case 'resource':
-        return (
-          <Image
-            source={{ uri: iconValue.name }}
-            style={{
-              width: size,
-              height: size,
-              tintColor: iconValue.tinted === false ? undefined : color,
-            }}
-          />
-        );
-      case 'sfSymbol':
-        return <SFSymbol name={iconValue.name} size={size} color={color} />;
-      case 'materialSymbol':
-        return (
-          <MaterialSymbol
-            name={iconValue.name}
-            variant={iconValue.variant}
-            weight={iconValue.weight}
-            size={size}
-            color={color}
-          />
-        );
-      default: {
-        const _exhaustiveCheck: never = iconValue;
-
-        return _exhaustiveCheck;
-      }
-    }
+    return <PlatformIcon icon={iconValue} size={size} color={color} />;
   }
 
   return <MissingIcon color={color} size={size} />;

package/lib/module/views/BottomTabViewCommon.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["BottomTabViewCustom","BottomTabViewNative","jsx","_jsx","BottomTabView","props","implementation"],"sourceRoot":"../../../src","sources":["views/BottomTabViewCommon.tsx"],"mappings":";;AAUA,SAASA,mBAAmB,QAAQ,0BAAuB;AAC3D,SAASC,mBAAmB,QAAQ,uBAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQ5D,OAAO,SAASC,aAAaA,CAACC,KAAY,EAAE;EAC1C,IAAIA,KAAK,CAACC,cAAc,KAAK,QAAQ,EAAE;IACrC,oBAAOH,IAAA,CAACH,mBAAmB;MAAA,GAAKK;IAAK,CAAG,CAAC;EAC3C;EAEA,oBAAOF,IAAA,CAACF,mBAAmB;IAAA,GAAKI;EAAK,CAAG,CAAC;AAC3C","ignoreList":[]}

package/lib/typescript/src/views/BottomTabViewCommon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BottomTabViewCommon.d.ts","sourceRoot":"","sources":["../../../../src/views/BottomTabViewCommon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAElC,OAAO,KAAK,EACV,sBAAsB,EACtB,yBAAyB,EACzB,0BAA0B,EAC3B,MAAM,UAAU,CAAC;AAIlB,KAAK,KAAK,GAAG,yBAAyB,GAAG;IACvC,KAAK,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;IACzC,UAAU,EAAE,0BAA0B,CAAC;IACvC,WAAW,EAAE,sBAAsB,CAAC;CACrC,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,2CAMzC"}