diff --git a/packages/react-native/Libraries/ReactNative/AppContainer-dev.js b/packages/react-native/Libraries/ReactNative/AppContainer-dev.js index cba0ccb2395dce..fe71b3c04d3dca 100644 --- a/packages/react-native/Libraries/ReactNative/AppContainer-dev.js +++ b/packages/react-native/Libraries/ReactNative/AppContainer-dev.js @@ -92,6 +92,7 @@ const AppContainer = ({ rootTag, showArchitectureIndicator, WrapperComponent, + rootViewStyle, }: Props): React.Node => { const appContainerRootViewRef: AppContainerRootViewRef = React.useRef(null); const innerViewRef: InspectedViewRef = React.useRef(null); @@ -141,7 +142,7 @@ const AppContainer = ({ collapsable={reactDevToolsAgent == null && !shouldRenderInspector} pointerEvents="box-none" key={key} - style={styles.container} + style={rootViewStyle || styles.container} ref={innerViewRef}> {children} @@ -167,7 +168,7 @@ const AppContainer = ({ {innerView} diff --git a/packages/react-native/Libraries/ReactNative/AppContainer-prod.js b/packages/react-native/Libraries/ReactNative/AppContainer-prod.js index 201d54562b91a8..0f091d5669c922 100644 --- a/packages/react-native/Libraries/ReactNative/AppContainer-prod.js +++ b/packages/react-native/Libraries/ReactNative/AppContainer-prod.js @@ -23,6 +23,7 @@ const AppContainer = ({ rootTag, showArchitectureIndicator, WrapperComponent, + rootViewStyle, }: Props): React.Node => { let innerView = children; @@ -39,7 +40,7 @@ const AppContainer = ({ return ( - + {innerView} diff --git a/packages/react-native/Libraries/ReactNative/AppContainer.js b/packages/react-native/Libraries/ReactNative/AppContainer.js index b27db96888b5b8..7e559800b34303 100644 --- a/packages/react-native/Libraries/ReactNative/AppContainer.js +++ b/packages/react-native/Libraries/ReactNative/AppContainer.js @@ -9,6 +9,7 @@ */ import type {RootTag} from './RootTag'; +import type { ViewStyleProp } from '../StyleSheet/StyleSheet'; import * as React from 'react'; @@ -19,6 +20,7 @@ export type Props = $ReadOnly<{| initialProps?: {...}, showArchitectureIndicator?: boolean, WrapperComponent?: ?React.ComponentType, + rootViewStyle?: ?ViewStyleProp, internal_excludeLogBox?: boolean, internal_excludeInspector?: boolean, |}>; diff --git a/packages/react-native/Libraries/ReactNative/AppRegistry.d.ts b/packages/react-native/Libraries/ReactNative/AppRegistry.d.ts index b75715c6abc8ea..34862eea485812 100644 --- a/packages/react-native/Libraries/ReactNative/AppRegistry.d.ts +++ b/packages/react-native/Libraries/ReactNative/AppRegistry.d.ts @@ -9,6 +9,7 @@ import type * as React from 'react'; import type {IPerformanceLogger} from '../Utilities/IPerformanceLogger'; +import type {ViewStyleProp} from '../StyleSheet/StyleSheet'; type Task = (taskData: any) => Promise; type TaskProvider = () => Task; @@ -34,6 +35,10 @@ export type WrapperComponentProvider = ( appParameters: any, ) => React.ComponentType; +export type RootViewStyleProvider = ( + appParameters: any, +) => ViewStyleProp; + /** * `AppRegistry` is the JS entry point to running all React Native apps. App * root components should register themselves with @@ -54,6 +59,10 @@ export namespace AppRegistry { provider: WrapperComponentProvider, ): void; + export function setRootViewStyleProvider( + provider: RootViewStyleProvider, + ): void; + export function registerConfig(config: AppConfig[]): void; export function registerComponent( diff --git a/packages/react-native/Libraries/ReactNative/AppRegistry.js b/packages/react-native/Libraries/ReactNative/AppRegistry.js index a4b5b732f5f121..f25f6145a9881a 100644 --- a/packages/react-native/Libraries/ReactNative/AppRegistry.js +++ b/packages/react-native/Libraries/ReactNative/AppRegistry.js @@ -11,6 +11,7 @@ import type {RootTag} from '../Types/RootTagTypes'; import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger'; import type {DisplayModeType} from './DisplayMode'; +import type {ViewStyleProp} from '../StyleSheet/StyleSheet'; import BatchedBridge from '../BatchedBridge/BatchedBridge'; import BugReporting from '../BugReporting/BugReporting'; @@ -60,6 +61,9 @@ export type Registry = { export type WrapperComponentProvider = ( appParameters: Object, ) => React$ComponentType; +export type RootViewStyleProvider = ( + appParameters: Object, +) => ViewStyleProp; const runnables: Runnables = {}; let runCount = 1; @@ -70,6 +74,7 @@ let componentProviderInstrumentationHook: ComponentProviderInstrumentationHook = (component: ComponentProvider) => component(); let wrapperComponentProvider: ?WrapperComponentProvider; +let rootViewStyleProvider: ?RootViewStyleProvider; let showArchitectureIndicator = false; /** @@ -82,6 +87,10 @@ const AppRegistry = { wrapperComponentProvider = provider; }, + setRootViewStyleProvider(provider: RootViewStyleProvider) { + rootViewStyleProvider = provider; + }, + enableArchitectureIndicator(enabled: boolean): void { showArchitectureIndicator = enabled; }, @@ -130,6 +139,7 @@ const AppRegistry = { appParameters.initialProps, appParameters.rootTag, wrapperComponentProvider && wrapperComponentProvider(appParameters), + rootViewStyleProvider && rootViewStyleProvider(appParameters), appParameters.fabric, showArchitectureIndicator, scopedPerformanceLogger, diff --git a/packages/react-native/Libraries/ReactNative/renderApplication.js b/packages/react-native/Libraries/ReactNative/renderApplication.js index c6ca67f40144b9..d87af4755af090 100644 --- a/packages/react-native/Libraries/ReactNative/renderApplication.js +++ b/packages/react-native/Libraries/ReactNative/renderApplication.js @@ -9,6 +9,7 @@ */ import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger'; +import type {ViewStyleProp} from '../StyleSheet/StyleSheet'; import GlobalPerformanceLogger from '../Utilities/GlobalPerformanceLogger'; import PerformanceLoggerContext from '../Utilities/PerformanceLoggerContext'; @@ -32,6 +33,7 @@ export default function renderApplication( initialProps: Props, rootTag: any, WrapperComponent?: ?React.ComponentType, + rootViewStyle?: ?ViewStyleProp, fabric?: boolean, showArchitectureIndicator?: boolean, scopedPerformanceLogger?: IPerformanceLogger, @@ -52,6 +54,7 @@ export default function renderApplication( fabric={fabric} showArchitectureIndicator={showArchitectureIndicator} WrapperComponent={WrapperComponent} + rootViewStyle={rootViewStyle} initialProps={initialProps ?? Object.freeze({})} internal_excludeLogBox={isLogBox}>