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

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.50",
   "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.48"
   },
   "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.44",
+    "@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.44",
+    "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": "ab1319d6bbf05eae8dc25e33cbf4dc56494e0f0c"
 }

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,
@@ -55,32 +48,6 @@ function BottomTabNavigator({
       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]);
-
   return (
     <NavigationContent>
       <BottomTabView
@@ -93,47 +60,15 @@ function BottomTabNavigator({
   );
 }
 
-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>();

package/src/types.tsx

@@ -1,11 +1,12 @@
 import type {
   HeaderOptions,
+  Icon,
   PlatformPressable,
 } from '@react-navigation/elements';
+import type { Screen } from '@react-navigation/elements/internal';
 import type {
   DefaultNavigatorOptions,
   Descriptor,
-  MaterialSymbolProps,
   NavigationHelpers,
   NavigationProp,
   ParamListBase,
@@ -20,7 +21,6 @@ import type {
   Animated,
   ColorValue,
   GestureResponderEvent,
-  ImageSourcePropType,
   StyleProp,
   TextStyle,
   ViewStyle,
@@ -28,9 +28,8 @@ import type {
 import type {
   TabBarItemLabelVisibilityMode,
   TabsScreenBlurEffect,
-  TabsSystemItem,
+  TabsScreenSystemItem,
 } from 'react-native-screens';
-import type { SFSymbol } from 'sf-symbols-typescript';
 
 export type Variant = 'uikit' | 'material';
 
@@ -39,6 +38,7 @@ export type BottomTabNavigationEventMap = {
    * Event which fires on tapping on the tab in the tab bar.
    *
    * Preventing default is only supported with `custom` implementation.
+   * Use `tabBarSelectionEnabled: false` option with `native` implementation.
    */
   tabPress: { data: undefined; canPreventDefault: true };
   /**
@@ -114,67 +114,6 @@ export type TabBarVisibilityAnimationConfig =
 
 export type TabAnimationName = 'none' | 'fade' | 'shift';
 
-type IconImage = {
-  /**
-   * - `image` - Use a local image as the icon.
-   */
-  type: 'image';
-  /**
-   * Image source to use as the icon.
-   * e.g., `require('./path/to/image.png')`
-   */
-  source: ImageSourcePropType;
-  /**
-   * Whether to apply tint color to the icon.
-   * Defaults to `true`.
-   *
-   * @platform ios
-   */
-  tinted?: boolean;
-};
-
-type IconSfSymbol = {
-  /**
-   * - `sfSymbol` - Use an SF Symbol as the icon on iOS.
-   */
-  type: 'sfSymbol';
-  /**
-   * Name of the SF Symbol to use as the icon.
-   */
-  name: SFSymbol;
-};
-
-type IconMaterialSymbol = {
-  /**
-   * - `materialSymbol` - Use a Material Symbol as the icon on Android.
-   */
-  type: 'materialSymbol';
-} & Pick<MaterialSymbolProps, 'name' | 'variant' | 'weight'>;
-
-type IconResource = {
-  /**
-   * - `resource` - Use a resource from drawables on Android and xcassets asset catalog on iOS as the icon.
-   */
-  type: 'resource';
-  /**
-   * Name of the drawable resource or xcasset to use as the icon.
-   */
-  name: string;
-  /**
-   * Whether to apply tint color to the icon.
-   * Only supported with custom implementation.
-   *
-   * Defaults to `true`.
-   */
-  tinted?: boolean;
-};
-
-type IconIOS = IconSfSymbol | IconImage;
-
-type IconAndroid = IconMaterialSymbol | IconResource | IconImage;
-
-export type BottomTabIcon = IconIOS | IconAndroid;
-
 type BottomTabCustomOptions = {
   /**
    * How the screen should animate when switching tabs.
@@ -212,7 +151,7 @@ type BottomTabCustomOptions = {
    *
    * Only supported with `custom` implementation.
    */
-  tabBarLabelPosition?: LabelPosition;
+  tabBarLabelPosition?: LabelPosition | undefined;
 
   /**
    * Whether label font should scale to respect Text Size accessibility settings.
@@ -311,8 +250,6 @@ type BottomTabCustomOptions = {
   tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
 };
 
-type ScrollEdgeEffect = 'auto' | 'hard' | 'soft' | 'hidden';
-
 type BottomTabNativeOptions = {
   /**
    * Uses iOS built-in tab bar items with standard iOS styling and localized titles.
@@ -324,7 +261,7 @@ type BottomTabNativeOptions = {
    *
    * @platform ios
    */
-  tabBarSystemItem?: TabsSystemItem;
+  tabBarSystemItem?: TabsScreenSystemItem;
 
   /**
    * Blur effect applied to the tab bar when tab screen is selected.
@@ -410,36 +347,25 @@ type BottomTabNativeOptions = {
   }) => React.ReactNode;
 
   /**
-   * Configures the scroll edge effect for the _content ScrollView_ (the ScrollView that is present in first descendants chain of the Screen).
-   * Depending on values set, it will blur the scrolling content below certain UI elements (header items, search bar)
-   * for the specified edge of the ScrollView.
-   *
-   * When set in nested containers, i.e. Native Stack inside Native Bottom Tabs, or the other way around,
-   * the ScrollView will use only the innermost one's config.
-   *
-   * **Note:** Using both `headerBlurEffect` and `scrollEdgeEffects` (>= iOS 26) simultaneously may cause overlapping effects.
+   * Specifies whether `contentInsetAdjustmentBehavior` of the `ScrollView`
+   * in the screen is automatically adjusted.
    *
-   * Edge effects can be configured for each edge separately. The following values are currently supported:
+   * `react-native`'s `ScrollView`s has `contentInsetAdjustmentBehavior` set to `never` by default.
+   * To provide a better UX, it is overridden to `automatic` - so it respects the tab bar.
+   * Otherwise, content can get hidden behind the tab bar as it's translucent on iOS 26+.
    *
-   * - `auto` - the automatic scroll edge effect style,
-   * - `hard` - a scroll edge effect with a hard cutoff and dividing line,
-   * - `soft` - a soft-edged scroll edge effect,
-   * - `hidden` - no scroll edge effect.
+   * Note that this only affects the `ScrollView` in first descendant chain of the screen,
+   * i.e., first view of each nested view is checked until a `ScrollView` is found.
    *
-   * Defaults to `automatic` for each edge.
-   *
-   * Available starting from iOS 26.
+   * To disable this behavior for specific screens, set this option to `false`.
    *
    * Only supported with `native` implementation.
    *
+   * Defaults to `true`.
+   *
    * @platform ios
    */
-  scrollEdgeEffects?: {
-    bottom?: ScrollEdgeEffect;
-    left?: ScrollEdgeEffect;
-    right?: ScrollEdgeEffect;
-    top?: ScrollEdgeEffect;
-  };
+  overrideScrollViewContentInsetAdjustmentBehavior?: boolean;
 };
 
 export type BottomTabNavigationOptions = {
@@ -481,7 +407,7 @@ export type BottomTabNavigationOptions = {
    */
   tabBarLabelStyle?: Pick<
     TextStyle,
-    'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle'
+    'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle' | 'color'
   >;
 
   /**
@@ -493,26 +419,30 @@ export type BottomTabNavigationOptions = {
    * - on all platforms with `custom` implementation
    * - on iOS with `native` implementation
    *
+   * With `native` implementation, `tinted` for `image` can only be disabled on iOS.
+   *
    * A React element is only supported with `custom` implementation.
    */
   tabBarIcon?:
-    | BottomTabIcon
+    | Icon
     | ((props: {
         focused: boolean;
         color: ColorValue;
         size: number;
-      }) => BottomTabIcon | React.ReactNode);
+      }) => Icon | React.ReactNode);
 
   /**
    * Text to show in a badge on the tab icon.
    */
-  tabBarBadge?: number | string;
+  tabBarBadge?: number | string | undefined;
 
   /**
    * Custom style for the tab bar badge.
    * You can specify a background color or text color here.
    *
-   * @platform android
+   * With `native` implementation, limited customization is supported:
+   * - on iOS, you can only set the background color.
+   * - on Android, you can set both background and text colors.
    */
   tabBarBadgeStyle?: {
     backgroundColor?: ColorValue;
@@ -522,7 +452,7 @@ export type BottomTabNavigationOptions = {
   /**
    * Color for the icon and label in the active tab.
    */
-  tabBarActiveTintColor?: ColorValue;
+  tabBarActiveTintColor?: ColorValue | undefined;
 
   /**
    * Color for the icon and label in the inactive tabs.
@@ -582,11 +512,31 @@ export type BottomTabNavigationOptions = {
      * Only supported on iOS 18 and below.
      */
     shadowColor?: ColorValue;
+    /**
+     * Whether the tab bar is visible.
+     * Setting this to `'none'` hides the tab bar.
+     */
+    display?: 'flex' | 'none';
   };
 
   /**
-   * Whether this screens should render the first time it's accessed. Defaults to `true`.
-   * Set it to `false` if you want to render the screen on initial render.
+   * Whether this tab can be selected.
+   * When `false`, tapping on the tab in tab bar won't select the tab.
+   * Custom behavior can be implemented by listening to `tabPress` event.
+   *
+   * Defaults to `true`.
+   */
+  tabBarSelectionEnabled?: boolean;
+
+  /**
+   * Whether this screen should render only when first accessed.
+   *
+   * Defaults to:
+   * - `true` with custom implementation.
+   * - `false` with native implementation.
+   *
+   * Enabling in native implementation may result in flicker
+   * as React renders after native transition is already finished.
    */
   lazy?: boolean;
 
@@ -599,7 +549,7 @@ export type BottomTabNavigationOptions = {
   /**
    * Style object for the component wrapping the screen content.
    */
-  sceneStyle?: StyleProp<ViewStyle>;
+  sceneStyle?: React.ComponentProps<typeof Screen>['style'];
 
   /**
    * Function that returns a React Element to display as a header.
@@ -612,6 +562,19 @@ export type BottomTabNavigationOptions = {
    * Defaults to `false` unless a header is provided.
    */
   headerShown?: boolean;
+
+  /**
+   * What should happen when screens become inactive.
+   * - `pause`: Effects are cleaned up.
+   * - `none`: Screen renders normally
+   *
+   * Defaults to `pause`.
+   *
+   * If you set `lazy: false` or preload a screen,
+   * It won't be paused until after the first time it becomes focused.
+   * This makes sure that effects are run to initialize the screen.
+   */
+  inactiveBehavior?: 'pause' | 'none';
 } & HeaderOptions &
   BottomTabNativeOptions &
   BottomTabCustomOptions;
@@ -655,14 +618,14 @@ export type TransitionSpec =
       animation: 'timing';
       config: Omit<
         Animated.TimingAnimationConfig,
-        'toValue' | keyof Animated.AnimationConfig
+        'toValue' | 'useNativeDriver'
       >;
     }
   | {
       animation: 'spring';
       config: Omit<
         Animated.SpringAnimationConfig,
-        'toValue' | keyof Animated.AnimationConfig
+        'toValue' | 'useNativeDriver'
       >;
     };
 
@@ -702,15 +665,6 @@ export type BottomTabNavigationConfig = {
    * Function that returns a React element to display as the tab bar.
    */
   tabBar?: (props: BottomTabBarProps) => React.ReactNode;
-
-  /**
-   * Whether inactive screens should be detached from the view hierarchy to save memory.
-   *
-   * Defaults to `true`.
-   *
-   * Only supported with `custom` implementation.
-   */
-  detachInactiveScreens?: boolean;
 };
 
 export type BottomTabHeaderProps = {
@@ -738,7 +692,7 @@ export type BottomTabBarButtonProps = Omit<
   React.ComponentProps<typeof PlatformPressable>,
   'style'
 > & {
-  href?: string;
+  href?: string | undefined;
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   onPress?: (

package/src/utils/useAnimatedHashMap.tsx

@@ -1,4 +1,4 @@
-import type { NavigationState } from '@react-navigation/routers';
+import type { NavigationState } from '@react-navigation/native';
 import * as React from 'react';
 import { Animated } from 'react-native';
 

package/src/utils/useBottomTabAnimation.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { BottomTabAnimationContext } from './BottomTabAnimationContext';
 
 export function useBottomTabAnimation() {
-  const animation = React.useContext(BottomTabAnimationContext);
+  const animation = React.use(BottomTabAnimationContext);
 
   if (animation === undefined) {
     throw new Error(