Add ability to override the ViewStyle of the root View component

acoates-ms · May 23, 2024 · c2fe647 · c2fe647
1 parent b7fc586
commit c2fe647
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 3 deletions.
diff --git 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}
     </View>
@@ -167,7 +168,7 @@ const AppContainer = ({
     <RootTagContext.Provider value={createRootTag(rootTag)}>
       <View
         ref={appContainerRootViewRef}
-        style={styles.container}
+        style={rootViewStyle || styles.container}
         pointerEvents="box-none">
         {innerView}
 

diff --git 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 (
     <RootTagContext.Provider value={createRootTag(rootTag)}>
-      <View style={styles.root} pointerEvents="box-none">
+      <View style={rootViewStyle || styles.root} pointerEvents="box-none">
         {innerView}
       </View>
     </RootTagContext.Provider>

diff --git 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<any>,
+  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
@@ -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<void>;
 type TaskProvider = () => Task;
@@ -34,6 +35,10 @@ export type WrapperComponentProvider = (
   appParameters: any,
 ) => React.ComponentType<any>;
 
+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
@@ -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<any>;
+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
@@ -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<Props: Object>(
   initialProps: Props,
   rootTag: any,
   WrapperComponent?: ?React.ComponentType<any>,
+  rootViewStyle?: ?ViewStyleProp,
   fabric?: boolean,
   showArchitectureIndicator?: boolean,
   scopedPerformanceLogger?: IPerformanceLogger,
@@ -52,6 +54,7 @@ export default function renderApplication<Props: Object>(
         fabric={fabric}
         showArchitectureIndicator={showArchitectureIndicator}
         WrapperComponent={WrapperComponent}
+        rootViewStyle={rootViewStyle}
         initialProps={initialProps ?? Object.freeze({})}
         internal_excludeLogBox={isLogBox}>
         <RootComponent {...initialProps} rootTag={rootTag} />