Форма для збору даних

У React Native немає аналогу form, як у web-розробці. Тому у мобільних застосунках використовуємо стільки інпутів, скільки потрібно, щоб зібрати дані. А для опрацювання введених даних "вішаємо" обробник на кнопку або компонент, який може обробляти натискання.

На прикладі нижче наведено збір даних інпутів в стейт (контрольовані інпути), а після натискання на кнопку ми збираємо всі дані, виводимо їх і після цього очищаємо інпути.

Із попередньої інформації тут залишено функціонал інпутів у фокусі (вони безпосередньо функціоналу відправки форми не стосуються і не впливають на цей функціонал).

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

App.js

import { useState } from "react";
import {
  View,
  TextInput,
  Pressable,
  Text,
  StyleSheet,
  TouchableWithoutFeedback,
  Keyboard,
  KeyboardAvoidingView,
  Platform,
  Alert,
} from "react-native";

export default function App() {
  const [activeInput, setActiveInput] = useState(null);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [profession, setProfession] = useState("");

const submitForm =()=>{
  Alert.alert(`Your name: ${name}, Your email: ${email}, Your profession: ${profession}`);
  setName("");
  setEmail("");
  setProfession("");
};

  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <KeyboardAvoidingView
          behavior={Platform.OS == "ios" ? "padding" : "height"}
        > 
        <View style={styles.container}>
          <TextInput
            placeholder="name"
            value={name}
            onChangeText={setName}
            onFocus={() => setActiveInput("name")}
            onBlur={() => setActiveInput(null)}
            style={
              activeInput==="name"
                ? [styles.textInput, styles.textInputActive]
                : styles.textInput
            }
          ></TextInput>
          <TextInput
            placeholder="email"
            value={email}
            onChangeText={setEmail}
            onFocus={() => setActiveInput("email")}
            onBlur={() => setActiveInput(null)}
            style={
              activeInput==="email"
                ? [styles.textInput, styles.textInputActive]
                : styles.textInput
            }
          ></TextInput>
           <TextInput
            placeholder="profession"
            value={profession}
            onChangeText={setProfession}
            onFocus={() => setActiveInput("profession")}
            onBlur={() => setActiveInput(null)}
            style={
              activeInput==="profession"
                ? [styles.textInput, styles.textInputActive]
                : styles.textInput
            }
          ></TextInput>
                <Pressable style={styles.button} onPress={submitForm}>
                <Text style={styles.buttonText}>Submit</Text>
              </Pressable>
        </View>
        </KeyboardAvoidingView> 
      </TouchableWithoutFeedback>
    </View>
  );
}

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

    borderWidth: 1,
    borderColor: "black",
    borderRadius: 10,
  },
  textInputActive: {
    borderWidth: 2,
    borderColor: "blue",
    backgroundColor: "#d4dcff",
  },
  button: {
    width: 250,
    padding: 15,
    marginBottom: 15,

    backgroundColor: "blue",
    borderRadius: 10,
    
  },
  buttonText: {
    textAlign: "center",
    color: "white" 
  },
});

Також для роботи із великими формами буде зручно використовувати хук useReducer із бібліотеки React.

Документація:

useReducer