Поле ввода TextInput

TextInput — поле для ввода текста, аналог input в вебе. Когда пользователь нажимает на него, телефон показывает экранную клавиатуру. Поле работает как управляемый компонент React: значение хранится в состоянии.

Простое поле

Добавьте в список задач поле для названия новой задачи:

// app/index.tsx
import { useState } from 'react';
import { StyleSheet, Text, TextInput, View } from 'react-native';
 
export default function Index() {
  const [title, setTitle] = useState('');
 
  return (
    <View style={styles.screen}>
      <TextInput
        style={styles.input}
        value={title}
        onChangeText={setTitle}
        placeholder="Новая задача"
      />
      <Text>Вы ввели: {title}</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, gap: 12 },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    padding: 12,
    fontSize: 18,
  },
});

Нажмите на поле — появится клавиатура. Каждая буква сразу отображается в строке «Вы ввели». onChangeText получает новую строку целиком, поэтому setTitle передаётся напрямую, без event.target.value.

Полезные пропсы

Клавиатура под задачу

Для поля электронной почты отключают заглавные буквы и показывают клавиатуру с символом @:

// app/index.tsx
<TextInput
  value={email}
  onChangeText={setEmail}
  placeholder="anna@example.com"
  keyboardType="email-address"
  autoCapitalize="none"
/>

На телефоне откроется клавиатура со знаком @ и точкой, а первая буква не станет заглавной.

Кнопка «Готово» на клавиатуре

returnKeyType меняет подпись клавиши ввода, а onSubmitEditing вызывается при её нажатии:

// app/index.tsx
<TextInput
  value={title}
  onChangeText={setTitle}
  returnKeyType="done"
  onSubmitEditing={() => console.log('Добавить:', title)}
/>

Нажмите «Готово» на клавиатуре — в терминале, где запущен npx expo start, появится строка «Добавить:» с вашим текстом. В следующих уроках здесь будет добавление задачи.

Частая ошибка

Ждать, что поле будет видно сразу. У TextInput нет рамки и фона по умолчанию, поэтому без стилей на экране его не видно — только курсор после нажатия. Всегда задавайте borderWidth или backgroundColor и padding, как в первом примере.