📝 TextInput: Your App’s Magic Notepad

The Story Begins…

Imagine you have a magic notepad that can listen to everything you write. When you write your name, it remembers it. When you erase something, it notices. When you’re done writing, it can do something special with your words!

That’s exactly what TextInput is in React Native — a magic notepad for your app!

🎯 What is TextInput?

TextInput is like a blank box where users can type things. Just like:

• A search bar where you type what you’re looking for
• A login form where you enter your username
• A message box where you write to your friends

Simple Example:

<TextInput
  placeholder="Type here..."
/>

That’s it! You just created a typing box! 🎉

🧱 TextInput Component - The Basics

Your First TextInput

Think of TextInput like an empty notebook page. You place it, and people can write on it!

import { TextInput } from 'react-native';

function MyApp() {
  return (
    <TextInput
      placeholder="Write something..."
    />
  );
}

Making It Look Nice

Just like decorating your notebook, you can style your TextInput:

<TextInput
  style={{
    borderWidth: 1,
    borderColor: 'gray',
    padding: 10,
    borderRadius: 8
  }}
  placeholder="Pretty text box!"
/>

graph TD
    A[TextInput Component] --> B[User Types]
    B --> C[Text Appears]
    C --> D[App Can Use Text]

⚙️ TextInput Configuration - Setting Up Your Notepad

Configuration means setting rules for your notepad. Like telling it:

• “Only accept numbers!”
• “Hide what I type!” (for passwords)
• “Start with a capital letter!”

🔢 Numbers Only - keyboardType

When you want only numbers (like a phone number):

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

Other keyboard types:

🔒 Secret Mode - secureTextEntry

For passwords — makes dots instead of letters:

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

What user types: hello123 What they see: ••••••••

📏 One Line or Many? - multiline

One line (like a name field):

<TextInput
  placeholder="Your name"
/>

Many lines (like a message):

<TextInput
  multiline={true}
  numberOfLines={4}
  placeholder="Write your story..."
/>

✏️ Auto-Fix Features

<TextInput
  autoCapitalize="words"
  autoCorrect={true}
  placeholder="Type a sentence"
/>

📝 Placeholder & Default Value

<TextInput
  placeholder="Hint text (gray)"
  defaultValue="Already filled in!"
/>

• placeholder: Gray hint that disappears
• defaultValue: Real text already there

graph TD
    A[TextInput Config] --> B[keyboardType]
    A --> C[secureTextEntry]
    A --> D[multiline]
    A --> E[autoCapitalize]
    B --> F[numeric/email/phone]
    C --> G[Hide password]
    D --> H[Multiple lines]
    E --> I[Auto capitals]

🎭 TextInput Events - When Things Happen!

Events are like magic signals your notepad sends when something happens:

• “Hey! Someone started typing!”
• “Hey! They changed a letter!”
• “Hey! They finished typing!”

📝 onChangeText - Every Letter Counts!

This fires every time text changes. It’s the most important event!

import { useState } from 'react';

function MyApp() {
  const [text, setText] = useState('');

  return (
    <TextInput
      value={text}
      onChangeText={(newText) => setText(newText)}
      placeholder="Type here..."
    />
  );
}

What happens:

1. User types “H” → setText('H')
2. User types “Hi” → setText('Hi')
3. Every keystroke updates!

🎯 onFocus - “I’m Ready to Type!”

Fires when user taps the text box:

<TextInput
  onFocus={() => {
    console.log('User clicked the box!');
  }}
  placeholder="Tap me!"
/>

👋 onBlur - “I’m Done Here!”

Fires when user taps away from the text box:

<TextInput
  onBlur={() => {
    console.log('User left the box!');
  }}
  placeholder="Tap somewhere else..."
/>

✅ onSubmitEditing - “Enter Key Pressed!”

Fires when user presses Enter/Done/Submit:

<TextInput
  onSubmitEditing={() => {
    console.log('User pressed submit!');
  }}
  placeholder="Press Enter when done"
/>

🔄 onChange - The Full Story

Like onChangeText but gives more info:

<TextInput
  onChange={(event) => {
    console.log(event.nativeEvent.text);
  }}
/>

📊 All Events Together

function CompleteExample() {
  const [text, setText] = useState('');

  return (
    <TextInput
      value={text}
      onChangeText={setText}
      onFocus={() => console.log('Started!')}
      onBlur={() => console.log('Finished!')}
      onSubmitEditing={() => console.log('Submitted!')}
    />
  );
}

graph TD
    A[User Action] --> B{What happened?}
    B --> C[Tapped box]
    B --> D[Typed letter]
    B --> E[Tapped away]
    B --> F[Pressed Enter]
    C --> G[onFocus fires]
    D --> H[onChangeText fires]
    E --> I[onBlur fires]
    F --> J[onSubmitEditing fires]

🌟 Putting It All Together

Here’s a complete login form using everything we learned:

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

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  return (
    <View>
      <TextInput
        value={username}
        onChangeText={setUsername}
        placeholder="Username"
        autoCapitalize="none"
        autoCorrect={false}
      />

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

      <Text>Hello, {username}!</Text>
    </View>
  );
}

🎉 Quick Summary

🚀 You Did It!

Now you know how to:

• ✅ Create a TextInput (your magic notepad!)
• ✅ Configure it (set the rules!)
• ✅ Listen to events (know when things happen!)

TextInput is the bridge between your user and your app. Every message, every search, every login — it all starts with TextInput!

Go build something amazing! 🌟