Added dark mode support

alessiocancian · Jul 1, 2021 · c21fc9c · c21fc9c
1 parent 2b7869d
commit c21fc9c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 29 deletions.
diff --git a/lib/ActionSheetCustom.js b/lib/ActionSheetCustom.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Text, View, Dimensions, Modal, TouchableHighlight, Animated, ScrollView, Easing, SafeAreaView, LayoutChangeEvent } from 'react-native'
+import { Text, View, Dimensions, Modal, TouchableHighlight, Animated, ScrollView, Easing, SafeAreaView, LayoutChangeEvent, Appearance } from 'react-native'
 import * as utils from './utils'
 import styles2 from './styles'
 import { BlurView } from '@react-native-community/blur'
@@ -9,9 +9,8 @@ const MAX_HEIGHT = Dimensions.get('window').height * 0.7
 
 class ActionSheet extends React.Component {
   static defaultProps = {
-    tintColor: '#007AFF',
     disabledColor: '#A0A0A0',
-    buttonUnderlayColor: '#F4F4F4',
+    buttonUnderlayColor: '#A0A0A055',
     disabledIndexes: [],
     onPress: () => {},
     styles: {},
@@ -83,14 +82,18 @@ class ActionSheet extends React.Component {
     }).start(callback)
   }
 
+  _textColor = (mergedStyles) => {
+    return this._isDarkMode() ? mergedStyles.textDarkTheme : mergedStyles.textLightTheme
+  }
+
   _renderTitle () {
     const { title, styles } = this.props
     const mergedStyles = getMergedStyles(styles)
     if (!title) return null
     return (
       <View style={mergedStyles.titleBox}>
         {React.isValidElement(title) ? title : (
-          <Text style={mergedStyles.titleText}>{title}</Text>
+          <Text style={[mergedStyles.titleText, this._textColor(mergedStyles)]}>{title}</Text>
         )}
       </View>
     )
@@ -103,7 +106,7 @@ class ActionSheet extends React.Component {
     return (
       <View style={mergedStyles.messageBox}>
         {React.isValidElement(message) ? message : (
-          <Text style={mergedStyles.messageText}>{message}</Text>
+          <Text style={[mergedStyles.messageText, this._textColor(mergedStyles)]}>{message}</Text>
         )}
       </View>
     )
@@ -117,7 +120,8 @@ class ActionSheet extends React.Component {
 
   _createButton (title, index) {
     const styles = getMergedStyles(this.props.styles)
-    const { buttonUnderlayColor, cancelButtonIndex, destructiveButtonIndex, disabledIndexes, tintColor, disabledColor } = this.props
+    const { buttonUnderlayColor, cancelButtonIndex, destructiveButtonIndex, disabledIndexes, disabledColor } = this.props
+		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
@@ -129,8 +133,8 @@ class ActionSheet extends React.Component {
       <TouchableHighlight
         key={index}
         activeOpacity={1}
-        underlayColor={buttonUnderlayColor}
-        style={buttonBoxStyle}
+        underlayColor={this._isDarkMode() ? "#fff3" : "#00000015"}
+        style={[buttonBoxStyle, { borderTopColor: this._isDarkMode() ? "#fff5" : "#0005" }]}
         onPress={() => this.hide(index)}
         disabled={isDisabled}
       >
@@ -148,11 +152,16 @@ class ActionSheet extends React.Component {
     })
   }
 
+	_isDarkMode = () => {
+		return (this.props.userInterfaceStyle || Appearance.getColorScheme()) == "dark"
+	}
+
   render () {
     const styles = getMergedStyles(this.props.styles)
     const iosStyle = this.props.theme == "ios"
     const boxStyle = iosStyle ? styles.roundedBox : {}
     const { visible, sheetAnim, scrollEnabled, translateY } = this.state
+    const darkMode = this._isDarkMode()
     return (
       <Modal visible={visible}
         animationType='none'
@@ -173,12 +182,12 @@ class ActionSheet extends React.Component {
             ]}
             onLayout={this.onLayout}
           >
-            <BlurView style={[boxStyle, { backgroundColor: "#fffb"}]} blurType="light" blurAmount={30}>
+            <BlurView style={[boxStyle, { backgroundColor: darkMode ? "#DCDCDE55" : "#fffb"}]} blurType={darkMode ? "prominent" : "light"} blurAmount={30}>
               {this._renderTitle()}
               {this._renderMessage()}
               <ScrollView scrollEnabled={scrollEnabled}>{this._renderOptions()}</ScrollView>
             </BlurView>
-            <View style={[boxStyle, { marginTop: 6 }]}>
+            <View style={[boxStyle, { marginTop: 8, backgroundColor: darkMode ? "#2C2C2E" : "#fff" }]}>
               {this._renderCancelButton()}
             </View>
           </Animated.View>

diff --git a/lib/styles.js b/lib/styles.js
@@ -22,56 +22,56 @@ export default {
   bodyIos: {
     flex: 1,
     alignSelf: 'flex-end',
-    padding: 10,
+    padding: 8,
+    paddingBottom: 0,
   },
   titleBox: {
     paddingTop: 15,
     paddingBottom: 5,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#fff'
   },
   titleText: {
-    color: '#757575',
     fontSize: 14,
+    fontWeight: "bold",
     textAlign: "center",
   },
   messageBox: {
-    paddingLeft: 10,
-    paddingRight: 10,
-    paddingBottom: 10,
+    paddingHorizontal: 15,
+    paddingBottom: 20,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#fff',
   },
   messageText: {
-    color: '#9a9a9a',
-    fontSize: 12,
+    fontSize: 13,
     textAlign: "center",
   },
+  textLightTheme: {
+    color: "#7c7c7c",
+  },
+  textDarkTheme: {
+    color: "#a4a4A4",
+  },
   buttonBox: {
-    height: 48,
+    height: 57,
     borderTopWidth: hairlineWidth,
-    borderTopColor: "#bababa",
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#fff'
   },
   buttonText: {
-    fontSize: 18
+    fontSize: 20,
   },
   cancelButtonBox: {
-    height: 50,
+    height: 57,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#fff'
   },
   cancelButtonText: {
-    fontSize: 18,
-    fontWeight: "600",
+    fontSize: 20,
+    fontWeight: "500",
   },
   roundedBox: {
-    borderRadius: 10,
+    borderRadius: 13,
     overflow: "hidden",
   },
-}
+}