map ::backdrop backgroundColor to RN modal backdropColor

Author: Jta26

packages/react-strict-dom/src/native/css/index.js

@@ -452,6 +452,8 @@ export function props(
     // '::placeholder' polyfill
     else if (styleProp === 'placeholderTextColor') {
       nativeProps.placeholderTextColor = styleValue;
+    } else if (styleProp === 'backdropColor') {
+      nativeProps.backdropColor = styleValue;
     }
     // visibility polyfill
     // Note: we can't polyfill nested visibility changes

packages/react-strict-dom/src/native/css/processStyle.js

@@ -79,7 +79,6 @@ export function processStyle(
       }
       continue;
     }
-
     // Object values
     else if (typeof styleValue === 'object' && styleValue != null) {
       if (propName === '::placeholder') {
@@ -97,6 +96,21 @@ export function processStyle(
           }
         }
         continue;
+      } else if (propName === '::backdrop') {
+        const backdropStyleProps = Object.keys(styleValue);
+        for (let i = 0; i < backdropStyleProps.length; i++) {
+          const prop = backdropStyleProps[i];
+          if (prop === 'backgroundColor') {
+            result['backdropColor'] = processStyle({
+              backgroundColor: styleValue.backgroundColor
+            }).backgroundColor;
+          } else {
+            if (__DEV__) {
+              warnMsg(`unsupported "::backdrop" style property "${prop}"`);
+            }
+          }
+        }
+        continue;
       } else if (Object.hasOwn(styleValue, 'default')) {
         result[propName] = processStyle(styleValue);
         continue;

packages/react-strict-dom/src/types/renderer.native.js

@@ -31,6 +31,10 @@ import type {
   // $FlowFixMe(nonstrict-import)
   ViewProps
 } from 'react-native/Libraries/Components/View/ViewPropTypes';
+import type {
+  // $FlowFixMe(nonstrict-import)
+  ModalProps
+} from 'react-native/Libraries/Modal/Modal';
 
 type ReactNativeProps = {
   accessible?: ViewProps['accessible'],
@@ -105,6 +109,7 @@ type ReactNativeProps = {
   onTouchMove?: ViewProps['onTouchMove'],
   placeholder?: TextInputProps['placeholder'],
   placeholderTextColor?: TextInputProps['placeholderTextColor'],
+  backdropColor?: ModalProps['backdropColor'],
   pointerEvents?: ViewProps['pointerEvents'],
   ref?: $FlowFixMe,
   referrerPolicy?: ImageProps['referrerPolicy'],