Обробка текстових інпутів

Уявити мобільний застосунок без поля для введення даних практично неможливо. У мобільній розробці для збору текстових даних від користувача використовують компонент TextInput. Щоб використовувати цей компонент потрібно його (як і всі інші компоненти) спочатку заімпортувати.

import { TextInput } from "react-native";

Цей компонент має багато власних пропсів, докладніше про які можна дізнатися в офіційній документації. Ось деякі найвживаніші серед них:

autoFocus - робить інпут у фокусі та відкриває клавіатуру при монтуванні компонента

keyboardType - тип клавіатури, який можна показувати (стандартна, цифрова, телефонна, посилання тощо)

maxLength - обмеження кількості символів в інпуті

multiline - робить інпут багаторядковим

onChangeText - запускається при зміні тексту в інпуті, замість об’єкту події приймає одразу текст

placeholder - стандартна підказка для інпуту

textAlign - вирівнювання тексту в інпуті

style - стилі для інпуту

value - значення інпуту

При роботі з інпутами використовують підхід контрольованих інпутів. Коли ми фіксуємо кожну зміну значення в інпуті, записуємо в стейт і відповідно значенню інпута присвоюємо цей стейт. Приклад контрольованого інпута нижче:

Резервний код

App.js

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

export default function App() {
  const [text, setText] = useState("");

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="Enter the text"
        value={text}
        onChangeText={setText}
        style={styles.textInput}
      ></TextInput>

      <Text style={styles.textInState}>Text in state: {text}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  textInput: {
    width: 250,
    padding: 15,

    borderWidth: 1,
    borderColor: "black",
    borderRadius: 10,
  },

  textInState: {
    marginTop: 40,
  },
});

Посилання на офіційну документацію:

Компонент TextInput

Handling Text Input