Fixed Android appearence

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

Hide file tree

Showing 4 changed files with 36 additions and 5 deletions.
diff --git a/lib/ActionSheetCustom.js b/lib/ActionSheetCustom.js
@@ -2,7 +2,8 @@ import React from 'react'
 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'
+import BlurView from './BlurView'
+import { Platform } from 'react-native'
 
 const WARN_COLOR = '#FF3B30'
 const MAX_HEIGHT = Dimensions.get('window').height * 0.7
@@ -177,12 +178,30 @@ class ActionSheet extends React.Component {
           />
           <Animated.View
             style={[
-              iosStyle ? styles.bodyIos : styles.body,
-              { opacity: translateY ? 1 : 0,  transform: [{ translateY: sheetAnim.interpolate({ inputRange: [0, 1], outputRange: [0, translateY] }) }] }
+              iosStyle ? styles.bodyIos : darkMode ? styles.bodyDark : styles.body,
+              { opacity: translateY ? 1 : 0,
+                transform: [{
+                  translateY: sheetAnim.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, translateY],
+                  })
+                }]
+              },
             ]}
             onLayout={this.onLayout}
           >
-            <BlurView style={[boxStyle, { backgroundColor: darkMode ? "#DCDCDE55" : "#fffb"}]} blurType={darkMode ? "prominent" : "light"} blurAmount={30}>
+            <BlurView
+              style={[
+                boxStyle,
+                Platform.OS == "ios" ? {
+                  backgroundColor: darkMode ? "#DCDCDE55" : "#fffb",
+                } : {
+                  backgroundColor: darkMode ? "#2C2C2E" : "#fff",
+                },
+              ]}
+              blurType={darkMode ? "prominent" : "light"}
+              blurAmount={30}
+            >
               {this._renderTitle()}
               {this._renderMessage()}
               <ScrollView scrollEnabled={scrollEnabled}>{this._renderOptions()}</ScrollView>

diff --git a/lib/BlurView.ios.js b/lib/BlurView.ios.js
@@ -0,0 +1,4 @@
+
+import { BlurView } from '@react-native-community/blur'
+
+export default BlurView
diff --git a/lib/BlurView.js b/lib/BlurView.js
@@ -0,0 +1,4 @@
+import { View } from "react-native"
+
+const BlurView = View
+export default BlurView;
diff --git a/lib/styles.js b/lib/styles.js
@@ -19,11 +19,15 @@ export default {
     alignSelf: 'flex-end',
     backgroundColor: '#e5e5e5'
   },
+  bodyDark: {
+    flex: 1,
+    alignSelf: 'flex-end',
+    backgroundColor: '#404040',
+  },
   bodyIos: {
     flex: 1,
     alignSelf: 'flex-end',
     padding: 8,
-    paddingBottom: 0,
   },
   titleBox: {
     paddingTop: 15,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@

		import { BlurView } from '@react-native-community/blur'

		export default BlurView