Building a One-Time Code Field in Expo — SMS Autofill and Segmented Display Together

A segmented look from one TextInput

With the foundation in place, draw the value one character at a time to form the boxes. The key idea: the drawn boxes are display-only, while the hidden TextInput handles taps and keystrokes. All you add is a bridge — tapping a box refocuses the hidden input.

import { useRef, useState } from "react";
import { Pressable, TextInput, View, Text } from "react-native";
 
const LENGTH = 6;
 
export function OtpInput({ onComplete }: { onComplete: (v: string) => void }) {
  const [code, setCode] = useState("");
  const inputRef = useRef<TextInput>(null);
 
  const handleChange = (raw: string) => {
    // Strip non-digits, then cap at the length
    const next = raw.replace(/[^0-9]/g, "").slice(0, LENGTH);
    setCode(next);
    if (next.length === LENGTH) {
      onComplete(next); // auto-advance once all six are in
    }
  };
 
  const cells = Array.from({ length: LENGTH }, (_, i) => code[i] ?? "");
 
  return (
    <Pressable onPress={() => inputRef.current?.focus()}>
      <View style={{ flexDirection: "row", gap: 8 }}>
        {cells.map((ch, i) => (
          <View
            key={i}
            style={{
              width: 44, height: 52, borderRadius: 10,
              borderWidth: 1,
              borderColor: i === code.length ? "#3b82f6" : "#d1d5db",
              alignItems: "center", justifyContent: "center",
            }}
          >
            <Text style={{ fontSize: 22 }}>{ch}</Text>
          </View>
        ))}
      </View>
      <TextInput
        ref={inputRef}
        value={code}
        onChangeText={handleChange}
        keyboardType="number-pad"
        textContentType="oneTimeCode"
        autoComplete="sms-otp"
        maxLength={LENGTH}
        autoFocus
        style={{ position: "absolute", opacity: 0 }}
      />
    </Pressable>
  );
}

Changing the border color of the currently focused box (i === code.length) gives a clear "you are here" cue even without a visible caret. That small touch does a lot for how reassuring the field feels on a real device.

Make paste and delete painless

Autofill and the segmented look still are not enough — real usage trips here. Two pitfalls to close off in advance.

Paste: receive all six at once

The first is paste. Plenty of people long-press the code in the SMS body and paste it. A six-box implementation fills only one box, but with the single-TextInput approach handleChange receives all six characters at once, so slice(0, LENGTH) distributes them across the boxes correctly. The code above already absorbs paste.

Delete: catch Backspace in one place

The second is delete. On some devices the number-pad delete key does not fire onChangeText when the value is empty. To reliably remove one box at a time, catch Backspace in onKeyPress and drop the last character.

import type { NativeSyntheticEvent, TextInputKeyPressEventData } from "react-native";
 
const handleKeyPress = (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
  if (e.nativeEvent.key === "Backspace") {
    setCode((prev) => prev.slice(0, -1));
  }
};
 
// attach as <TextInput ... onKeyPress={handleKeyPress} />

On some devices onChangeText and onKeyPress both fired, deleting two characters per tap. I settled it by routing deletion solely through onKeyPress and letting onChangeText handle only "what was added," keeping their roles separate. A small detail, but one you will not catch without testing across a few physical devices.

Where problems stopped me during testing

Load this onto real hardware and a few production-relevant notes emerge.

Split what you verify on simulator vs device

The iOS simulator never shows the SMS suggestion, so it is easy to conclude the feature is broken. The chip only appears once a real SMS arrives, so limit simulator checks to the segmented display and paste, and confirm autofill on a device.

Android's sms-otp sometimes requires an app-linked hash or a specific format in the SMS body. When that is missing, no suggestion appears even though nothing is wrong with the UI — and you end up endlessly doubting your layout. If autofill will not show, suspect the message format first.

Code fields also have a subtle snag where the keyboard lingers after paste and hides the confirm button. Call Keyboard.dismiss() once six digits are in, so attention moves to the confirm button and the final tap feels light.

The call I make

For a verification code field, I recommend placing a transparent single TextInput and drawing your own boxes rather than pulling in a heavy library. With no extra dependency it holds up better across Expo updates, and you keep direct control over the three things that matter — autofill, paste, and delete.

I keep the box count behind a single LENGTH constant, so the same component covers both four-digit and six-digit cases. It is a plain-looking screen, but when it is smooth the whole sign-up leaves a better impression. I hope this helps with your own build, and thank you for reading.