From ad0f25de680134304b5523dbd28e571b5771b094 Mon Sep 17 00:00:00 2001
From: Anurag Yadav <78202060+AnuMessi10@users.noreply.github.com>
Date: Sun, 22 Mar 2026 03:18:34 +0530
Subject: [PATCH 1/2] fix: forward style prop to Modal inner container View

Modal accepts `style` via ViewProps but silently discards it.
The inner container View only applies `styles.container` and
`containerStyles` (which handles `backdropColor`/`transparent`),
ignoring any style prop passed by the consumer.

This means `<Modal style={{ padding: 20 }}>` has no effect even
though the types allow it.

Forward `this.props.style` as the last element in the style array
so consumer styles are applied and can override defaults.
---
 packages/react-native/Libraries/Modal/Modal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-native/Libraries/Modal/Modal.js b/packages/react-native/Libraries/Modal/Modal.js
index 1fabac7de3d..7cf25d52655 100644
--- a/packages/react-native/Libraries/Modal/Modal.js
+++ b/packages/react-native/Libraries/Modal/Modal.js
@@ -349,7 +349,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
           <ScrollView.Context.Provider value={null}>
             <View
               // $FlowFixMe[incompatible-type]
-              style={[styles.container, containerStyles]}
+              style={[styles.container, containerStyles, this.props.style]}
               collapsable={false}>
               {innerChildren}
             </View>

From 88b45be14c45df9dd670e8a983805b1effb296dc Mon Sep 17 00:00:00 2001
From: Anurag Yadav <78202060+AnuMessi10@users.noreply.github.com>
Date: Fri, 27 Mar 2026 02:54:59 +0530
Subject: [PATCH 2/2] fix: ensure transparent and backdropColor take precedence
 over style prop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reorder the style array so explicit Modal API props (transparent,
backdropColor) always win over the generic style prop. Move the
default backgroundColor into styles.container so user styles can
override the default but not the explicit props.

Precedence: styles.container (default white) → this.props.style → containerStyles
- <Modal style={{ backgroundColor: 'red' }}> → red (user overrides default)
- <Modal transparent> → transparent (explicit prop wins over style)
- <Modal transparent style={{ backgroundColor: 'red' }}> → transparent wins
- <Modal backdropColor="blue" style={{ backgroundColor: 'red' }}> → blue wins
- <Modal style={{ padding: 20 }}> → works, no conflicts
---
 .../react-native/Libraries/Modal/Modal.js     | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/react-native/Libraries/Modal/Modal.js b/packages/react-native/Libraries/Modal/Modal.js
index 7cf25d52655..0556317132d 100644
--- a/packages/react-native/Libraries/Modal/Modal.js
+++ b/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 = {};
+    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, this.props.style]}
+              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',
   },
 });