From c1bea515760b8d52a0baaf55c7bb4c2d0f4611e1 Mon Sep 17 00:00:00 2001
From: Jakob Stornig <jastornig@edu.aau.at>
Date: Wed, 6 Dec 2023 11:34:06 +0100
Subject: [PATCH] fix: shadows ugly on ios

---
 components/common/customCard/CustomCard.tsx | 35 ++++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/components/common/customCard/CustomCard.tsx b/components/common/customCard/CustomCard.tsx
index 99ebaa3..289df26 100644
--- a/components/common/customCard/CustomCard.tsx
+++ b/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: {},
 })
\ No newline at end of file