fix: ensure transparent and backdropColor take precedence over style prop

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

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 = {};
+    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',
   },
 });