Verification Code Input with Reanimated

What's This About?

Technical Implementation

• Code validation
• Input handling
• Visual feedback
• Animated transitions
• State management

Usage

// Basic usage with correct code
<VerificationCode correctCode={31415} />

// Verification code screen
<VerificationCodeScreen
  correctCode={correctCode}
  onSuccess={() => {
    // Handle successful verification
  }}
  onError={() => {
    // Handle verification error
  }}
/>

// Code validation
const validateCode = (input: string) => {
  return input === String(correctCode);
};

// Input handling
const handleCodeChange = (code: string) => {
  if (code.length === CODE_LENGTH) {
    const isValid = validateCode(code);
    if (isValid) {
      onSuccess?.();
    } else {
      onError?.();
    }
  }
};

// Animated feedback
const animatedStyle = useAnimatedStyle(() => ({
  transform: [
    {
      translateX: withSpring(isError.value ? 10 : 0, {
        damping: 3,
        stiffness: 100
      })
    }
  ]
}));