@react-navigation/bottom-tabs 8.0.0-alpha.5 → 8.0.0-alpha.51

package/lib/typescript/src/views/Deferred.d.ts

@@ -0,0 +1,31 @@
+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 declare function Deferred({ lazy, visible, children }: Props): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export {};
+//# sourceMappingURL=Deferred.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Deferred.d.ts","sourceRoot":"","sources":["../../../../src/views/Deferred.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,KAAK,GAAG;IACX;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,KAAK,iFA0B1D"}

package/lib/typescript/src/views/ScreenContent.d.ts

@@ -1,13 +1,13 @@
+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, BottomTabNavigationProp } from '../types';
+import type { BottomTabNavigationOptions, BottomTabNavigationProp } from '../types.js';
 export declare function ScreenContent({ isFocused, route, navigation, options, style, children, }: {
     isFocused: boolean;
     route: Route<string>;
     navigation: BottomTabNavigationProp<ParamListBase>;
     options: BottomTabNavigationOptions;
-    style?: StyleProp<ViewStyle>;
+    style?: React.ComponentProps<typeof Screen>['style'];
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 //# sourceMappingURL=ScreenContent.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScreenContent.d.ts","sourceRoot":"","sources":["../../../../src/views/ScreenContent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,KAAK,EACV,0BAA0B,EAC1B,uBAAuB,EACxB,MAAM,UAAU,CAAC;AAElB,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,UAAU,EACV,OAAO,EACP,KAAK,EACL,QAAQ,GACT,EAAE;IACD,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACrB,UAAU,EAAE,uBAAuB,CAAC,aAAa,CAAC,CAAC;IACnD,OAAO,EAAE,0BAA0B,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAgCA"}
+{"version":3,"file":"ScreenContent.d.ts","sourceRoot":"","sources":["../../../../src/views/ScreenContent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACV,0BAA0B,EAC1B,uBAAuB,EACxB,MAAM,aAAU,CAAC;AAElB,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,UAAU,EACV,OAAO,EACP,KAAK,EACL,QAAQ,GACT,EAAE;IACD,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACrB,UAAU,EAAE,uBAAuB,CAAC,aAAa,CAAC,CAAC;IACnD,OAAO,EAAE,0BAA0B,CAAC;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAgCA"}

package/lib/typescript/src/views/TabBarIcon.d.ts

@@ -1,24 +1,24 @@
+import { type Icon } from '@react-navigation/elements';
 import { type Route } from '@react-navigation/native';
-import React from 'react';
+import * as React from 'react';
 import { type ColorValue, type StyleProp, type TextStyle, 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 | ((props: {
+    icon: Icon | ((props: {
         focused: boolean;
         color: ColorValue;
         size: number;
-    }) => BottomTabIcon | React.ReactNode);
-    allowFontScaling?: boolean;
+    }) => Icon | React.ReactNode);
+    allowFontScaling?: boolean | undefined;
     style: StyleProp<ViewStyle>;
 };
-export declare function TabBarIcon({ route: _, variant, size, badge, badgeStyle, activeOpacity, inactiveOpacity, activeTintColor, inactiveTintColor, icon, allowFontScaling, style, }: TabBarIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabBarIcon({ route: _, variant, size, badge, badgeStyle, activeOpacity, inactiveOpacity, activeTintColor, inactiveTintColor, icon, allowFontScaling, style, }: TabBarIconProps): React.JSX.Element;
 //# sourceMappingURL=TabBarIcon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabBarIcon.d.ts","sourceRoot":"","sources":["../../../../src/views/TabBarIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,KAAK,KAAK,EAAY,MAAM,0BAA0B,CAAC;AAChF,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,UAAU,EAEf,KAAK,SAAS,EAEd,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACrB,OAAO,EAAE,OAAO,GAAG,UAAU,CAAC;IAC9B,IAAI,EAAE,SAAS,GAAG,SAAS,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,UAAU,CAAC;IAC5B,iBAAiB,EAAE,UAAU,CAAC;IAC9B,IAAI,EACA,aAAa,GACb,CAAC,CAAC,KAAK,EAAE;QACP,OAAO,EAAE,OAAO,CAAC;QACjB,KAAK,EAAE,UAAU,CAAC;QAClB,IAAI,EAAE,MAAM,CAAC;KACd,KAAK,aAAa,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;IAC3C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC7B,CAAC;AAcF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EAAE,CAAC,EACR,OAAO,EACP,IAAI,EACJ,KAAK,EACL,UAAU,EACV,aAAa,EACb,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,IAAI,EACJ,gBAAgB,EAChB,KAAK,GACN,EAAE,eAAe,2CAwDjB"}
+{"version":3,"file":"TabBarIcon.d.ts","sourceRoot":"","sources":["../../../../src/views/TabBarIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,IAAI,EAAgB,MAAM,4BAA4B,CAAC;AAE5E,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,UAAU,EACf,KAAK,SAAS,EAEd,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACrB,OAAO,EAAE,OAAO,GAAG,UAAU,CAAC;IAC9B,IAAI,EAAE,SAAS,GAAG,SAAS,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACpC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IAC9C,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,UAAU,CAAC;IAC5B,iBAAiB,EAAE,UAAU,CAAC;IAC9B,IAAI,EACA,IAAI,GACJ,CAAC,CAAC,KAAK,EAAE;QACP,OAAO,EAAE,OAAO,CAAC;QACjB,KAAK,EAAE,UAAU,CAAC;QAClB,IAAI,EAAE,MAAM,CAAC;KACd,KAAK,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;IAClC,gBAAgB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC7B,CAAC;AAcF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EAAE,CAAC,EACR,OAAO,EACP,IAAI,EACJ,KAAK,EACL,UAAU,EACV,aAAa,EACb,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,IAAI,EACJ,gBAAgB,EAChB,KAAK,GACN,EAAE,eAAe,qBAwDjB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "8.0.0-alpha.5",
+  "version": "8.0.0-alpha.51",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -21,7 +21,7 @@
   "types": "./lib/typescript/src/index.d.ts",
   "exports": {
     ".": {
-      "source": "./src/index.tsx",
+      "@react-navigation/source": "./src/index.tsx",
       "types": "./lib/typescript/src/index.d.ts",
       "default": "./lib/module/index.js"
     },
@@ -41,31 +41,31 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^3.0.0-alpha.5",
-    "color": "^4.2.3",
-    "sf-symbols-typescript": "^2.2.0"
+    "@react-navigation/elements": "^3.0.0-alpha.49"
   },
   "devDependencies": {
-    "@jest/globals": "^30.0.0",
-    "@react-navigation/native": "^8.0.0-alpha.5",
-    "@testing-library/react-native": "^13.2.1",
-    "@types/color": "^4.2.0",
-    "@types/react": "~19.1.10",
-    "del-cli": "^6.0.0",
-    "react": "19.1.0",
-    "react-native": "0.81.4",
-    "react-native-builder-bob": "^0.40.12",
-    "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "^4.20.0",
-    "react-test-renderer": "19.1.0",
-    "typescript": "^5.9.2"
+    "@jest/globals": "^30.4.1",
+    "@react-navigation/native": "^8.0.0-alpha.45",
+    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/react-native": "^14.0.0",
+    "@types/react": "~19.2.17",
+    "del-cli": "^7.0.0",
+    "react": "19.2.3",
+    "react-native": "0.85.3",
+    "react-native-builder-bob": "^0.43.0",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-screens": "^4.26.2",
+    "react-native-web": "~0.21.2",
+    "test-renderer": "1.2.0",
+    "typescript": "^6.0.3"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^8.0.0-alpha.5",
-    "react": ">= 19.0.0",
+    "@react-navigation/native": "^8.0.0-alpha.45",
+    "react": ">= 19.2.0",
     "react-native": "*",
     "react-native-safe-area-context": ">= 5.5.0",
-    "react-native-screens": ">= 4.19.0"
+    "react-native-screens": ">= 4.25.0"
   },
   "react-native-builder-bob": {
     "source": "src",
@@ -85,5 +85,5 @@
       ]
     ]
   },
-  "gitHead": "e70fcf951732df83d28fe5157408974346a1abbc"
+  "gitHead": "400f7128965fc92c335a3f6c27e3fa26113915e4"
 }

package/src/index.tsx

@@ -11,6 +11,7 @@ export { SceneStyleInterpolators, TransitionPresets, TransitionSpecs };
  * Navigators
  */
 export {
+  type BottomTabTypeBag,
   createBottomTabNavigator,
   createBottomTabScreen,
 } from './navigators/createBottomTabNavigator';
@@ -19,7 +20,7 @@ export {
  * Views
  */
 export { BottomTabBar } from './views/BottomTabBar';
-export { BottomTabView } from './views/BottomTabViewCommon';
+export { BottomTabView } from './views/BottomTabView';
 
 /**
  * Utilities
@@ -36,7 +37,6 @@ export type {
   BottomTabBarButtonProps,
   BottomTabBarProps,
   BottomTabHeaderProps,
-  BottomTabIcon,
   BottomTabNavigationEventMap,
   BottomTabNavigationOptions,
   BottomTabNavigationProp,

package/src/navigators/createBottomTabNavigator.tsx

@@ -1,28 +1,21 @@
 import {
   createNavigatorFactory,
+  createScreenFactory,
+  type NavigatorTypeBagBase,
   type ParamListBase,
-  StackActions,
-  type StaticConfig,
-  type StaticParamList,
-  type StaticScreenConfig,
-  type StaticScreenConfigLinking,
-  type StaticScreenConfigScreen,
   type TabActionHelpers,
   type TabNavigationState,
   TabRouter,
   type TabRouterOptions,
-  type TypedNavigator,
   useNavigationBuilder,
 } from '@react-navigation/native';
-import * as React from 'react';
 
 import type {
   BottomTabNavigationEventMap,
   BottomTabNavigationOptions,
-  BottomTabNavigationProp,
   BottomTabNavigatorProps,
 } from '../types';
-import { BottomTabView } from '../views/BottomTabViewCommon';
+import { BottomTabView } from '../views/BottomTabView';
 
 function BottomTabNavigator({
   initialRouteName,
@@ -36,104 +29,43 @@ function BottomTabNavigator({
   router,
   ...rest
 }: BottomTabNavigatorProps) {
-  const { state, navigation, descriptors, NavigationContent } =
-    useNavigationBuilder<
-      TabNavigationState<ParamListBase>,
-      TabRouterOptions,
-      TabActionHelpers<ParamListBase>,
-      BottomTabNavigationOptions,
-      BottomTabNavigationEventMap
-    >(TabRouter, {
-      initialRouteName,
-      backBehavior,
-      routeNamesChangeBehavior,
-      children,
-      layout,
-      screenListeners,
-      screenOptions,
-      screenLayout,
-      router,
-    });
-
-  const focusedRouteKey = state.routes[state.index].key;
-  const previousRouteKeyRef = React.useRef(focusedRouteKey);
-
-  React.useEffect(() => {
-    const previousRouteKey = previousRouteKeyRef.current;
-
-    if (
-      previousRouteKey !== focusedRouteKey &&
-      descriptors[previousRouteKey]?.options.popToTopOnBlur
-    ) {
-      const prevRoute = state.routes.find(
-        (route) => route.key === previousRouteKey
-      );
-
-      if (prevRoute?.state?.type === 'stack' && prevRoute.state.key) {
-        const popToTopAction = {
-          ...StackActions.popToTop(),
-          target: prevRoute.state.key,
-        };
-        navigation.dispatch(popToTopAction);
-      }
-    }
-
-    previousRouteKeyRef.current = focusedRouteKey;
-  }, [descriptors, focusedRouteKey, navigation, state.index, state.routes]);
+  const { state, navigation, descriptors, render } = useNavigationBuilder<
+    TabNavigationState<ParamListBase>,
+    TabRouterOptions,
+    TabActionHelpers<ParamListBase>,
+    BottomTabNavigationOptions,
+    BottomTabNavigationEventMap
+  >(TabRouter, {
+    initialRouteName,
+    backBehavior,
+    routeNamesChangeBehavior,
+    children,
+    layout,
+    screenListeners,
+    screenOptions,
+    screenLayout,
+    router,
+  });
 
-  return (
-    <NavigationContent>
-      <BottomTabView
-        {...rest}
-        state={state}
-        navigation={navigation}
-        descriptors={descriptors}
-      />
-    </NavigationContent>
+  return render(
+    <BottomTabView
+      {...rest}
+      state={state}
+      navigation={navigation}
+      descriptors={descriptors}
+    />
   );
 }
 
-type BottomTabTypeBag<ParamList extends {}> = {
-  ParamList: ParamList;
-  State: TabNavigationState<ParamList>;
+export interface BottomTabTypeBag extends NavigatorTypeBagBase {
+  State: TabNavigationState<this['ParamList']>;
   ScreenOptions: BottomTabNavigationOptions;
   EventMap: BottomTabNavigationEventMap;
-  NavigationList: {
-    [RouteName in keyof ParamList]: BottomTabNavigationProp<
-      ParamList,
-      RouteName
-    >;
-  };
+  ActionHelpers: TabActionHelpers<this['ParamList']>;
   Navigator: typeof BottomTabNavigator;
-};
-
-export function createBottomTabNavigator<
-  const ParamList extends ParamListBase,
->(): TypedNavigator<BottomTabTypeBag<ParamList>, undefined>;
-export function createBottomTabNavigator<
-  const Config extends StaticConfig<BottomTabTypeBag<ParamListBase>>,
->(
-  config: Config
-): TypedNavigator<
-  BottomTabTypeBag<StaticParamList<{ config: Config }>>,
-  Config
->;
-export function createBottomTabNavigator(config?: unknown) {
-  return createNavigatorFactory(BottomTabNavigator)(config);
 }
 
-export function createBottomTabScreen<
-  const Linking extends StaticScreenConfigLinking,
-  const Screen extends StaticScreenConfigScreen,
->(
-  config: StaticScreenConfig<
-    Linking,
-    Screen,
-    TabNavigationState<ParamListBase>,
-    BottomTabNavigationOptions,
-    BottomTabNavigationEventMap,
-    BottomTabNavigationProp<ParamListBase>
-  >
-) {
-  return config;
-}
+export const createBottomTabNavigator =
+  createNavigatorFactory<BottomTabTypeBag>(BottomTabNavigator);
+
+export const createBottomTabScreen = createScreenFactory<BottomTabTypeBag>();