feat(example): add shadow/elevation demo

Author: janicduplessis

example/src/demos/ShadowDemo.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { Text, StyleSheet, Platform } from 'react-native';
+import { EaseView } from 'react-native-ease';
+
+import { Section } from '../components/Section';
+import { Button } from '../components/Button';
+
+export function ShadowDemo() {
+  const [active, setActive] = useState(false);
+  return (
+    <Section title="Shadow / Elevation">
+      <EaseView
+        animate={
+          active
+            ? {
+                shadowOpacity: 0.4,
+                shadowRadius: 16,
+                shadowOffsetX: 0,
+                shadowOffsetY: 8,
+                elevation: 12,
+              }
+            : {
+                shadowOpacity: 0,
+                shadowRadius: 0,
+                shadowOffsetX: 0,
+                shadowOffsetY: 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>
+      <Button
+        label={active ? 'Remove' : 'Add Shadow'}
+        onPress={() => setActive((v) => !v)}
+      />
+    </Section>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: {
+    width: 100,
+    height: 100,
+    borderRadius: 16,
+    backgroundColor: '#fff',
+    shadowColor: '#000',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    color: '#333',
+    fontSize: 13,
+    fontWeight: '700',
+  },
+});

example/src/demos/index.ts

@@ -23,6 +23,7 @@ import { StyleReRenderDemo } from './StyleReRenderDemo';
 import { StyledCardDemo } from './StyledCardDemo';
 import { TransformOriginDemo } from './TransformOriginDemo';
 import { PerPropertyDemo } from './PerPropertyDemo';
+import { ShadowDemo } from './ShadowDemo';
 import { SpinDemo } from './SpinDemo';
 import { UniwindDemo } from './uniwind/UniwindDemo';
 
@@ -72,6 +73,11 @@ export const demos: Record<string, DemoEntry> = {
     title: 'Background Color',
     section: 'Style',
   },
+  'shadow': {
+    component: ShadowDemo,
+    title: 'Shadow',
+    section: 'Style',
+  },
   'style-rerender': {
     component: StyleReRenderDemo,
     title: 'Style Re-Render',