0Pricing
React Native Academy · レッスン

TextInputの基礎とキーボードタイプ

TextInputを描画し、onChangeTextでstateに紐付け、メールアドレス用や数値入力用にキーボードタイプを設定して、Returnキーのイベントを処理します

「TextInputの基礎とキーボードタイプ」はCoddyKit上の無料React Native Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Native Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Native Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

The TextInput Component

TextInput is the React Native component for capturing keyboard input from users. It renders as a native text field on both iOS and Android, giving users the platform's native typing experience including autocorrect, predictive text, and system keyboard shortcuts. Import it from react-native and use it for any input that requires a keyboard: search boxes, login forms, settings fields, and chat message composers. Without styling, TextInput has no visible border on iOS — always style it to make it visible to users.

import { TextInput, View, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function BasicInput() {
  const [text, setText] = useState('');

  return (
    <View style={{ padding: 16 }}>
      <TextInput
        value={text}
        onChangeText={setText}
        placeholder='Type something here...'
        style={styles.input}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 10,
    paddingHorizontal: 14,
    paddingVertical: 12,
    fontSize: 16,
    backgroundColor: '#fff',
  },
});

onChangeText vs onChange

The onChangeText callback is the most common way to react to text input. It receives the new text string directly as its argument, making it easy to pass to a useState setter: onChangeText={setText}. The lower-level onChange callback receives a full event object (event.nativeEvent.text) — useful when you also need other event metadata like cursor position. For most use cases, onChangeText is simpler and preferred. Use onChange only when you need the native event details.

import { TextInput } from 'react-native';
import { useState } from 'react';

function TextInputExample() {
  const [text, setText] = useState('');

  return (
    <>
      {/* Simple: receives the string directly */}
      <TextInput
        onChangeText={(newText) => setText(newText)}
        // shorthand equivalent:
        // onChangeText={setText}
      />

      {/* Advanced: receives the full event object */}
      <TextInput
        onChange={(event) => {
          console.log('text:', event.nativeEvent.text);
          console.log('selection:', event.nativeEvent.selection);
        }}
      />
    </>
  );
}

Keyboard Types for Different Input

The keyboardType prop controls which keyboard variant the OS displays. For a numeric input, 'numeric' shows a numpad. For emails, 'email-address' includes the @ and . keys prominently. 'phone-pad' shows the phone dialer layout. 'decimal-pad' is like numeric but includes a decimal point. 'url' shows / and .com shortcuts. Using the correct keyboard type is a usability win — it reduces the keystrokes needed to enter data and prevents users from typing invalid characters.

import { View, TextInput, Text, StyleSheet } from 'react-native';

export default function KeyboardTypesDemo() {
  return (
    <View style={{ padding: 16, gap: 12 }}>
      <TextInput style={styles.input} keyboardType='default' placeholder='Default text' />
      <TextInput style={styles.input} keyboardType='email-address' placeholder='email@example.com' />
      <TextInput style={styles.input} keyboardType='numeric' placeholder='Enter a number' />
      <TextInput style={styles.input} keyboardType='phone-pad' placeholder='Phone number' />
      <TextInput style={styles.input} keyboardType='decimal-pad' placeholder='Price (0.00)' />
      <TextInput style={styles.input} keyboardType='url' placeholder='https://...' />
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16, backgroundColor: '#fff' },
});

Secure Text Entry for Passwords

For password fields, set secureTextEntry={true} to hide the typed characters with bullet points. This is essential for any field containing sensitive data — passwords, PINs, security codes. You can add a show/hide password toggle by managing a showPassword boolean in state and toggling secureTextEntry. Also set autoCapitalize='none' and autoCorrect={false} on password fields — you don't want autocorrect or capital letters changing a user's password as they type.

import { TextInput, TouchableOpacity, Text, View, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function PasswordInput() {
  const [password, setPassword] = useState('');
  const [visible, setVisible] = useState(false);

  return (
    <View style={styles.wrapper}>
      <TextInput
        value={password}
        onChangeText={setPassword}
        secureTextEntry={!visible}
        autoCapitalize='none'
        autoCorrect={false}
        placeholder='Password'
        style={styles.input}
      />
      <TouchableOpacity
        style={styles.toggle}
        onPress={() => setVisible(v => !v)}
      >
        <Text style={{ fontSize: 18 }}>{visible ? '🙈' : '👁'}</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: { flexDirection: 'row', alignItems: 'center', borderWidth: 1, borderColor: '#ccc', borderRadius: 10, paddingHorizontal: 14 },
  input: { flex: 1, paddingVertical: 12, fontSize: 16 },
  toggle: { paddingLeft: 8 },
});

autoCapitalize and autoCorrect

autoCapitalize controls when the OS capitalizes the first letter. Values: 'none' (never capitalize), 'sentences' (first letter of each sentence, default), 'words' (first letter of each word), 'characters' (every character). Use 'none' for usernames, email addresses, and passwords. Use 'words' for name fields. autoCorrect={false} disables autocorrect entirely, which is essential for usernames, technical terms, or any field where the user knows what they're typing.

import { View, TextInput, StyleSheet } from 'react-native';

export default function FormInputs() {
  return (
    <View style={{ padding: 16, gap: 12 }}>
      {/* Name: capitalize each word, allow autocorrect */}
      <TextInput
        style={styles.input}
        placeholder='Full name'
        autoCapitalize='words'
        autoCorrect={true}
      />
      {/* Username: no caps, no autocorrect */}
      <TextInput
        style={styles.input}
        placeholder='@username'
        autoCapitalize='none'
        autoCorrect={false}
      />
      {/* Email: no caps, no autocorrect */}
      <TextInput
        style={styles.input}
        placeholder='Email address'
        keyboardType='email-address'
        autoCapitalize='none'
        autoCorrect={false}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 },
});

