suiss/uim · Block

Verify Code

A two-factor screen with a six-digit code input, a resend timer and a confirmation once verified.

Verify Code is an open-source mobile screen from suiss/uim for React Native and Expo, with SwiftUI and Jetpack Compose versions built from the same design tokens. The @esuiss/uim CLI copies its source into your project, so you own the code.

iOS
Verify Code on iOS in light mode

An InputOTP with six slots checks the code when the last digit is entered; a wrong code shakes the input and shows an error, and a correct one shows a verified screen. A resend link counts down from 30 seconds, and a help link sits below.

Installation

$ pnpm dlx @esuiss/uim@latest add verify-code

The CLI also adds what it builds on: Icon, Input Otp, Keyboard Scroll View, Screen, Text.

Manual

  1. Install the dependencies:
npx expo install cn phosphor-react-native react-native-reanimated react-native-svg react-native-worklets

  1. Add the pieces it builds on: Icon, Input Otp, Keyboard Scroll View, Screen, Text.

  2. Copy the source into components/blocks/verify-code.tsx:

uniwind/components/blocks/verify-code.tsx
import { cn } from "cn"
import { CheckIcon, LockSimpleIcon } from "phosphor-react-native"
import * as React from "react"
import { Pressable, View } from "react-native"
import {
  FadeInDown,
  ReduceMotion,
  useAnimatedStyle,
  useSharedValue,
  withSequence,
  withTiming,
} from "react-native-reanimated"
import { AnimatedView } from "@/components/ui/animated-view"
import { Icon } from "@/components/ui/icon"
import {
  InputOTP,
  1. Update the import paths to match your project.

Usage

import { VerifyCode } from "@/components/blocks/verify-code"
<VerifyCode />

onVerify receives the code and returns a boolean or a promise; by default it accepts the demo code 482913. onHelp handles the help link.