fix: shadows ugly on ios

components/common/customCard/CustomCard.tsx

@@ -1,12 +1,38 @@
-import { View, Text, StyleSheet } from 'react-native'
+import { View, Text, StyleSheet, Platform } from 'react-native'
 import React from 'react'
 import { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'
 import { useThemeColor } from '../../../hooks/hooks'
 import { SHADOWS } from '../../../constants/theme'
 
+function generateBoxShadowStyle(
+  xOffset: number,
+  yOffset: number,
+  shadowColorIos: string,
+  shadowOpacity: number,
+  shadowRadius: number,
+  elevation: number,
+  shadowColorAndroid: string
+):void {
+  if(Platform.OS === 'ios'){
+    styles.boxShadow = {
+      shadowColor: shadowColorIos,
+      shadowOffset : {width: xOffset, height: yOffset},
+      shadowOpacity,
+      shadowRadius,
+      backgroundColor: useThemeColor("backgroundColor")
+    }
+  }else if (Platform.OS === 'android'){
+    styles.boxShadow = {
+      elevation: elevation,
+      shadowColor: shadowColorAndroid,
+    };
+  }
+}
+
 export default function CustomCard(props : ViewProps) {
+  generateBoxShadowStyle(1, 1, '#171717', 0.2, 20, 10, '#171717')
   return (
-    <View style={[styles.container, SHADOWS.light, props.style]}>
+    <View style={[styles.container, styles.boxShadow, props.style]}>
       {props.children}
     </View>
   )
@@ -18,6 +44,7 @@ const styles = StyleSheet.create({
     alignItems: "stretch",
     alignContent: "space-between",
     borderRadius: 20,
-    marginHorizontal: 10
-  }
+    marginHorizontal: 10,
+  },
+  boxShadow: {},
 })