returnKeyType and onSubmitEditing

The returnKeyType prop changes the label on the keyboard's Return key: 'done', 'go', 'next', 'search', 'send'. Use 'next' to indicate that pressing Return moves to the next field. The onSubmitEditing callback fires when the user presses the Return key. Combine returnKeyType='next' with onSubmitEditing to programmatically focus the next TextInput using a ref — this creates a smooth, tab-like navigation between form fields that users expect on mobile.

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

export default function MultiFieldForm() {
  const emailRef = useRef(null);
  const passwordRef = useRef(null);

  return (
    <View style={{ padding: 16, gap: 12 }}>
      <TextInput
        ref={emailRef}
        style={styles.input}
        placeholder='Email'
        keyboardType='email-address'
        returnKeyType='next'
        onSubmitEditing={() => passwordRef.current?.focus()}
      />
      <TextInput
        ref={passwordRef}
        style={styles.input}
        placeholder='Password'
        secureTextEntry
        returnKeyType='done'
        onSubmitEditing={() => console.log('Form submitted!')}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 },
});

Multiline TextInput

For multi-line text like a bio, message, or comment, add the multiline prop. The TextInput will expand as the user types new lines and support newline characters. Use numberOfLines on Android to set the initial height (iOS auto-sizes). The textAlignVertical: 'top' style (Android only) prevents text from starting at the vertical center of the input box. On iOS, multiline inputs grow to fit their content automatically when there's no explicit height set. Combine maxLength with a character counter display for message composer fields.

import { TextInput, Text, View, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function BioInput() {
  const [bio, setBio] = useState('');
  const MAX_LENGTH = 200;

  return (
    <View style={{ padding: 16 }}>
      <TextInput
        value={bio}
        onChangeText={setBio}
        placeholder='Tell us about yourself...'
        multiline
        numberOfLines={4}     // Android: initial height
        maxLength={MAX_LENGTH}
        style={styles.input}
        textAlignVertical='top' // Android: align text to top
      />
      <Text style={styles.counter}>
        {bio.length}/{MAX_LENGTH}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 10, padding: 12, fontSize: 15, minHeight: 100 },
  counter: { textAlign: 'right', color: '#999', fontSize: 12, marginTop: 4 },
});

Focus, Blur, and onFocus / onBlur Events

TextInput fires onFocus when the user taps into it (keyboard appears) and onBlur when they tap away (keyboard hides). Use these to show/hide helper text, change the border color to indicate active state, or trigger field-level validation. A common pattern is to validate a field only after the user has left it (on blur), not while they are still typing — this avoids showing error messages before the user finishes typing. Track which field is focused with a state variable if you need to style multiple inputs differently based on focus.

import { TextInput, View, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function FocusableInput({ placeholder, onBlurValidate }) {
  const [focused, setFocused] = useState(false);
  const [value, setValue] = useState('');
  const [error, setError] = useState('');

  function handleBlur() {
    setFocused(false);
    const err = onBlurValidate ? onBlurValidate(value) : '';
    setError(err);
  }

  return (
    <View>
      <TextInput
        value={value}
        onChangeText={setValue}
        onFocus={() => setFocused(true)}
        onBlur={handleBlur}
        placeholder={placeholder}
        style={[
          styles.input,
          focused && styles.focused,
          error && styles.error,
        ]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1.5, borderColor: '#ddd', borderRadius: 10, padding: 12, fontSize: 16 },
  focused: { borderColor: '#4f86f7', shadowColor: '#4f86f7', shadowOpacity: 0.2, shadowRadius: 4, shadowOffset: { width: 0, height: 2 } },
  error: { borderColor: '#e74c3c' },
});

Dismissing the Keyboard

On mobile, the keyboard doesn't dismiss automatically when users tap outside a TextInput. Use Keyboard.dismiss() from react-native to programmatically hide it. Wrap your screen content in a TouchableWithoutFeedback that calls Keyboard.dismiss() on press, so tapping anywhere outside the keyboard dismisses it. Alternatively, use the keyboardDismissMode prop on ScrollView: 'on-drag' dismisses the keyboard when the user starts scrolling, which is a comfortable mobile UX pattern.

import { TouchableWithoutFeedback, Keyboard, ScrollView, TextInput, StyleSheet, View } from 'react-native';

export default function DismissibleForm() {
  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <ScrollView
        style={{ flex: 1 }}
        keyboardDismissMode='on-drag'  // dismiss on scroll
        keyboardShouldPersistTaps='handled'
      >
        <View style={{ padding: 16, gap: 12 }}>
          <TextInput style={styles.input} placeholder='Name' />
          <TextInput style={styles.input} placeholder='Email' keyboardType='email-address' />
          <TextInput style={styles.input} placeholder='Message' multiline numberOfLines={4} textAlignVertical='top' />
        </View>
      </ScrollView>
    </TouchableWithoutFeedback>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 },
});

