TextInput Component in React Native

TextInput is a built-in React Native component used to accept text entered by the user.

import { TextInput } from "react-native";

It can be used for names, emails, passwords, search queries and many other types of user input.

TextInput is imported from the react-native package.

import {
    TextInput
} from "react-native";

It can also be imported with View and Text.

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

<TextInput
    placeholder="Enter your name"
/>

The placeholder gives the user an idea of what should be entered.

The placeholder prop displays temporary hint text when the input is empty.

<TextInput
    placeholder="Enter your name"
/>

The placeholder disappears when the user starts entering text.

The style prop is used to control the appearance of TextInput.

const styles = StyleSheet.create({

    input: {
        borderWidth: 1,
        borderColor: "gray",
        padding: 12,
        borderRadius: 8
    }

});

<TextInput
    placeholder="Enter your name"
    style={styles.input}
/>

The value prop specifies the current value displayed in the input.

const name = "Rahul";

<TextInput
    value={name}
/>

When using React state, the value can be controlled dynamically.

The onChangeText prop runs whenever the text changes.

<TextInput
    placeholder="Enter name"
    onChangeText={(text) => {
        console.log(text);
    }}
/>

The updated text is passed to the callback function.

React state is commonly used to store the value entered by the user.

import { useState } from "react";

const [name, setName] =
    useState("");

<TextInput
    value={name}
    onChangeText={setName}
    placeholder="Enter name"
/>

The value entered into TextInput can be displayed using the state variable.

const [name, setName] =
    useState("");

<TextInput
    value={name}
    onChangeText={setName}
    placeholder="Enter name"
/>

<Text>
    Name: {name}
</Text>

The keyboardType prop can suggest an appropriate keyboard for the type of data being entered.

<TextInput
    keyboardType="numeric"
    placeholder="Enter age"
/>

Other useful keyboard types are available depending on the platform and input requirement.

For numeric input, you can use a numeric keyboard type.

<TextInput
    keyboardType="numeric"
    placeholder="Enter mobile number"
/>

Remember that the value received from TextInput is still text unless you explicitly convert it to a number.

For email fields, an email-friendly keyboard can be requested.

<TextInput
    keyboardType="email-address"
    placeholder="Enter email"
/>

This provides a keyboard configuration appropriate for entering an email address.

The secureTextEntry prop is commonly used for passwords.

<TextInput
    placeholder="Enter password"
    secureTextEntry={true}
/>

The entered characters are visually obscured.

const [password, setPassword] =
    useState("");

<TextInput
    value={password}
    onChangeText={setPassword}
    placeholder="Enter password"
    secureTextEntry
/>

This pattern is commonly used in login and registration screens.

The maxLength prop can limit the number of characters that the user can enter.

<TextInput
    placeholder="Enter PIN"
    maxLength={6}
/>

This can be useful for PINs, codes and other fields with fixed length requirements.

The multiline prop allows the user to enter multiple lines of text.

<TextInput
    placeholder="Enter your message"
    multiline
    style={{
        height: 120
    }}
/>

This is useful for comments, descriptions and messages.

For multiline input, numberOfLines can be used to provide an initial visual size.

<TextInput
    multiline
    numberOfLines={4}
    placeholder="Enter description"
/>

The exact behavior can vary between platforms.

The autoCapitalize prop controls automatic capitalization behavior for text input.

<TextInput
    autoCapitalize="words"
    placeholder="Enter your name"
/>

Common values include none, sentences, words and characters.

The autoCorrect prop controls whether automatic text correction is enabled.

<TextInput
    autoCorrect={false}
    placeholder="Enter username"
/>

Disabling correction can be useful for usernames, codes and other text where automatic corrections are undesirable.

The editable prop controls whether the user can modify the text.

<TextInput
    value="Read only information"
    editable={false}
/>

When editable is false, the user cannot change the input value.

TextInput provides events for detecting when the input receives or loses focus.

<TextInput
    placeholder="Enter name"
    onFocus={() => {
        console.log("Input focused");
    }}
    onBlur={() => {
        console.log("Input lost focus");
    }}
/>

The onSubmitEditing event can be used to respond when the user submits the input using the keyboard's action key.

<TextInput
    placeholder="Enter name"
    onSubmitEditing={() => {
        console.log("Submitted");
    }}
/>

This can be useful when moving from one input field to another or submitting a form.

The returnKeyType prop can influence the action key shown by the keyboard.

<TextInput
    placeholder="Enter name"
    returnKeyType="next"
/>

The available options can vary by platform.

TextInput and Button are commonly combined to create forms.

const [name, setName] =
    useState("");

<TextInput
    value={name}
    onChangeText={setName}
    placeholder="Enter name"
/>

<Button
    title="Submit"
    onPress={() => {
        console.log(name);
    }}
/>

Input values should often be validated before they are submitted.

const [name, setName] =
    useState("");

function handleSubmit() {

    if (name.trim() === "") {

        alert("Please enter your name");

        return;
    }

    alert("Submitted");

}

Validation rules should depend on the purpose of the input field.

const [email, setEmail] =
    useState("");

const [password, setPassword] =
    useState("");

<TextInput
    value={email}
    onChangeText={setEmail}
    placeholder="Email"
    keyboardType="email-address"
/>

<TextInput
    value={password}
    onChangeText={setPassword}
    placeholder="Password"
    secureTextEntry
/>

<Button
    title="Login"
    onPress={() => {

        console.log(
            email,
            password
        );

    }}
/>

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

import { useState } from "react";

export default function App() {

    const [name, setName] =
        useState("");

    const [email, setEmail] =
        useState("");

    function handleSubmit() {

        if (name.trim() === "") {

            alert("Enter your name");

            return;
        }

        alert(
            "Welcome " + name
        );

    }

    return (
        <View style={styles.container}>

            <Text style={styles.title}>
                Student Form
            </Text>

            <TextInput
                style={styles.input}
                value={name}
                onChangeText={setName}
                placeholder="Enter your name"
                autoCapitalize="words"
            />

            <TextInput
                style={styles.input}
                value={email}
                onChangeText={setEmail}
                placeholder="Enter your email"
                keyboardType="email-address"
                autoCapitalize="none"
            />

            <Button
                title="Submit"
                onPress={handleSubmit}
            />

        </View>
    );
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: "center",
        padding: 20
    },

    title: {
        fontSize: 26,
        fontWeight: "bold",
        marginBottom: 20,
        textAlign: "center"
    },

    input: {
        borderWidth: 1,
        borderColor: "gray",
        padding: 12,
        marginBottom: 15,
        borderRadius: 8
    }

});

• Forgetting to update state in onChangeText.
• Using a controlled input without managing its value correctly.
• Forgetting secureTextEntry for password fields.
• Not validating important user input.
• Using the wrong keyboard type for the field.
• Allowing unlimited input when a maximum length is required.
• Forgetting keyboard behavior when building long forms.

• Use meaningful placeholder text.
• Use React state for controlled inputs.
• Use the appropriate keyboardType.
• Use secureTextEntry for password fields.
• Validate input before processing it.
• Use maxLength where appropriate.
• Use multiline for longer text.
• Use clear labels and accessible form designs.
• Test forms on both Android and iOS when supporting both platforms.

TextInput
 ↓
Show Placeholder
 ↓
Accept User Input
 ↓
Store in State
 ↓
Validate Value
 ↓
Update State
 ↓
Submit Data
 ↓
Send to API / Process
 ↓
Show Result
 ↓
Complete Form

TextInput is one of the most important components for building interactive mobile applications. It allows your users to enter data that can later be validated, stored, submitted to an API or used by other parts of the application.