react-native-windows 0.75.4 → 0.76.0-preview.2

package/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -8,9 +8,10 @@
  * @format
  */
 
+import type {ViewProps} from '../../Components/View/ViewPropTypes';
 import type {LogLevel} from '../Data/LogBoxLog';
 
-import StatusBar from '../../Components/StatusBar/StatusBar';
+import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
@@ -26,16 +27,19 @@ type Props = $ReadOnly<{
   level: LogLevel,
 }>;
 
+const LogBoxInspectorHeaderSafeArea: React.AbstractComponent<ViewProps> =
+  Platform.OS === 'android' ? View : SafeAreaView;
+
 export default function LogBoxInspectorHeader(props: Props): React.Node {
   if (props.level === 'syntax') {
     return (
-      <View style={[styles.safeArea, styles[props.level]]}>
+      <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
         <View style={styles.header}>
           <View style={styles.title}>
             <Text style={styles.titleText}>Failed to compile</Text>
           </View>
         </View>
-      </View>
+      </LogBoxInspectorHeaderSafeArea>
     );
   }
 
@@ -47,7 +51,7 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
   const titleText = `Log ${props.selectedIndex + 1} of ${props.total}`;
 
   return (
-    <View style={[styles.safeArea, styles[props.level]]}>
+    <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
       <View style={styles.header}>
         <LogBoxInspectorHeaderButton
           disabled={props.total <= 1}
@@ -65,7 +69,7 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
           onPress={() => props.onSelectIndex(nextIndex)}
         />
       </View>
-    </View>
+    </LogBoxInspectorHeaderSafeArea>
   );
 }
 
@@ -101,7 +105,4 @@ const styles = StyleSheet.create({
     includeFontPadding: false,
     lineHeight: 20,
   },
-  safeArea: {
-    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 40,
-  },
 });

package/Libraries/LogBox/UI/LogBoxInspectorHeader.windows.js

@@ -8,9 +8,10 @@
  * @format
  */
 
+import type {ViewProps} from '../../Components/View/ViewPropTypes';
 import type {LogLevel} from '../Data/LogBoxLog';
 
-import StatusBar from '../../Components/StatusBar/StatusBar';
+import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
@@ -26,16 +27,19 @@ type Props = $ReadOnly<{
   level: LogLevel,
 }>;
 
+const LogBoxInspectorHeaderSafeArea: React.AbstractComponent<ViewProps> =
+  Platform.OS === 'android' ? View : SafeAreaView;
+
 export default function LogBoxInspectorHeader(props: Props): React.Node {
   if (props.level === 'syntax') {
     return (
-      <View style={[styles.safeArea, styles[props.level]]}>
+      <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
         <View style={styles.header}>
           <View style={styles.title}>
             <Text style={styles.titleText}>Failed to compile</Text>
           </View>
         </View>
-      </View>
+      </LogBoxInspectorHeaderSafeArea>
     );
   }
 
@@ -47,7 +51,7 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
   const titleText = `Log ${props.selectedIndex + 1} of ${props.total}`;
 
   return (
-    <View style={[styles.safeArea, styles[props.level]]}>
+    <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
       <View style={styles.header}>
         <LogBoxInspectorHeaderButton
           disabled={props.total <= 1}
@@ -65,7 +69,7 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
           onPress={() => props.onSelectIndex(nextIndex)}
         />
       </View>
-    </View>
+    </LogBoxInspectorHeaderSafeArea>
   );
 }
 
@@ -105,7 +109,4 @@ const styles = StyleSheet.create({
     includeFontPadding: false,
     lineHeight: 20,
   },
-  safeArea: {
-    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 40,
-  },
 });

package/Libraries/Modal/Modal.js