KeyboardAvoidingView

When the keyboard appears, it covers the bottom of the screen and can hide text inputs in forms. Wrap your screen in KeyboardAvoidingView to automatically push the content up when the keyboard opens. Set behavior='padding' on iOS and behavior='height' on Android (use Platform.OS to pick the right value). Pair it with keyboardVerticalOffset to account for the header height. For screens with many inputs, combining KeyboardAvoidingView with a ScrollView inside provides the best experience.

import { KeyboardAvoidingView, Platform, ScrollView, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';

export default function LoginScreen() {
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={60} // adjust for header height
    >
      <ScrollView contentContainerStyle={styles.form}>
        <TextInput style={styles.input} placeholder='Email' keyboardType='email-address' />
        <TextInput style={styles.input} placeholder='Password' secureTextEntry />
        <TouchableOpacity style={styles.btn}>
          <Text style={styles.btnText}>Log In</Text>
        </TouchableOpacity>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  form: { padding: 24, gap: 16, flexGrow: 1, justifyContent: 'center' },
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 10, padding: 14, fontSize: 16 },
  btn: { backgroundColor: '#4f86f7', padding: 16, borderRadius: 10, alignItems: 'center' },
  btnText: { color: '#fff', fontWeight: 'bold', fontSize: 16 },
});

Input Masking for Formatted Values

Some inputs need formatted display as the user types — credit card numbers with spaces every 4 digits, phone numbers with dashes, or dates in DD/MM/YYYY format. Implement this in the onChangeText handler: strip formatting characters from the raw input, apply the format, and set the formatted string as state. The TextInput shows the formatted value (from state), but you store the raw digits separately for submission. Libraries like react-native-mask-input provide a drop-in masked TextInput that handles common patterns automatically.

import { TextInput } from 'react-native';
import { useState } from 'react';

// Manual phone number formatting: (555) 123-4567
export default function PhoneInput({ onPhoneChange }) {
  const [display, setDisplay] = useState('');

  function formatPhone(raw) {
    const digits = raw.replace(/\D/g, '').slice(0, 10); // digits only, max 10
    let formatted = digits;
    if (digits.length > 6) {
      formatted = '(' + digits.slice(0,3) + ') ' + digits.slice(3,6) + '-' + digits.slice(6);
    } else if (digits.length > 3) {
      formatted = '(' + digits.slice(0,3) + ') ' + digits.slice(3);
    } else if (digits.length > 0) {
      formatted = '(' + digits;
    }
    setDisplay(formatted);
    onPhoneChange(digits); // pass raw digits to parent
  }

  return (
    <TextInput
      value={display}
      onChangeText={formatPhone}
      keyboardType='phone-pad'
      placeholder='(555) 123-4567'
      style={{ borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 }}
    />
  );
}

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: keyboardType shows the appropriate keyboard for the data type, returnKeyType with refs enables tab-like navigation between form fields, and KeyboardAvoidingView prevents the keyboard from covering input fields at the bottom of the screen. Next up we explore adding tap feedback with TouchableOpacity and Pressable.

よくある質問

「TextInputの基礎とキーボードタイプ」レッスンは無料ですか？

はい。「TextInputの基礎とキーボードタイプ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Native Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Native Academyコースには全4レッスンが含まれています。

「TextInputの基礎とキーボードタイプ」で何を学びますか？

TextInputを描画し、onChangeTextでstateに紐付け、メールアドレス用や数値入力用にキーボードタイプを設定して、Returnキーのイベントを処理します ブラウザで直接実行するハンズオンコードでReact Native Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Native Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Native Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「TextInputの基礎とキーボードタイプ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Native Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Native Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. TextInputの基礎とキーボードタイプ
  2. TouchableOpacityとPressableによるタップハンドラー
  3. トグル、スイッチ、チェックボックス
  4. シンプルなログインフォームの構築
← React Native Academyに戻る