React Native Academy · 강의

TextInput 기초와 키보드 유형

TextInput을 렌더링하고 onChangeText로 상태에 연결하며, 이메일 또는 숫자 입력에 맞게 키보드 유형을 설정하고 Return 키 이벤트를 처리합니다.

TextInput 기초와 키보드 유형은(는) CoddyKit의 무료 React Native Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 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/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Native Academy 강의 전체를 잠금 해제할 수 있습니다. React Native Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“TextInput 기초와 키보드 유형”에서 뭘 배우나요?

TextInput을 렌더링하고 onChangeText로 상태에 연결하며, 이메일 또는 숫자 입력에 맞게 키보드 유형을 설정하고 Return 키 이벤트를 처리합니다. 브라우저에서 직접 실행하는 실습 코드로 React Native Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Native Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Native Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“TextInput 기초와 키보드 유형” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Native Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Native Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Native Academy(으)로 돌아가기