alessiocancian / react-native-actionsheet

An elegant ActionSheet component for React Native.
MIT License
63 stars 24 forks source link

Remove default background color & border that make it harder to customize the from `style` prop #18

Open 0had0 opened 2 years ago

0had0 commented 2 years ago

Hi! πŸ‘‹

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

Today I used patch-package to patch @alessiocancian/react-native-actionsheet@3.1.1 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/@alessiocancian/react-native-actionsheet/lib/ActionSheetCustom.js b/node_modules/@alessiocancian/react-native-actionsheet/lib/ActionSheetCustom.js
index 548e08b..7f60a37 100644
--- a/node_modules/@alessiocancian/react-native-actionsheet/lib/ActionSheetCustom.js
+++ b/node_modules/@alessiocancian/react-native-actionsheet/lib/ActionSheetCustom.js
@@ -140,7 +140,7 @@ class ActionSheet extends React.Component {
   _createButton (title, index) {
     const styles = getMergedStyles(this.props.styles)
     const { buttonUnderlayColor, cancelButtonIndex, destructiveButtonIndex, disabledIndexes, disabledColor } = this.props
-    const tintColor = this.props.tintColor || this._isDarkMode() ? "#4793FF" : "#007AFF"
+    const tintColor = this.props.tintColor ?? (this._isDarkMode() ? "#4793FF" : "#007AFF")
     const fontColor = destructiveButtonIndex === index ? WARN_COLOR : tintColor
     const isCancel = cancelButtonIndex === index
     const buttonBoxStyle = isCancel ? styles.cancelButtonBox : styles.buttonBox
@@ -217,9 +217,9 @@ class ActionSheet extends React.Component {
                 scrollEnabled ? { flex: 1 } : {},
                 { flexDirection: "column" },
                 Platform.OS == "ios" ? {
-                  backgroundColor: darkMode ? "#DCDCDE55" : "#fffb",
+                  // backgroundColor: darkMode ? "#DCDCDE55" : "#fffb",
                 } : {
-                  backgroundColor: darkMode ? "#2C2C2E" : "#fff",
+                  // backgroundColor: darkMode ? "#2C2C2E" : "#fff",
                 },
               ]}
               blurType={darkMode ? "prominent" : "light"}
@@ -227,7 +227,7 @@ class ActionSheet extends React.Component {
             >
               {this._renderTitle()}
               {this._renderMessage()}
-              <View style={this._getBorderTopStyle()} />
+              {/* <View style={this._getBorderTopStyle()} /> */}
               <ScrollView indicatorStyle={darkMode ? "white" : "black"} scrollEnabled={scrollEnabled} style={scrollEnabled ? { flex: 1 } : {}}>{this._renderOptions()}</ScrollView>
             </BlurView>
             <View style={[boxStyle, { marginTop: 8, backgroundColor: darkMode ? "#2C2C2E" : "#fff" }]}>

This issue body was partially generated by patch-package.