キーボード最適化スキル

キーボード最適化スキル

TextInput を含む画面に対して、iPhoneでの快適なキーボード操作を実装する。

デザイン前提: Liquid Glass

本プロジェクトは @callstack/​liquid-glass による Liquid Glass デザインを前提とする。 キーボード周りの実装では以下を考慮する:

• LiquidGlassView 内の TextInput は、ガラスエフェクトのブラーでプレースホルダーが見づらくなる可能性がある。テキストカラーに PlatformColor('labelColor') を使用する
• キーボード上部のアクセサリビュー（送信ボタン等）にも LiquidGlassView を適用し、ガラス質感を統一する
• フォールバック: isLiquidGlassSupported が false の場合は半透明背景に切り替える

対象ファイル

• src/​screens/​**/​*.tsx — 画面コンポーネント
• src/​components/​**/​*.tsx — フォーム系コンポーネント

引数が指定された場合はその画面のみ、省略時は TextInput を含む全画面を対象とする。

手順

1. 対象画面の特定

TextInput を含むファイルを検索する:

Grep: "TextInput" in src/​screens/ and src/​components/

2. KeyboardAvoidingView の適用

TextInput を含む画面のルートに KeyboardAvoidingView を追加する。

パターン:

import { KeyboardAvoidingView, Platform } from 'react-native';

// 画面コンポーネントのルートに追加
<KeyboardAvoidingView
  style={{ flex: 1 }}
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
>
  {/​* 既存のコンテンツ */​}
</​KeyboardAvoidingView>

3. ScrollView の最適化

TextInput を含む ScrollView に以下を追加:

<ScrollView
  keyboardShouldPersistTaps="handled"
  keyboardDismissMode="interactive"
  contentContainerStyle={{ flexGrow: 1 }}
>

4. TextInput の入力補助

各 TextInput に以下のプロパティを適切に設定する:

5. キーボード閉じる操作

• 単一フィールド: onSubmitEditing={() => Keyboard.dismiss()}
• 複数フィールド: useRef で次のフィールドにフォーカス移動
• 画面タップで閉じる: 必要に応じて TouchableWithoutFeedback + Keyboard.dismiss()

複数フィールドのフォーカス移動パターン:

import { useRef } from 'react';
import { TextInput, Keyboard } from 'react-native';

const emailRef = useRef<TextInput>(null);
const passwordRef = useRef<TextInput>(null);

<TextInput
  placeholder="ユーザー名"
  returnKeyType="next"
  onSubmitEditing={() => emailRef.current?.focus()}
  blurOnSubmit={false}
/>
<TextInput
  ref={emailRef}
  placeholder="メールアドレス"
  returnKeyType="next"
  onSubmitEditing={() => passwordRef.current?.focus()}
  blurOnSubmit={false}
/>
<TextInput
  ref={passwordRef}
  placeholder="パスワード"
  returnKeyType="done"
  onSubmitEditing={() => Keyboard.dismiss()}
/>

6. パスワード入力の最適化

<TextInput
  secureTextEntry={!showPassword}
  textContentType="password"
  autoComplete="password"
  autoCorrect={false}
/>

ルール

• Platform.OS で iOS / Android を分岐し、behavior を適切に設定する
• 既存のレイアウト・スタイルを壊さない
• keyboardVerticalOffset はヘッダー高さに応じて調整する
• 新規パッケージのインストールは最小限にする（React Native 標準 API を優先）
• 変更後に TextInput のフォーカス・送信が正常に動作することを確認する