Otp Input

import React, {  createContext,  memo,  useContext,  useEffect,  useRef,  useState,  type FC,  type FunctionComponent,} from "react";import {  Dimensions,  Keyboard,  Pressable,  StyleSheet,  TextInput,  View,  type ViewStyle,} from "react-native";import Animated, {  useSharedValue,  useAnimatedStyle,  withTiming,  withSequence,  withSpring,  FadeInDown,  FadeOutDown,  LinearTransition,  interpolateColor,} from "react-native-reanimated";import type { IOtpInput, IOtpContext, IOtpItem } from "./types";import { ANIMATION_VARIATIONS } from "./const";const { width: WIDTH } = Dimensions.get("window");const OtpContext = createContext<IOtpContext>({} as IOtpContext);const OtpItem: FC<IOtpItem> & FunctionComponent<IOtpItem> = ({  index,}: IOtpItem):  | (React.ReactNode & React.JSX.Element & React.ReactElement)  | null => {  const {    inputRef,    onPress,    otpValue,    onFocusNext,    onFocusPrevious,    setFocus,    setOtpValue,    focus,    autoFocus,    containerStyle,    otpInputStyle,    textStyle,    otpCount = 6,    editable,    error,    rest,    inputBorderRadius,    inputHeight,    inputWidth,    animationVariant = "fadeSlideDown",    focusedBackgroundColor = "#0f0f23",    unfocusedBackgroundColor = "#1a1a2e",    focusedBorderColor = "rgba(248, 250, 252, 1)",    unfocusedBorderColor = "rgba(248, 250, 252, 0.3)",    errorBackgroundColor = "#1c0a0a",    errorBorderColor = "#ef4444",  }: IOtpContext = useContext<IOtpContext>(OtpContext);  const borderWidth = useSharedValue<number>(focus === index ? 2 : 1);  const inputScale = useSharedValue<number>(1);  const focusProgress = useSharedValue<number>(focus === index ? 1 : 0);  const errorProgress = useSharedValue<number>(error ? 1 : 0);  const animations = ANIMATION_VARIATIONS[animationVariant];  useEffect(() => {    borderWidth.value = withTiming<number>(focus === index ? 2 : 1, {      duration: 1200,    });    focusProgress.value = withTiming<number>(focus === index ? 1 : 0, {      duration: 200,    });    if (focus === index) {      inputScale.value = withSequence<number>(        withSpring(1.05, { damping: 50, stiffness: 120, mass: 0.5 }),        withSpring(1, { damping: 50, stiffness: 120, mass: 0.5 }),      );    }  }, [focus]);  useEffect(() => {    errorProgress.value = withTiming<number>(error ? 1 : 0, {      duration: 200,    });  }, [error]);  useEffect(() => {    if (otpValue) {      if ((otpValue[index]?.length ?? 0) > 1) {        const format = otpValue[index]?.substring(0, otpCount);        const numbers = format?.split("") ?? [];        setOtpValue(numbers);        setFocus(-1);        Keyboard.dismiss();      }    }  }, [otpValue]);  const animatedInputStyle = useAnimatedStyle<    Pick<      ViewStyle,      "borderWidth" | "borderColor" | "backgroundColor" | "transform"    >  >(() => {    const normalBg = interpolateColor(      focusProgress.value,      [0, 1],      [unfocusedBackgroundColor, focusedBackgroundColor],    );    const backgroundColor = interpolateColor(      errorProgress.value,      [0, 1],      [normalBg, errorBackgroundColor],    );    const normalBorder = interpolateColor(      focusProgress.value,      [0, 1],      [unfocusedBorderColor, focusedBorderColor],    );    const borderColor = interpolateColor(      errorProgress.value,      [0, 1],      [normalBorder, errorBorderColor],    );    return {      borderWidth: borderWidth.value,      borderColor,      backgroundColor,      transform: [{ scale: inputScale.value }],    };  });  const getTextStyle = () => {    if (error) {      return [styles.text, styles.textError, textStyle];    }    return [styles.text, textStyle];  };  return (    <View key={index} style={[containerStyle]}>      <TextInput        style={[          styles.inputSize,          otpInputStyle,          {            color: "transparent",            width: inputWidth,            height: inputHeight,            borderRadius: inputBorderRadius,          },        ]}        caretHidden        keyboardType="number-pad"        ref={inputRef.current[index]}        value={otpValue[index]}        onChangeText={(v) => onFocusNext(v, index)}        onKeyPress={(e) => onFocusPrevious(e.nativeEvent.key, index)}        textContentType="oneTimeCode"        autoFocus={autoFocus && index === 0}        {...rest}      />      <Pressable disabled={!editable} onPress={onPress} style={styles.overlay}>        <Animated.View          layout={LinearTransition.springify()}          style={[            styles.input,            styles.inputSize,            {              width: inputWidth,              height: inputHeight,              borderRadius: inputBorderRadius,            },            animatedInputStyle,          ]}        >          {otpValue[index] !== "" && (            <Animated.Text              entering={animations.entering}              exiting={animations.exiting}              style={getTextStyle()}            >              {otpValue[index]}            </Animated.Text>          )}        </Animated.View>      </Pressable>    </View>  );};export const OtpInput: FC<IOtpInput> & FunctionComponent<IOtpInput> =  memo<IOtpInput>(    ({      otpCount = 6,      containerStyle = {},      otpInputStyle = {},      textStyle = {},      focusedColor = "#f8fafc",      editable = true,      enteringAnimated = FadeInDown,      exitingAnimated = FadeOutDown,      onInputFinished,      onInputChange,      error = false,      errorMessage = "Invalid OTP. Please try again.",      inputBorderRadius = 20,      inputWidth = 60,      inputHeight = 60,      animationVariant = "fadeSlideDown",      focusedBackgroundColor = "#0f0f23",      unfocusedBackgroundColor = "#1a1a2e",      focusedBorderColor = "rgba(248, 250, 252, 1)",      unfocusedBorderColor = "rgba(248, 250, 252, 0.3)",      errorBackgroundColor = "#1c0a0a",      errorBorderColor = "#ef4444",      ...rest    }: IOtpInput):      | (React.ReactNode & React.JSX.Element & React.ReactElement)      | null => {      const inputRef = useRef<any[]>([]);      const data: string[] = new Array(otpCount).fill("");      inputRef.current = data.map(        (_, index) => (inputRef.current[index] = React.createRef<TextInput>()),      );      const [focus, setFocus] = useState<number>(0);      const [otpValue, setOtpValue] = useState<string[]>(data);      const opacity = useSharedValue<number>(1);      const translateX = useSharedValue<number>(0);      const onPress = () => {        if (focus === -1) {          setFocus(otpCount - 1);          otpValue[data.length - 1] = "";          setOtpValue([...otpValue]);          inputRef.current[data.length - 1].current.focus();        } else {          inputRef.current[focus].current.focus();        }      };      const onFocusNext = <V extends string, I extends number>(        value: V,        index: I,      ) => {        if (index < data.length - 1 && value) {          inputRef.current[index + 1].current.focus();          setFocus(index + 1);        }        if (index === data.length - 1) {          setFocus(-1);          inputRef.current[index].current.blur();        }        otpValue[index] = value;        setOtpValue([...otpValue]);      };      const onFocusPrevious = <K extends string, I extends number>(        key: K,        index: I,      ) => {        if (key === "Backspace" && index !== 0) {          inputRef.current[index - 1].current.focus();          setFocus(index - 1);          otpValue[index - 1] = "";          setOtpValue([...otpValue]);        } else if (key === "Backspace" && index === 0) {          otpValue[0] = "";        }      };      if (otpCount < 4 || otpCount > 6) {        throw new Error("OTP Count min is 4 and max is 6");      }      const animatedContainerStyle = useAnimatedStyle<        Pick<ViewStyle, "opacity" | "transform">      >(() => ({        opacity: opacity.value,        transform: [{ translateX: translateX.value }],      }));      const triggerCompleteAnimation = () => {        opacity.value = withSequence<number>(          withTiming(0.6, { duration: 900 }),          withTiming(1, { duration: 900 }),        );      };      const triggerShakeAnimation = () => {        translateX.value = withSequence<number>(          withTiming(-4, { duration: 50 }),          withTiming(4, { duration: 50 }),          withTiming(-3, { duration: 50 }),          withTiming(3, { duration: 50 }),          withTiming(-2, { duration: 50 }),          withTiming(2, { duration: 50 }),          withTiming(0, { duration: 50 }),        );      };      const inputProps: IOtpContext = {        inputRef,        otpValue,        onPress,        onFocusNext,        onFocusPrevious,        setFocus,        setOtpValue,        focus,        containerStyle,        otpInputStyle,        textStyle,        focusedColor,        otpCount,        editable,        enteringAnimated,        exitingAnimated,        error,        inputBorderRadius,        inputWidth,        inputHeight,        animationVariant,        focusedBackgroundColor,        unfocusedBackgroundColor,        focusedBorderColor,        unfocusedBorderColor,        errorBackgroundColor,        errorBorderColor,        ...rest,      };      useEffect(() => {        onInputChange?.(otpValue?.join(""));        if (          otpValue &&          otpValue.join("").length === otpCount &&          onInputFinished        ) {          if (!error) {            triggerCompleteAnimation();          }          onInputFinished(otpValue.join(""));        }      }, [otpValue]);      useEffect(() => {        if (error) {          triggerShakeAnimation();          const timeout = setTimeout(() => {            otpValue.fill("");            setOtpValue([...otpValue]);            setFocus(0);            inputRef.current[0].current.focus();          }, 1000);          return () => clearTimeout(timeout);        }      }, [error]);      return (        <OtpContext.Provider value={inputProps}>          <Animated.View style={[styles.container]}>            <Animated.View style={[styles.row, animatedContainerStyle]}>              {data.map((_, i) => (                <OtpItem key={i} index={i} />              ))}            </Animated.View>            {error && errorMessage && (              <Animated.Text                entering={FadeInDown.duration(200)}                exiting={FadeOutDown.duration(200)}                style={styles.errorMessage}              >                {errorMessage}              </Animated.Text>            )}          </Animated.View>        </OtpContext.Provider>      );    },  );export default memo<FC<IOtpInput> & FunctionComponent<IOtpInput>>(OtpInput);const styles = StyleSheet.create({  container: {    width: WIDTH,    height: 120,  },  row: {    flexDirection: "row",    alignItems: "center",    justifyContent: "center",  },  inputSize: {    marginHorizontal: 6,  },  input: {    alignItems: "center",    justifyContent: "center",    backgroundColor: "#1a1a2e",    borderWidth: 1,    borderColor: "rgba(248, 250, 252, 0.2)",  },  inputFocused: {    borderColor: "#f8fafc",    backgroundColor: "#0f0f23",  },  inputError: {    borderColor: "#ef4444",    backgroundColor: "#1c0a0a",  },  text: {    fontWeight: "600",    fontSize: 18,    color: "#f8fafc",  },  textError: {    color: "#fecaca",  },  overlay: {    position: "absolute",  },  errorMessage: {    color: "#ef4444",    fontSize: 14,    fontWeight: "500",    textAlign: "center",    marginTop: 20,    paddingHorizontal: 16,  },});