TypeScript with TextInput

TextInput is a React Native component that allows users to enter text.

import { TextInput } from "react-native";

<TextInput />

It is commonly used for login forms, registration forms, search boxes, feedback forms, and other user input fields.

Import TextInput from React Native before using it.

import { TextInput } from "react-native";

React Native provides TypeScript definitions for the TextInput component.

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

export default function App(): React.JSX.Element {

    return (
        <View>
            <TextInput />
        </View>
    );
}

This creates a basic input field.

The placeholder prop displays helpful text when the input is empty.

<TextInput
    placeholder="Enter your name"
/>

The placeholder helps users understand what information they should enter.

TextInput values are commonly stored in React state.

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

The state is explicitly typed as a string.

The value prop can connect TextInput to state.

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

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

This creates a controlled input.

The onChangeText prop is used to receive the updated text.

<TextInput
    value={name}
    onChangeText={(text: string) => {
        setName(text);
    }}
/>

The text parameter is typed as a string.

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

<TextInput
    value={name}
    placeholder="Enter your name"
    onChangeText={(text: string) => {
        setName(text);
    }}
/>

This is a common pattern for handling text input with TypeScript.

<TextInput
    value={name}
    onChangeText={(text: string) => {
        setName(text);
    }}
/>

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

The value entered by the user can be displayed using a Text component.

TextInput can be styled using the style prop.

<TextInput
    style={{
        borderWidth: 1,
        padding: 10
    }}
    placeholder="Enter name"
/>

const styles = StyleSheet.create({
    input: {
        borderWidth: 1,
        borderRadius: 8,
        padding: 10,
        marginBottom: 10
    }
});

A StyleSheet keeps input styles organized and reusable.

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

The same style can be reused for multiple input fields.

Password fields can hide the entered characters using secureTextEntry.

<TextInput
    placeholder="Enter password"
    secureTextEntry
/>

This is commonly used for login and registration screens.

The keyboardType prop can provide an appropriate keyboard for specific input.

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

This is useful when collecting email addresses.

const [age, setAge] =
    useState<string>("");

<TextInput
    value={age}
    placeholder="Enter age"
    keyboardType="numeric"
    onChangeText={(text: string) => {
        setAge(text);
    }}
/>

TextInput values are received as text, even when a numeric keyboard is used.

If the application needs a number, the string can be converted.

const numberValue: number =
    Number(age);

This keeps the TextInput state as a string while converting the value when numeric processing is required.

A form can contain multiple TextInput components with separate state.

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

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

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

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

An interface can describe the structure of form data.

interface FormData {
    name: string;
    email: string;
    phone: string;
}

This is useful when a form contains several related fields.

const [form, setForm] =
    useState<FormData>({
        name: "",
        email: "",
        phone: ""
    });

TypeScript now knows the structure of the form state.

setForm({
    ...form,
    name: text
});

The spread operator keeps the existing form values while updating one field.

Because form is typed as FormData, TypeScript can check the object structure.

We can create a reusable TextInput component with typed props.

interface InputProps {
    value: string;
    placeholder: string;
    onChangeText: (text: string) => void;
}

The function type ensures that the callback receives a string.

function Input({
    value,
    placeholder,
    onChangeText
}: InputProps): React.JSX.Element {

    return (
        <TextInput
            value={value}
            placeholder={placeholder}
            onChangeText={onChangeText}
            style={styles.input}
        />
    );
}

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

The reusable component keeps the input code consistent throughout the application.

TypeScript does not replace validation. We still need to check whether the entered data is valid.

if (name.trim() === "") {
    setError("Name is required");
}

TypeScript checks types, while application logic checks the actual values.

const [error, setError] =
    useState<string>("");

{error !== "" && (
    <Text style={styles.error}>
        {error}
    </Text>
)}

The error message can be displayed below the input field.

The input can be cleared by changing its state to an empty string.

const clearInput = (): void => {
    setName("");
};

A Button or Pressable component can call this function.

• Using a number state directly for TextInput text.
• Forgetting that onChangeText receives a string.
• Using any instead of proper types.
• Forgetting to type reusable component props.
• Not handling optional or nullable form data.
• Changing form state without preserving other fields.

import React, { useState } from "react";

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

interface FormData {
    name: string;
    email: string;
}

export default function App(): React.JSX.Element {

    const [form, setForm] =
        useState<FormData>({
            name: "",
            email: ""
        });

    const [error, setError] =
        useState<string>("");

    const submitForm = (): void => {

        if (form.name.trim() === "") {
            setError("Name is required");
            return;
        }

        if (form.email.trim() === "") {
            setError("Email is required");
            return;
        }

        setError("");
        console.log(form);
    };

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

            <Text style={styles.heading}>
                Registration Form
            </Text>

            <TextInput
                style={styles.input}
                placeholder="Enter name"
                value={form.name}
                onChangeText={(text: string) =>
                    setForm({
                        ...form,
                        name: text
                    })
                }
            />

            <TextInput
                style={styles.input}
                placeholder="Enter email"
                keyboardType="email-address"
                value={form.email}
                onChangeText={(text: string) =>
                    setForm({
                        ...form,
                        email: text
                    })
                }
            />

            {error !== "" && (
                <Text style={styles.error}>
                    {error}
                </Text>
            )}

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

        </View>
    );
}

const styles = StyleSheet.create({

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

    heading: {
        fontSize: 24,
        fontWeight: "bold",
        marginBottom: 20
    },

    input: {
        borderWidth: 1,
        borderRadius: 8,
        padding: 10,
        marginBottom: 12
    },

    error: {
        marginBottom: 10
    }

});

• Use useState<string> for simple text fields.
• Use interfaces for larger forms.
• Use onChangeText for handling input text.
• Type callback functions correctly.
• Keep reusable input components strongly typed.
• Validate form values before submitting.
• Keep styles organized with StyleSheet.
• Avoid unnecessary use of any.

The TextInput component is essential for accepting user input in React Native applications. TypeScript makes TextInput-based forms safer by providing types for state, callbacks, props, and form objects.

You should now understand controlled TextInputs, typed string state, input styling, password and numeric inputs, reusable input components, form interfaces, validation, and complete typed forms.