feat(example): add example actions

Author: yjose

example/src/fake-caret.tsx

@@ -1,4 +1,4 @@
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, type ViewStyle } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   withRepeat,
@@ -8,7 +8,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useEffect } from 'react';
 
-export function FakeCaret() {
+export function FakeCaret({ style }: { style?: ViewStyle }) {
   const opacity = useSharedValue(1);
 
   useEffect(() => {
@@ -28,7 +28,9 @@ export function FakeCaret() {
 
   return (
     <View style={styles.fakeCaretContainer}>
-      <Animated.View style={[styles.fakeCaret, animatedStyle]} />
+      <Animated.View
+        style={StyleSheet.flatten([styles.fakeCaret, style, animatedStyle])}
+      />
     </View>
   );
 }

example/src/stripe.tsx

@@ -1,30 +1,75 @@
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
 import { OTPInput, type SlotProps } from 'input-otp-native';
 import { FakeCaret } from './fake-caret';
+import type { OTPInputRef } from '../../src/types';
+import { useRef } from 'react';
 
 export default function StripeOTPInput() {
-  return (
-    <OTPInput
-      containerStyle={styles.container}
-      maxLength={6}
-      render={({ slots }) => (
-        <>
-          <View style={styles.slotsContainer}>
-            {slots.slice(0, 3).map((slot, idx) => (
-              <Slot key={idx} {...slot} index={idx} />
-            ))}
-          </View>
+  const ref = useRef<OTPInputRef>(null);
 
-          <FakeDash />
+  return (
+    <View>
+      <OTPInput
+        ref={ref}
+        containerStyle={styles.container}
+        maxLength={6}
+        render={({ slots, isFocused }) => (
+          <>
+            <View style={styles.slotsContainer}>
+              {slots.slice(0, 3).map((slot, idx) => (
+                <Slot key={idx} {...slot} index={idx} />
+              ))}
+            </View>
+            {isFocused && <FakeDash />}
+            <FakeDash />
 
-          <View style={styles.slotsContainer}>
-            {slots.slice(3).map((slot, idx) => (
-              <Slot key={idx} {...slot} index={idx} />
-            ))}
-          </View>
-        </>
-      )}
-    />
+            <View style={styles.slotsContainer}>
+              {slots.slice(3).map((slot, idx) => (
+                <Slot key={idx} {...slot} index={idx} />
+              ))}
+            </View>
+          </>
+        )}
+      />
+      <View style={styles.actionsContainer}>
+        <Pressable
+          style={({ pressed }) => [
+            styles.actionButton,
+            pressed && styles.actionButtonPressed,
+          ]}
+          onPress={() => ref.current?.focus()}
+        >
+          <Text style={styles.actionButtonText}>Focus</Text>
+        </Pressable>
+        <Pressable
+          style={({ pressed }) => [
+            styles.actionButton,
+            pressed && styles.actionButtonPressed,
+          ]}
+          onPress={() => ref.current?.blur()}
+        >
+          <Text style={styles.actionButtonText}>Blur</Text>
+        </Pressable>
+        <Pressable
+          style={({ pressed }) => [
+            styles.actionButton,
+            pressed && styles.actionButtonPressed,
+          ]}
+          onPress={() => ref.current?.clear()}
+        >
+          <Text style={styles.actionButtonText}>Clear</Text>
+        </Pressable>
+        <Pressable
+          style={({ pressed }) => [
+            styles.actionButton,
+            pressed && styles.actionButtonPressed,
+          ]}
+          onPress={() => ref.current?.setValue('123')}
+        >
+          <Text style={styles.actionButtonText}>Set Value</Text>
+        </Pressable>
+      </View>
+    </View>
   );
 }
 
@@ -97,4 +142,34 @@ const styles = StyleSheet.create({
     backgroundColor: '#E5E7EB',
     borderRadius: 1,
   },
+  actionsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    marginTop: 24,
+    justifyContent: 'center',
+  },
+  actionButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    backgroundColor: '#4F46E5',
+    borderRadius: 6,
+    elevation: 2,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 1.41,
+  },
+  actionButtonPressed: {
+    backgroundColor: '#4338CA',
+    transform: [{ scale: 0.98 }],
+  },
+  actionButtonText: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    fontWeight: '500',
+  },
 });