Add shadows to cover images

src/components/Colors.tsx

@@ -37,6 +37,8 @@ function generateStyles(scheme: ColorSchemeName) {
         },
         imageBackground: {
             backgroundColor: scheme === 'dark' ? '#161616' : '#eee',
+            borderWidth: 0.5,
+            borderColor: scheme === 'dark' ? '#444' : '#ddd',
         },
         modal: {
             backgroundColor: scheme === 'dark' ? '#000' : '#fff',
@@ -60,6 +62,9 @@ function generateStyles(scheme: ColorSchemeName) {
         divider: {
             backgroundColor: scheme === 'dark' ? '#333' : '#eee',
         },
+        filter: {
+            backgroundColor: scheme === 'dark' ? '#161616' : '#f3f3f3',
+        },
     });
 }
 

src/components/Shadow.tsx

@@ -0,0 +1,35 @@
+import React, { PropsWithChildren } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+export const shadowSmall = StyleSheet.create({
+    shadowColor: "#000",
+    shadowOffset: {
+    width: 0,
+        height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 2.62,
+    elevation: 4,
+});
+
+export const shadowMedium = StyleSheet.create({
+    shadowColor: "#000",
+    shadowOffset: {
+        width: 0,
+        height: 3,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4.65,
+    elevation: 6,
+});
+
+type SizeProp = 'small' | 'medium';
+
+const shadowMap: Record<SizeProp, StyleSheet.NamedStyles<unknown>> = {
+    'small': shadowSmall,
+    'medium': shadowMedium,
+};
+
+export const ShadowWrapper = ({ children, size = 'small' }: PropsWithChildren<{ size?: SizeProp }>) => (
+    <View style={shadowMap[size]}>{children}</View>
+);