fix(example): add light surface behind shadow demo for visibility

Author: janicduplessis

example/src/demos/ShadowDemo.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Text, StyleSheet, Platform } from 'react-native';
+import { View, Text, StyleSheet, Platform } from 'react-native';
 import { EaseView } from 'react-native-ease';
 
 import { Section } from '../components/Section';
@@ -9,35 +9,37 @@ export function ShadowDemo() {
   const [active, setActive] = useState(false);
   return (
     <Section title="Shadow / Elevation">
-      <EaseView
-        animate={
-          active
-            ? {
-                shadowOpacity: 0.4,
-                shadowRadius: 16,
-                shadowOffset: { width: 0, height: 8 },
-                elevation: 12,
-              }
-            : {
-                shadowOpacity: 0,
-                shadowRadius: 0,
-                shadowOffset: { width: 0, height: 0 },
-                elevation: 0,
-              }
-        }
-        transition={{
-          shadow: { type: 'spring', damping: 15, stiffness: 120 },
-        }}
-        style={styles.box}
-      >
-        <Text style={styles.text}>
-          {active
-            ? Platform.OS === 'android'
-              ? 'Elevated'
-              : 'Shadow'
-            : 'Flat'}
-        </Text>
-      </EaseView>
+      <View style={styles.surface}>
+        <EaseView
+          animate={
+            active
+              ? {
+                  shadowOpacity: 0.4,
+                  shadowRadius: 16,
+                  shadowOffset: { width: 0, height: 8 },
+                  elevation: 12,
+                }
+              : {
+                  shadowOpacity: 0,
+                  shadowRadius: 0,
+                  shadowOffset: { width: 0, height: 0 },
+                  elevation: 0,
+                }
+          }
+          transition={{
+            shadow: { type: 'spring', damping: 15, stiffness: 120 },
+          }}
+          style={styles.box}
+        >
+          <Text style={styles.text}>
+            {active
+              ? Platform.OS === 'android'
+                ? 'Elevated'
+                : 'Shadow'
+              : 'Flat'}
+          </Text>
+        </EaseView>
+      </View>
       <Button
         label={active ? 'Remove' : 'Add Shadow'}
         onPress={() => setActive((v) => !v)}
@@ -47,6 +49,12 @@ export function ShadowDemo() {
 }
 
 const styles = StyleSheet.create({
+  surface: {
+    backgroundColor: '#e8eaf0',
+    borderRadius: 12,
+    padding: 32,
+    alignItems: 'center',
+  },
   box: {
     width: 100,
     height: 100,