@react-navigation/elements 3.0.0-alpha.10 → 3.0.0-alpha.11

package/lib/module/Container.js

@@ -8,12 +8,19 @@ export function Container({
   style
 }) {
   if (Platform.OS === 'web') {
+    const {
+      backgroundColor,
+      ...rest
+    } = style ?? {};
     return /*#__PURE__*/_jsx("div", {
       inert: inert,
       "aria-hidden": inert,
       style: {
         ...DEFAULT_STYLE,
-        ...style
+        ...rest,
+        backgroundColor:
+        // In practice we only get string on web instead of OpaqueValue
+        typeof backgroundColor === 'string' ? backgroundColor : undefined
       },
       children: children
     });

package/lib/module/Container.js.map

@@ -1 +1 @@
-{"version":3,"names":["Platform","View","jsx","_jsx","Container","inert","children","style","OS","DEFAULT_STYLE","pointerEvents","collapsable","display","alignContent","alignItems","boxSizing","flexBasis","flexDirection","flexShrink","minHeight","minWidth","position"],"sourceRoot":"../../src","sources":["Container.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,IAAI,QAAwB,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQ9D,OAAO,SAASC,SAASA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAAa,CAAC,EAAE;EAC3D,IAAIP,QAAQ,CAACQ,EAAE,KAAK,KAAK,EAAE;IACzB,oBACEL,IAAA;MACEE,KAAK,EAAEA,KAAM;MACb,eAAaA,KAAM;MACnBE,KAAK,EAAE;QAAE,GAAGE,aAAa;QAAE,GAAGF;MAAM,CAAE;MAAAD,QAAA,EAErCA;IAAQ,CACN,CAAC;EAEV;EAEA,oBACEH,IAAA,CAACF,IAAI;IACH,eAAaI,KAAM;IACnBE,KAAK,EAAE,CAAC;MAAEG,aAAa,EAAEL,KAAK,GAAG,MAAM,GAAG;IAAW,CAAC,EAAEE,KAAK,CAAE;IAC/DI,WAAW,EAAE,KAAM;IAAAL,QAAA,EAElBA;EAAQ,CACL,CAAC;AAEX;AAEA,MAAMG,aAAa,GAAG;EACpBG,OAAO,EAAE,MAAM;EACfC,YAAY,EAAE,YAAY;EAC1BC,UAAU,EAAE,SAAS;EACrBC,SAAS,EAAE,YAAY;EACvBC,SAAS,EAAE,MAAM;EACjBC,aAAa,EAAE,QAAQ;EACvBC,UAAU,EAAE,CAAC;EACbC,SAAS,EAAE,CAAC;EACZC,QAAQ,EAAE,CAAC;EACXC,QAAQ,EAAE;AACZ,CAAwC","ignoreList":[]}
+{"version":3,"names":["Platform","View","jsx","_jsx","Container","inert","children","style","OS","backgroundColor","rest","DEFAULT_STYLE","undefined","pointerEvents","collapsable","display","alignContent","alignItems","boxSizing","flexBasis","flexDirection","flexShrink","minHeight","minWidth","position"],"sourceRoot":"../../src","sources":["Container.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,IAAI,QAAwB,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAW9D,OAAO,SAASC,SAASA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAAa,CAAC,EAAE;EAC3D,IAAIP,QAAQ,CAACQ,EAAE,KAAK,KAAK,EAAE;IACzB,MAAM;MAAEC,eAAe;MAAE,GAAGC;IAAK,CAAC,GAAGH,KAAK,IAAI,CAAC,CAAC;IAEhD,oBACEJ,IAAA;MACEE,KAAK,EAAEA,KAAM;MACb,eAAaA,KAAM;MACnBE,KAAK,EAAE;QACL,GAAGI,aAAa;QAChB,GAAGD,IAAI;QACPD,eAAe;QACb;QACA,OAAOA,eAAe,KAAK,QAAQ,GAAGA,eAAe,GAAGG;MAC5D,CAAE;MAAAN,QAAA,EAEDA;IAAQ,CACN,CAAC;EAEV;EAEA,oBACEH,IAAA,CAACF,IAAI;IACH,eAAaI,KAAM;IACnBE,KAAK,EAAE,CAAC;MAAEM,aAAa,EAAER,KAAK,GAAG,MAAM,GAAG;IAAW,CAAC,EAAEE,KAAK,CAAE;IAC/DO,WAAW,EAAE,KAAM;IAAAR,QAAA,EAElBA;EAAQ,CACL,CAAC;AAEX;AAEA,MAAMK,aAAa,GAAG;EACpBI,OAAO,EAAE,MAAM;EACfC,YAAY,EAAE,YAAY;EAC1BC,UAAU,EAAE,SAAS;EACrBC,SAAS,EAAE,YAAY;EACvBC,SAAS,EAAE,MAAM;EACjBC,aAAa,EAAE,QAAQ;EACvBC,UAAU,EAAE,CAAC;EACbC,SAAS,EAAE,CAAC;EACZC,QAAQ,EAAE,CAAC;EACXC,QAAQ,EAAE;AACZ,CAAwC","ignoreList":[]}

package/lib/module/Screen.js

@@ -2,11 +2,12 @@
 
 import { NavigationProvider, useTheme } from '@react-navigation/native';
 import * as React from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { getDefaultHeaderHeight } from "./Header/getDefaultHeaderHeight.js";
 import { HeaderHeightContext } from "./Header/HeaderHeightContext.js";
 import { HeaderShownContext } from "./Header/HeaderShownContext.js";
+import { Container } from "./internal.js";
 import { useFrameSize } from "./useFrameSize.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Screen(props) {
@@ -40,15 +41,18 @@ export function Screen(props) {
       setHeaderHeight(height);
     });
   }, [route.name]);
-  return /*#__PURE__*/_jsxs(Animated.View, {
-    "aria-hidden": !focused,
-    style: [styles.container, {
-      backgroundColor: colors.background
-    }, style]
+  return /*#__PURE__*/_jsxs(Container, {
+    inert: !focused,
+    style: {
+      ...styles.container,
+      backgroundColor: colors.background,
+      ...style
+    }
     // On Fabric we need to disable collapsing for the background to ensure
     // that we won't render unnecessary views due to the view flattening.
+    // Container sets `collapsable` to `false` internally
+    // This comment is left to make sure refactors don't remove it by mistake
     ,
-    collapsable: false,
     children: [headerShown ? /*#__PURE__*/_jsx(NavigationProvider, {
       navigation: navigation,
       route: route,

package/lib/module/Screen.js.map

@@ -1 +1 @@
-{"version":3,"names":["NavigationProvider","useTheme","React","Animated","StyleSheet","View","useSafeAreaInsets","getDefaultHeaderHeight","HeaderHeightContext","HeaderShownContext","useFrameSize","jsx","_jsx","jsxs","_jsxs","Screen","props","insets","colors","isParentHeaderShown","useContext","parentHeaderHeight","focused","modal","header","headerShown","headerTransparent","headerStatusBarHeight","top","navigation","route","children","style","defaultHeaderHeight","size","landscape","width","height","modalPresentation","topInset","headerRef","useRef","headerHeight","setHeaderHeight","useState","useLayoutEffect","current","measure","_x","_y","_width","name","styles","container","backgroundColor","background","collapsable","ref","onLayout","e","nativeEvent","layout","absolute","content","Provider","value","create","flex","zIndex","pointerEvents","position","start","end"],"sourceRoot":"../../src","sources":["Screen.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["NavigationProvider","useTheme","React","StyleSheet","View","useSafeAreaInsets","getDefaultHeaderHeight","HeaderHeightContext","HeaderShownContext","Container","useFrameSize","jsx","_jsx","jsxs","_jsxs","Screen","props","insets","colors","isParentHeaderShown","useContext","parentHeaderHeight","focused","modal","header","headerShown","headerTransparent","headerStatusBarHeight","top","navigation","route","children","style","defaultHeaderHeight","size","landscape","width","height","modalPresentation","topInset","headerRef","useRef","headerHeight","setHeaderHeight","useState","useLayoutEffect","current","measure","_x","_y","_width","name","inert","styles","container","backgroundColor","background","ref","onLayout","e","nativeEvent","layout","absolute","content","Provider","value","create","flex","zIndex","pointerEvents","position","start","end"],"sourceRoot":"../../src","sources":["Screen.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/Container.d.ts

@@ -1,7 +1,9 @@
 import { type ViewStyle } from 'react-native';
 export type Props = {
     inert?: boolean;
-    style?: React.CSSProperties & ViewStyle;
+    style?: ViewStyle & Omit<React.CSSProperties, 'backgroundColor'> & {
+        backgroundColor?: ViewStyle['backgroundColor'];
+    };
     children: React.ReactNode;
 };
 export declare function Container({ inert, children, style }: Props): import("react/jsx-runtime").JSX.Element;

package/lib/typescript/src/Container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,MAAM,KAAK,GAAG;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,2CAsB1D"}
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,MAAM,KAAK,GAAG;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GACf,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,iBAAiB,CAAC,GAAG;QAC7C,eAAe,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;KAChD,CAAC;IACJ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,2CA8B1D"}

package/lib/typescript/src/Screen.d.ts

@@ -1,6 +1,6 @@
 import { type NavigationProp, type ParamListBase, type RouteProp } from '@react-navigation/native';
 import * as React from 'react';
-import { Animated, type StyleProp, type ViewStyle } from 'react-native';
+import { Container } from './internal';
 type Props = {
     focused: boolean;
     modal?: boolean;
@@ -10,7 +10,7 @@ type Props = {
     headerShown?: boolean;
     headerStatusBarHeight?: number;
     headerTransparent?: boolean;
-    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    style?: React.ComponentProps<typeof Container>['style'];
     children: React.ReactNode;
 };
 export declare function Screen(props: Props): import("react/jsx-runtime").JSX.Element;

package/lib/typescript/src/Screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../../src/Screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,aAAa,EAClB,KAAK,SAAS,EAEf,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EACR,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAQtB,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IAC1C,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IAChC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,MAAM,CAAC,KAAK,EAAE,KAAK,2CA0ElC"}
+{"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../../src/Screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,aAAa,EAClB,KAAK,SAAS,EAEf,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAGvC,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IAC1C,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IAChC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC;IACxD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,MAAM,CAAC,KAAK,EAAE,KAAK,2CA+ElC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/elements",
   "description": "UI Components for React Navigation",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-alpha.11",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -54,7 +54,7 @@
   "devDependencies": {
     "@callstack/liquid-glass": "^0.6.0",
     "@jest/globals": "^30.0.0",
-    "@react-navigation/native": "^8.0.0-alpha.10",
+    "@react-navigation/native": "^8.0.0-alpha.11",
     "@testing-library/react-native": "^13.2.1",
     "@types/react": "~19.1.10",
     "@types/use-sync-external-store": "^1.5.0",
@@ -68,7 +68,7 @@
   },
   "peerDependencies": {
     "@callstack/liquid-glass": ">= 0.6.0",
-    "@react-navigation/native": "^8.0.0-alpha.10",
+    "@react-navigation/native": "^8.0.0-alpha.11",
     "react": ">= 19.0.0",
     "react-native": "*",
     "react-native-safe-area-context": ">= 5.5.0",
@@ -92,5 +92,5 @@
       ]
     ]
   },
-  "gitHead": "4bf35245d085655607d8c658407a4a0c8e641f8d"
+  "gitHead": "faad2ee23945a5a27090cfb837a35d1db25147ab"
 }

package/src/Container.tsx

@@ -2,17 +2,28 @@ import { Platform, View, type ViewStyle } from 'react-native';
 
 export type Props = {
   inert?: boolean;
-  style?: React.CSSProperties & ViewStyle;
+  style?: ViewStyle &
+    Omit<React.CSSProperties, 'backgroundColor'> & {
+      backgroundColor?: ViewStyle['backgroundColor'];
+    };
   children: React.ReactNode;
 };
 
 export function Container({ inert, children, style }: Props) {
   if (Platform.OS === 'web') {
+    const { backgroundColor, ...rest } = style ?? {};
+
     return (
       <div
         inert={inert}
         aria-hidden={inert}
-        style={{ ...DEFAULT_STYLE, ...style }}
+        style={{
+          ...DEFAULT_STYLE,
+          ...rest,
+          backgroundColor:
+            // In practice we only get string on web instead of OpaqueValue
+            typeof backgroundColor === 'string' ? backgroundColor : undefined,
+        }}
       >
         {children}
       </div>

package/src/Screen.tsx

@@ -6,18 +6,13 @@ import {
   useTheme,
 } from '@react-navigation/native';
 import * as React from 'react';
-import {
-  Animated,
-  type StyleProp,
-  StyleSheet,
-  View,
-  type ViewStyle,
-} from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { getDefaultHeaderHeight } from './Header/getDefaultHeaderHeight';
 import { HeaderHeightContext } from './Header/HeaderHeightContext';
 import { HeaderShownContext } from './Header/HeaderShownContext';
+import { Container } from './internal';
 import { useFrameSize } from './useFrameSize';
 
 type Props = {
@@ -29,7 +24,7 @@ type Props = {
   headerShown?: boolean;
   headerStatusBarHeight?: number;
   headerTransparent?: boolean;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: React.ComponentProps<typeof Container>['style'];
   children: React.ReactNode;
 };
 
@@ -72,12 +67,17 @@ export function Screen(props: Props) {
   }, [route.name]);
 
   return (
-    <Animated.View
-      aria-hidden={!focused}
-      style={[styles.container, { backgroundColor: colors.background }, style]}
+    <Container
+      inert={!focused}
+      style={{
+        ...styles.container,
+        backgroundColor: colors.background,
+        ...style,
+      }}
       // On Fabric we need to disable collapsing for the background to ensure
       // that we won't render unnecessary views due to the view flattening.
-      collapsable={false}
+      // Container sets `collapsable` to `false` internally
+      // This comment is left to make sure refactors don't remove it by mistake
     >
       {headerShown ? (
         <NavigationProvider navigation={navigation} route={route}>
@@ -105,7 +105,7 @@ export function Screen(props: Props) {
           </HeaderHeightContext.Provider>
         </HeaderShownContext.Provider>
       </View>
-    </Animated.View>
+    </Container>
   );
 }