A basic form in React Native uses useState to store and update user input. Each input field is connected to state, making the UI reactive and predictable.
useStateIn React Native, forms are built using components like TextInput and Button. The value of each TextInput is controlled by state, and updates occur using the onChangeText callback.
// Basic React Native form using useState
import React, { useState } from "react";
import { View, Text, TextInput, Button } from "react-native";
export default function App() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const handleSubmit = () => {
console.log("Name:", name);
console.log("Email:", email);
};
return (
<View>
<Text>Name</Text>
<TextInput
value={name}
onChangeText={setName}
/>
<Text>Email</Text>
<TextInput
value={email}
onChangeText={setEmail}
/>
<Button title="Submit" onPress={handleSubmit} />
</View>
);
}
When the user types into the inputs, state updates instantly. Pressing the submit button logs the form data.
Type in the inputs on the left to see how useState updates the data on the right in real-time.
// How the logic works (Conceptual)
const [name, setName] = useState("");
// When user types 'A':
// 1. onChangeText triggers
// 2. setName('A') updates the state
// 3. The component re-renders with value='A'