input-otp-native/lib/module/input.js

One time passcode Input For React Native/Expo. Unstyled and fully customizable.

"use strict";

import * as React from 'react';
import { TextInput, StyleSheet, Pressable, Platform } from 'react-native';
import { useInput } from "./use-input.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const OTPInput = /*#__PURE__*/React.forwardRef(({
  onChange,
  maxLength,
  pattern,
  placeholder,
  inputMode = 'numeric',
  containerStyle,
  onComplete,
  render,
  ...props
}, ref) => {
  const {
    inputRef,
    contextValue,
    value,
    handlers,
    actions
  } = useInput({
    onChange,
    maxLength,
    pattern,
    placeholder,
    defaultValue: props.defaultValue,
    onComplete
  });
  React.useImperativeHandle(ref, () => ({
    setValue: newValue => {
      handlers.onChangeText(newValue);
    },
    focus: () => {
      actions.focus();
      // for test only we need to call onFocus
      handlers.onFocus();
    },
    blur: () => inputRef.current?.blur(),
    clear: actions.clear
  }));
  const renderedChildren = React.useMemo(() => {
    if (render) {
      return render(contextValue);
    }
    return null;
  }, [contextValue, render]);
  const onPress = React.useCallback(() => {
    actions.focus();
    actions.clear();
  }, [actions]);
  return /*#__PURE__*/_jsxs(Pressable, {
    testID: "otp-input-container",
    style: [styles.container, containerStyle],
    onPress: onPress,
    children: [renderedChildren, /*#__PURE__*/_jsx(TextInput, {
      ref: inputRef,
      style: styles.input,
      maxLength: maxLength,
      value: value,
      onChangeText: handlers.onChangeText,
      onFocus: handlers.onFocus,
      onBlur: handlers.onBlur,
      placeholder: placeholder,
      inputMode: inputMode,
      autoComplete: Platform.OS === 'android' ? 'sms-otp' : 'one-time-code',
      clearTextOnFocus: true,
      accessible: true,
      accessibilityRole: "text",
      testID: "otp-input",
      ...props
    })]
  });
});
OTPInput.displayName = 'OTPInput';
const styles = StyleSheet.create({
  container: {
    position: 'relative'
  },
  input: {
    ...StyleSheet.absoluteFillObject,
    opacity: 0,
    backgroundColor: 'red'
  }
});
//# sourceMappingURL=input.js.map