mxck / react-native-material-menu

Pure JavaScript material menu component for React Native
MIT License
512 stars 91 forks source link

Please add modalBackgroundColor prop #108

Closed moremi closed 2 years ago

moremi commented 3 years ago

Hi! πŸ‘‹

Firstly, thanks for your work on this project! πŸ™‚

Today I used patch-package to patch react-native-material-menu@1.2.0 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-material-menu/src/Menu.js b/node_modules/react-native-material-menu/src/Menu.js
index 597812c..0fd9e18 100644
--- a/node_modules/react-native-material-menu/src/Menu.js
+++ b/node_modules/react-native-material-menu/src/Menu.js
@@ -189,7 +189,7 @@ class Menu extends React.Component {
     const animationStarted = menuState === STATES.ANIMATING;
     const modalVisible = menuState === STATES.SHOWN || animationStarted;

-    const { testID, button, style, children } = this.props;
+    const { testID, button, style, children, modalBackgroundColor } = this.props;

     return (
       <View ref={this._setContainerRef} collapsable={false} testID={testID}>
@@ -208,7 +208,7 @@ class Menu extends React.Component {
           transparent
         >
           <TouchableWithoutFeedback onPress={this._hide} accessible={false}>
-            <View style={StyleSheet.absoluteFill}>
+            <View style={{...StyleSheet.absoluteFill, ...(modalBackgroundColor && {backgroundColor: modalBackgroundColor} || undefined)}}>
               <Animated.View
                 onLayout={this._onMenuLayout}
                 style={[
@@ -233,6 +233,7 @@ class Menu extends React.Component {

 Menu.defaultProps = {
   animationDuration: 300,
+  modalBackgroundColor: null,
 };

 const styles = StyleSheet.create({

This issue body was partially generated by patch-package.

mxck commented 3 years ago

@moremi Hi! Thanks for the suggestion. Can you do a PR? Also, do you think it would be useful for the user to change the whole style instead of only backgroundColor?