feat(example): add border demo

Author: janicduplessis

example/src/demos/BorderDemo.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { Text, StyleSheet } from 'react-native';
+import { EaseView } from 'react-native-ease';
+
+import { Section } from '../components/Section';
+import { Button } from '../components/Button';
+
+export function BorderDemo() {
+  const [active, setActive] = useState(false);
+  return (
+    <Section title="Border">
+      <EaseView
+        animate={{
+          borderWidth: active ? 4 : 0,
+          borderColor: active ? '#e74c3c' : '#4a90d9',
+        }}
+        transition={{
+          border: { type: 'spring', damping: 15, stiffness: 120 },
+        }}
+        style={styles.box}
+      >
+        <Text style={styles.text}>{active ? 'Red' : 'None'}</Text>
+      </EaseView>
+      <Button
+        label={active ? 'Remove' : 'Add Border'}
+        onPress={() => setActive((v) => !v)}
+      />
+    </Section>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: {
+    width: 100,
+    height: 100,
+    borderRadius: 16,
+    backgroundColor: '#f0f0f0',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    color: '#333',
+    fontSize: 13,
+    fontWeight: '700',
+  },
+});

example/src/demos/index.ts

@@ -5,6 +5,7 @@ import { BackgroundColorDemo } from './BackgroundColorDemo';
 import { BenchmarkDemo } from './BenchmarkDemo';
 import { BannerDemo } from './BannerDemo';
 import { CardFlipDemo } from './CardFlipDemo';
+import { BorderDemo } from './BorderDemo';
 import { BorderRadiusDemo } from './BorderRadiusDemo';
 import { ButtonDemo } from './ButtonDemo';
 import { CombinedDemo } from './CombinedDemo';
@@ -62,6 +63,11 @@ export const demos: Record<string, DemoEntry> = {
     title: 'Styled Card',
     section: 'Style',
   },
+  'border': {
+    component: BorderDemo,
+    title: 'Border',
+    section: 'Style',
+  },
   'border-radius': {
     component: BorderRadiusDemo,
     title: 'Border Radius',