fix: forward style prop to Modal inner container View (#56181)

Summary:
`Modal` accepts a `style` prop via `ViewProps` (since `ModalProps` spreads `...ViewProps`) but silently discards it. The inner container `<View>` only applies `styles.container` and `containerStyles` (which handles `backdropColor`/`transparent`), so any style passed by the consumer has no effect.

For example, `<Modal style={{ padding: 20 }}>` compiles without errors but the padding is never applied.

This PR forwards `this.props.style` to the inner container View with a carefully designed precedence chain:

```
styles.container (layout defaults + white background)
  → this.props.style (consumer overrides)
    → containerStyles (explicit transparent / backdropColor always win)
```

`containerStyles` now only sets `backgroundColor` when `transparent` or `backdropColor` are explicitly passed, ensuring these Modal-specific API props always take precedence over the generic `style` prop while still allowing consumers to customize other style properties.

**Precedence examples:**
| Usage | Result |
|---|---|
| `<Modal style={{ backgroundColor: 'red' }}>` | Red (user overrides default white) |
| `<Modal transparent>` | Transparent (explicit prop wins) |
| `<Modal transparent style={{ backgroundColor: 'red' }}>` | Transparent wins |
| `<Modal backdropColor="blue" style={{ backgroundColor: 'red' }}>` | Blue wins |
| `<Modal style={{ padding: 20 }}>` | Works, no conflicts |

## Changelog:

[GENERAL] [FIXED] - Forward `style` prop to Modal's inner container View with correct precedence so consumer styles are applied without overriding `transparent` or `backdropColor`

Pull Request resolved: #56181

Test Plan:
1. Render a Modal with a custom style prop:

   ```jsx
   <Modal visible style={{ padding: 40, backgroundColor: 'red' }}>
     <View style={{ flex: 1, backgroundColor: 'white' }}>
       <Text>Hello</Text>
     </View>
   </Modal>
   ```

2. **Before fix:** `padding` and `backgroundColor` are silently ignored
3. **After fix:** The modal container has 40px padding and a red background

Also verified that:
- `transparent={true}` always produces a transparent background, even if `style={{ backgroundColor }}` is set
- `backdropColor` always takes precedence over `style.backgroundColor`
- Default behavior (no `style` prop) is unchanged — white background
- Non-backgroundColor style properties (padding, margin, etc.) work without conflicts

Reviewed By: javache

Differential Revision: D101170804

Pulled By: zeyap

fbshipit-source-id: b138648ce41b55eb794c79a0217f905d5cc9a5f2

Author: AnuMessi10

packages/react-native/Libraries/Modal/Modal.js

@@ -288,12 +288,16 @@ class Modal extends React.Component<ModalProps, ModalState> {
       return null;
     }
 
-    const containerStyles = {
-      backgroundColor:
-        this.props.transparent === true
-          ? 'transparent'
-          : (this.props.backdropColor ?? 'white'),
-    };
+    // Only override backgroundColor when transparent or backdropColor are
+    // explicitly set, so that these Modal-specific props take precedence
+    // over the generic style prop. The default backgroundColor ('white')
+    // is defined in styles.container below.
+    const containerStyles: {backgroundColor?: ColorValue} = {};
+    if (this.props.transparent === true) {
+      containerStyles.backgroundColor = 'transparent';
+    } else if (this.props.backdropColor != null) {
+      containerStyles.backgroundColor = this.props.backdropColor;
+    }
 
     let animationType = this.props.animationType || 'none';
 
@@ -349,7 +353,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
           <ScrollView.Context.Provider value={null}>
             <View
               // $FlowFixMe[incompatible-type]
-              style={[styles.container, containerStyles]}
+              style={[styles.container, this.props.style, containerStyles]}
               collapsable={false}>
               {innerChildren}
             </View>
@@ -380,6 +384,7 @@ const styles = StyleSheet.create({
     [side]: 0,
     top: 0,
     flex: 1,
+    backgroundColor: 'white',
   },
 });
 

packages/react-native/Libraries/Modal/__tests__/__snapshots__/Modal-test.js.snap

@@ -26,13 +26,13 @@ exports[`Modal should render as <RCTModalHostView> when not mocked 1`] = `
     style={
       Array [
         Object {
+          "backgroundColor": "white",
           "flex": 1,
           "left": 0,
           "top": 0,
         },
-        Object {
-          "backgroundColor": "white",
-        },
+        undefined,
+        Object {},
       ]
     }
   >