@@ -218,7 +218,6 @@ class Modal extends React.Component<Props, State> {
   }
 
   componentWillUnmount() {
-    this.setState({isRendered: false});
     if (this._eventSubscription) {
       this._eventSubscription.remove();
     }

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -166,9 +166,17 @@ const validAttributesForNonEventProps = {
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   transform: true,
   transformOrigin: true,
-  experimental_filter: {
+  experimental_backgroundImage: {
+    process: require('../StyleSheet/processBackgroundImage').default,
+  },
+  boxShadow: {
+    process: require('../StyleSheet/processBoxShadow').default,
+  },
+  filter: {
     process: require('../StyleSheet/processFilter').default,
   },
+  experimental_mixBlendMode: true,
+  isolation: true,
   opacity: true,
   elevation: true,
   shadowColor: {process: require('../StyleSheet/processColor').default},

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -193,9 +193,12 @@ const validAttributesForNonEventProps = {
   accessibilityViewIsModal: true,
   accessibilityElementsHidden: true,
   accessibilityIgnoresInvertColors: true,
+  accessibilityShowsLargeContentViewer: true,
+  accessibilityLargeContentTitle: true,
   testID: true,
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   backfaceVisibility: true,
+  cursor: true,
   opacity: true,
   shadowColor: {process: require('../StyleSheet/processColor').default},
   shadowOffset: {diff: require('../Utilities/differ/sizesDiffer')},
@@ -214,15 +217,22 @@ const validAttributesForNonEventProps = {
   role: true,
   borderRadius: true,
   borderColor: {process: require('../StyleSheet/processColor').default},
+  borderBlockColor: {process: require('../StyleSheet/processColor').default},
   borderCurve: true,
   borderWidth: true,
+  borderBlockWidth: true,
   borderStyle: true,
   hitSlop: {diff: require('../Utilities/differ/insetsDiffer')},
   collapsable: true,
   collapsableChildren: true,
-  experimental_filter: {
+  filter: {
     process: require('../StyleSheet/processFilter').default,
   },
+  boxShadow: {
+    process: require('../StyleSheet/processBoxShadow').default,
+  },
+  experimental_mixBlendMode: true,
+  isolation: true,
 
   borderTopWidth: true,
   borderTopColor: {process: require('../StyleSheet/processColor').default},
@@ -233,9 +243,15 @@ const validAttributesForNonEventProps = {
   borderLeftWidth: true,
   borderLeftColor: {process: require('../StyleSheet/processColor').default},
   borderStartWidth: true,
+  borderBlockStartWidth: true,
   borderStartColor: {process: require('../StyleSheet/processColor').default},
+  borderBlockStartColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
   borderEndWidth: true,
+  borderBlockEndWidth: true,
   borderEndColor: {process: require('../StyleSheet/processColor').default},
+  borderBlockEndColor: {process: require('../StyleSheet/processColor').default},
 
   borderTopLeftRadius: true,
   borderTopRightRadius: true,

package/Libraries/NativeComponent/BaseViewConfig.windows.js

@@ -213,9 +213,12 @@ const validAttributesForNonEventProps = {
   accessibilityViewIsModal: true,
   accessibilityElementsHidden: true,
   accessibilityIgnoresInvertColors: true,
+  accessibilityShowsLargeContentViewer: true,
+  accessibilityLargeContentTitle: true,
   testID: true,
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   backfaceVisibility: true,
+  cursor: true,
   opacity: true,
   shadowColor: {process: require('../StyleSheet/processColor').default},
   shadowOffset: {diff: require('../Utilities/differ/sizesDiffer')},
@@ -234,15 +237,22 @@ const validAttributesForNonEventProps = {
   role: true,
   borderRadius: true,
   borderColor: {process: require('../StyleSheet/processColor').default},
+  borderBlockColor: {process: require('../StyleSheet/processColor').default},
   borderCurve: true,
   borderWidth: true,
+  borderBlockWidth: true,
   borderStyle: true,
   hitSlop: {diff: require('../Utilities/differ/insetsDiffer')},
   collapsable: true,
   collapsableChildren: true,
-  experimental_filter: {
+  filter: {
     process: require('../StyleSheet/processFilter').default,
   },
+  boxShadow: {
+    process: require('../StyleSheet/processBoxShadow').default,
+  },
+  experimental_mixBlendMode: true,
+  isolation: true,
 
   borderTopWidth: true,
   borderTopColor: {process: require('../StyleSheet/processColor').default},
@@ -253,9 +263,15 @@ const validAttributesForNonEventProps = {
   borderLeftWidth: true,
   borderLeftColor: {process: require('../StyleSheet/processColor').default},
   borderStartWidth: true,
+  borderBlockStartWidth: true,
   borderStartColor: {process: require('../StyleSheet/processColor').default},
+  borderBlockStartColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
   borderEndWidth: true,
+  borderBlockEndWidth: true,
   borderEndColor: {process: require('../StyleSheet/processColor').default},
+  borderBlockEndColor: {process: require('../StyleSheet/processColor').default},
 
   borderTopLeftRadius: true,
   borderTopRightRadius: true,

package/Libraries/NativeComponent/NativeComponentRegistry.js

@@ -11,12 +11,12 @@
 import type {
   HostComponent,
   PartialViewConfig,
+  ViewConfig,
 } from '../Renderer/shims/ReactNativeTypes';
 
 import getNativeComponentAttributes from '../ReactNative/getNativeComponentAttributes';
 import UIManager from '../ReactNative/UIManager';
 import * as ReactNativeViewConfigRegistry from '../Renderer/shims/ReactNativeViewConfigRegistry';
-import verifyComponentAttributeEquivalence from '../Utilities/verifyComponentAttributeEquivalence';
 import * as StaticViewConfigValidator from './StaticViewConfigValidator';
 import {createViewConfig} from './ViewConfig';
 import invariant from 'invariant';
@@ -34,7 +34,6 @@ let getRuntimeConfig;
 export function setRuntimeConfigProvider(
   runtimeConfigProvider: (name: string) => ?{
     native: boolean,
-    strict: boolean,
     verify: boolean,
   },
 ): void {
@@ -54,13 +53,12 @@ export function get<Config>(
   viewConfigProvider: () => PartialViewConfig,
 ): HostComponent<Config> {
   ReactNativeViewConfigRegistry.register(name, () => {
-    const {native, strict, verify} = getRuntimeConfig?.(name) ?? {
+    const {native, verify} = getRuntimeConfig?.(name) ?? {
       native: !global.RN$Bridgeless,
-      strict: false,
       verify: false,
     };
 
-    let viewConfig;
+    let viewConfig: ViewConfig;
     if (native) {
       viewConfig =
         getNativeComponentAttributes(name) ??
@@ -81,27 +79,29 @@ export function get<Config>(
       const nativeViewConfig = native
         ? viewConfig
         : getNativeComponentAttributes(name);
-      const staticViewConfig = native
+
+      if (nativeViewConfig == null) {
+        // Defer to static view config if native view config is missing.
+        return viewConfig;
+      }
+
+      const staticViewConfig: ViewConfig = native
         ? createViewConfig(viewConfigProvider())
         : viewConfig;
 
-      if (strict) {
-        const validationOutput = StaticViewConfigValidator.validate(
-          name,
-          nativeViewConfig,
-          staticViewConfig,
+      const validationOutput = StaticViewConfigValidator.validate(
+        name,
+        nativeViewConfig,
+        staticViewConfig,
+      );
+
+      if (validationOutput.type === 'invalid') {
+        console.error(
+          StaticViewConfigValidator.stringifyValidationResult(
+            name,
+            validationOutput,
+          ),
         );
-
-        if (validationOutput.type === 'invalid') {
-          console.error(
-            StaticViewConfigValidator.stringifyValidationResult(
-              name,
-              validationOutput,
-            ),
-          );
-        }
-      } else {
-        verifyComponentAttributeEquivalence(nativeViewConfig, staticViewConfig);
       }
     }
 

package/Libraries/NativeComponent/StaticViewConfigValidator.js

@@ -22,11 +22,6 @@ export type Difference =
       path: Array<string>,
       nativeValue: mixed,
       staticValue: mixed,
-    }
-  | {
-      type: 'unexpected',
-      path: Array<string>,
-      staticValue: mixed,
     };
 
 export type ValidationResult = ValidResult | InvalidResult;
@@ -90,8 +85,6 @@ export function stringifyValidationResult(
           return `- '${path.join('.')}' is missing.`;
         case 'unequal':
           return `- '${path.join('.')}' is the wrong value.`;
-        case 'unexpected':
-          return `- '${path.join('.')}' is present but not expected to be.`;
       }
     }),
     '',
@@ -145,20 +138,6 @@ function accumulateDifferences(
       });
     }
   }
-
-  for (const staticKey in staticObject) {
-    if (
-      !nativeObject.hasOwnProperty(staticKey) &&
-      // $FlowFixMe[invalid-computed-prop]
-      !isIgnored(staticObject[staticKey])
-    ) {
-      differences.push({
-        path: [...path, staticKey],
-        type: 'unexpected',
-        staticValue: staticObject[staticKey],
-      });
-    }
-  }
 }
 
 function ifObject(value: mixed): ?{...} {

package/Libraries/Network/XMLHttpRequest.js

@@ -78,7 +78,9 @@ const REQUEST_EVENTS = [
 
 const XHR_EVENTS = REQUEST_EVENTS.concat('readystatechange');
 
-class XMLHttpRequestEventTarget extends (EventTarget(...REQUEST_EVENTS): any) {
+class XMLHttpRequestEventTarget extends (EventTarget(
+  ...REQUEST_EVENTS,
+): typeof EventTarget) {
   onload: ?Function;
   onloadstart: ?Function;
   onprogress: ?Function;
@@ -91,7 +93,7 @@ class XMLHttpRequestEventTarget extends (EventTarget(...REQUEST_EVENTS): any) {
 /**
  * Shared base for platform-specific XMLHttpRequest implementations.
  */
-class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): any) {
+class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): typeof EventTarget) {
   static UNSENT: number = UNSENT;
   static OPENED: number = OPENED;
   static HEADERS_RECEIVED: number = HEADERS_RECEIVED;

package/Libraries/ReactNative/AppContainer-dev.js

@@ -90,7 +90,6 @@ const AppContainer = ({
   internal_excludeInspector = false,
   internal_excludeLogBox = false,
   rootTag,
-  showArchitectureIndicator,
   WrapperComponent,
   rootViewStyle,
 }: Props): React.Node => {
@@ -150,10 +149,7 @@ const AppContainer = ({
 
   if (WrapperComponent != null) {
     innerView = (
-      <WrapperComponent
-        initialProps={initialProps}
-        fabric={fabric === true}
-        showArchitectureIndicator={showArchitectureIndicator === true}>
+      <WrapperComponent initialProps={initialProps} fabric={fabric === true}>
         {innerView}
       </WrapperComponent>
     );

package/Libraries/ReactNative/AppContainer-prod.js

@@ -21,7 +21,6 @@ const AppContainer = ({
   fabric,
   initialProps,
   rootTag,
-  showArchitectureIndicator,
   WrapperComponent,
   rootViewStyle,
 }: Props): React.Node => {
@@ -29,10 +28,7 @@ const AppContainer = ({
 
   if (WrapperComponent != null) {
     innerView = (
-      <WrapperComponent
-        initialProps={initialProps}
-        fabric={fabric === true}
-        showArchitectureIndicator={showArchitectureIndicator === true}>
+      <WrapperComponent initialProps={initialProps} fabric={fabric === true}>
         {innerView}
       </WrapperComponent>
     );

package/Libraries/ReactNative/AppContainer.js

@@ -8,8 +8,8 @@
  * @flow
  */
 
-import type {RootTag} from './RootTag';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {RootTag} from './RootTag';
 
 import * as React from 'react';
 
@@ -18,7 +18,6 @@ export type Props = $ReadOnly<{|
   fabric?: boolean,
   rootTag: number | RootTag,
   initialProps?: {...},
-  showArchitectureIndicator?: boolean,
   WrapperComponent?: ?React.ComponentType<any>,
   rootViewStyle?: ?ViewStyleProp,
   internal_excludeLogBox?: boolean,

package/Libraries/ReactNative/AppRegistry.d.ts

@@ -63,10 +63,6 @@ export namespace AppRegistry {
 
   export function registerConfig(config: AppConfig[]): void;
 
-  export function setRootViewStyleProvider(
-    provider: RootViewStyleProvider,
-  ): void;
-
   export function registerComponent(
     appKey: string,
     getComponentFunc: ComponentProvider,

package/Libraries/ReactNative/AppRegistry.js

@@ -8,10 +8,10 @@
  * @format
  */
 
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 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';
@@ -73,7 +73,6 @@ let componentProviderInstrumentationHook: ComponentProviderInstrumentationHook =
 
 let wrapperComponentProvider: ?WrapperComponentProvider;
 let rootViewStyleProvider: ?RootViewStyleProvider;
-let showArchitectureIndicator = false;
 
 /**
  * `AppRegistry` is the JavaScript entry point to running all React Native apps.
@@ -89,10 +88,6 @@ const AppRegistry = {
     rootViewStyleProvider = provider;
   },
 
-  enableArchitectureIndicator(enabled: boolean): void {
-    showArchitectureIndicator = enabled;
-  },
-
   registerConfig(config: Array<AppConfig>): void {
     config.forEach(appConfig => {
       if (appConfig.run) {
@@ -139,7 +134,6 @@ const AppRegistry = {
         wrapperComponentProvider && wrapperComponentProvider(appParameters),
         rootViewStyleProvider && rootViewStyleProvider(appParameters),
         appParameters.fabric,
-        showArchitectureIndicator,
         scopedPerformanceLogger,
         appKey === 'LogBox', // is logbox
         appKey,

package/Libraries/ReactNative/BridgelessUIManager.js

@@ -382,6 +382,7 @@ const UIManagerJS: UIManagerJSInterface & {[string]: any} = {
       shadowNode,
     );
 
+    // eslint-disable-next-line no-bitwise
     let isAncestor = (result & DOCUMENT_POSITION_CONTAINED_BY) !== 0;
 
     callback([isAncestor]);

package/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricHostComponent.js

@@ -20,7 +20,7 @@ import type {
 import type {ElementRef} from 'react';
 
 import TextInputState from '../../Components/TextInput/TextInputState';
-import {getNodeFromInternalInstanceHandle} from '../../Renderer/shims/ReactFabric';
+import {getNodeFromInternalInstanceHandle} from '../../ReactNative/RendererProxy';
 import {getFabricUIManager} from '../FabricUIManager';
 import {create} from './ReactNativeAttributePayload';
 import warnForStyleProps from './warnForStyleProps';

package/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance.js

@@ -15,7 +15,7 @@
 
 import type ReactNativeElement from '../../../src/private/webapis/dom/nodes/ReactNativeElement';
 import type ReadOnlyText from '../../../src/private/webapis/dom/nodes/ReadOnlyText';
-import typeof ReactFabricType from '../../Renderer/shims/ReactFabric';
+import typeof * as RendererProxyT from '../../ReactNative/RendererProxy';
 import type {
   InternalInstanceHandle,
   Node,
@@ -32,7 +32,7 @@ let PublicInstanceClass:
 let ReadOnlyTextClass: Class<ReadOnlyText>;
 
 // Lazy loaded to avoid evaluating the module when using the legacy renderer.
-let ReactFabric: ReactFabricType;
+let RendererProxy: RendererProxyT;
 
 export function createPublicInstance(
   tag: number,
@@ -78,10 +78,10 @@ export function getNodeFromPublicInstance(
     return null;
   }
 
-  if (ReactFabric == null) {
-    ReactFabric = require('../../Renderer/shims/ReactFabric');
+  if (RendererProxy == null) {
+    RendererProxy = require('../../ReactNative/RendererProxy');
   }
-  return ReactFabric.getNodeFromInternalInstanceHandle(
+  return RendererProxy.getNodeFromInternalInstanceHandle(
     publicInstance.__internalInstanceHandle,
   );
 }

package/Libraries/ReactNative/RendererImplementation.js

@@ -8,15 +8,19 @@
  * @flow strict-local
  */
 
-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import type {
+  HostComponent,
+  InternalInstanceHandle,
+  Node,
+} from '../Renderer/shims/ReactNativeTypes';
 import type ReactFabricHostComponent from './ReactFabricPublicInstance/ReactFabricHostComponent';
-import type {Element, ElementRef, ElementType} from 'react';
+import type {ElementRef, ElementType} from 'react';
 
 import {
   onCaughtError,
   onRecoverableError,
   onUncaughtError,
-} from '../Core/ErrorHandlers';
+} from '../../src/private/renderer/errorhandling/ErrorHandlers';
 import {type RootTag} from './RootTag';
 export function renderElement({
   element,
@@ -24,7 +28,7 @@ export function renderElement({
   useFabric,
   useConcurrentRoot,
 }: {
-  element: Element<ElementType>,
+  element: React.MixedElement,
   rootTag: number,
   useFabric: boolean,
   useConcurrentRoot: boolean,
@@ -139,3 +143,21 @@ export function isChildPublicInstance(
     childInstance,
   );
 }
+
+export function getNodeFromInternalInstanceHandle(
+  internalInstanceHandle: InternalInstanceHandle,
+): ?Node {
+  // This is only available in Fabric
+  return require('../Renderer/shims/ReactFabric').getNodeFromInternalInstanceHandle(
+    internalInstanceHandle,
+  );
+}
+
+export function getPublicInstanceFromInternalInstanceHandle(
+  internalInstanceHandle: InternalInstanceHandle,
+): mixed /*PublicInstance | PublicTextInstance | null*/ {
+  // This is only available in Fabric
+  return require('../Renderer/shims/ReactFabric').getPublicInstanceFromInternalInstanceHandle(
+    internalInstanceHandle,
+  );
+}

package/Libraries/ReactNative/getNativeComponentAttributes.js

@@ -10,8 +10,12 @@
 
 'use strict';
 
+import processBoxShadow from '../StyleSheet/processBoxShadow';
+
 const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
 const resolveAssetSource = require('../Image/resolveAssetSource');
+const processBackgroundImage =
+  require('../StyleSheet/processBackgroundImage').default;
 const processColor = require('../StyleSheet/processColor').default;
 const processColorArray = require('../StyleSheet/processColorArray');
 const processFilter = require('../StyleSheet/processFilter').default;
@@ -184,6 +188,10 @@ function getProcessorForType(typeName: string): ?(nextProp: any) => any {
     case 'UIImage':
     case 'RCTImageSource':
       return resolveAssetSource;
+    case 'BoxShadowArray':
+      return processBoxShadow;
+    case 'FilterArray':
+      return processFilter;
     // Android Types
     case 'Color':
       return processColor;
@@ -191,8 +199,12 @@ function getProcessorForType(typeName: string): ?(nextProp: any) => any {
       return processColorArray;
     case 'Filter':
       return processFilter;
+    case 'BackgroundImage':
+      return processBackgroundImage;
     case 'ImageSource':
       return resolveAssetSource;
+    case 'BoxShadow':
+      return processBoxShadow;
   }
   return null;
 }