◇ アプリ開発/2026-07-05中級

ワンタイムコードの入力欄をExpoで作る — SMS自動入力とセグメント表示を両立させる

6桁の確認コードを入れる画面は、見た目こそ単純ですが、SMSの自動入力・貼り付け・1文字ずつの削除まで含めると意外と作り込みが必要です。iOSとAndroidの自動入力を最初に押さえ、単一のTextInputで崩れにくいセグメント表示を組む実装をまとめました。

Rork⁴⁹⁸ Expo¹³⁹ React Native²⁰¹ 認証¹⁴ UX設計⁷

✦ プレミアム記事

個人開発で運用しているアプリに電話番号の確認を足したとき、最初は素朴に6つの TextInput を横並びにしました。見た目は整っていたのですが、テスターから「SMSで届いたコードが上に出てこない」「貼り付けたら1マス目にしか入らない」と立て続けに指摘が届きました。マスを分けた瞬間に、iOS の自動入力もクリップボードの一括貼り付けも壊れていたのです。私自身、App Store に複数のアプリを出しながら、この「確認コード欄」だけは何度も作り直してきました。

コードを入れる画面は、サインアップや決済の直前という、いちばん離脱されたくない場所に置かれます。ここで一手間かかるだけで、せっかく興味を持ってくれた人が離れてしまいます。今回は Expo（React Native）で、SMS の自動入力・貼り付け・削除のすべてが自然に動く入力欄を組み立てていきます。

マスを分けると自動入力が届かなくなる

確認コード欄でまず引っかかるのが「見た目」と「入力の実体」の食い違いです。デザイン上は1文字ずつ独立したマスに見せたい。けれど OS の自動入力は、ひとつの入力フィールドに対して「6桁の文字列」をまとめて流し込もうとします。

6つの TextInput に分けてしまうと、iOS はどのフィールドへ挿し込めばよいか判断できず、キーボード上部の候補（コードのサジェスト）自体が出なくなります。Android の SMS 自動入力も同様に、単一のフィールドを前提に動きます。貼り付けも「フォーカスされた1マス」にしか入りません。

ここから導かれる方針はひとつです。見た目は分割し、入力の実体は1つにまとめる。つまり透明な TextInput を1枚だけ置き、その値を1文字ずつ描画して「マスが並んでいるように見せる」構成にします。

iOSとAndroidの自動入力を最初に指定する

先に自動入力の指定を固めておきます。ここを後回しにすると、UIを作り込んだあとで「なぜか候補が出ない」と時間を溶かします。両OSで必要な属性は異なります。

目的	iOS	Android
コードの自動入力	`textContentType="oneTimeCode"`	`autoComplete="sms-otp"`
キーボード種別	`keyboardType="number-pad"`（数字コードの場合）
入力途中の自動修正抑制	`autoCorrect={false}` / `textContentType` は上記を優先

注意したいのは、importantForAutofill を古い記事の見よう見まねで指定すると、逆に Android の sms-otp が無視される場合があることです。まずは上の最小構成から始め、必要になってから足すのが安全です。

import { TextInput } from "react-native";
 
// 実体となる単一の入力欄。見た目は後段のマスで描くため透明にします
<TextInput
  value={code}
  onChangeText={handleChange}
  keyboardType="number-pad"
  textContentType="oneTimeCode" // iOS: SMS のコードを候補表示
  autoComplete="sms-otp"        // Android: SMS 自動入力
  maxLength={6}
  autoFocus
  style={{ position: "absolute", opacity: 0 }}
/>

✦

ここまでお読みいただきありがとうございます。

この記事の続きを読む

この先には、実装コードやベンチマーク結果など、実務でお役に立てる内容をご用意しています。このサイトは広告を掲載しておらず、サーバーや開発にかかる費用はメンバーの皆様のご支援で成り立っています。もしお役に立てていましたら、ご支援いただけますと大変ありがたいです。

この記事で得られること

✦iOSの textContentType=oneTimeCode と Androidの autoComplete=sms-otp を両OSで効かせる正しい指定順序

✦見た目は6つのマス目、実体は1つのTextInput にする実装パターン（自動入力・貼り付けが壊れない）

✦貼り付けで6桁が一度に入る場合と、1文字ずつ削除する場合の両方を破綻させないキー操作の設計

Stripe による安全な決済 · いつでもキャンセル可能

✦

この記事を購入する

この先の内容をすべてお読みいただけます。一度のご購入で、いつでも何度でもアクセスできます。このサイトは広告を掲載しておらず、皆さまのご支援がサーバー費用などの運営を支えています。

または

メンバーシップなら全記事が読み放題 →

単一のTextInputでセグメント表示を作る

土台ができたら、値を1文字ずつ描画してマスを並べます。ポイントは、描画側のマスはあくまで「表示専用」で、タップやキー入力は隠れた TextInput が受け持つことです。マスをタップしたら隠れた入力欄へフォーカスを戻す、という橋渡しだけを用意します。

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) => {
    // 数字以外を除去し、桁数で頭打ちにします
    const next = raw.replace(/[^0-9]/g, "").slice(0, LENGTH);
    setCode(next);
    if (next.length === LENGTH) {
      onComplete(next); // 6桁そろったら自動で次へ進めます
    }
  };
 
  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>
  );
}

現在フォーカスされているマス（i === code.length）の枠色を変えるだけで、カーソルが無くても「次はここ」という視線誘導ができます。この一手間が、実機で触ったときの安心感を大きく左右します。

貼り付けと削除でつまずかないようにする

自動入力とセグメント表示ができても、実際の利用ではここでハマります。ふたつの落とし穴を先に潰しておきます。

貼り付け：6桁を一度に受け取る

ひとつ目は貼り付けです。SMS 本文からコードだけを長押しコピーして貼る人は少なくありません。6つのマスに分けた実装だと1マスにしか入りませんが、単一 TextInput 方式なら handleChange が一度に6文字を受け取るため、slice(0, LENGTH) を通すだけで各マスに正しく分配されます。上のコードは貼り付けをすでに吸収できています。

削除：Backspaceを一本で拾う

ふたつ目は削除です。数字パッドの削除キーは、値が空のときに onChangeText を発火しない端末があります。1マスずつ確実に消したい場合は onKeyPress で Backspace を拾い、末尾を落とす処理を足します。

import type { NativeSyntheticEvent, TextInputKeyPressEventData } from "react-native";
 
const handleKeyPress = (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
  if (e.nativeEvent.key === "Backspace") {
    setCode((prev) => prev.slice(0, -1));
  }
};
 
// <TextInput ... onKeyPress={handleKeyPress} /> として付与します

このとき onChangeText と onKeyPress が二重に発火して1回のタップで2文字消える端末がありました。私は削除を onKeyPress 側に一本化し、onChangeText では「増えた分だけ」を扱うよう役割を分けることで安定させています。細かい話ですが、実機を数台またいで検証しないと気づきにくい挙動です。