Theory

The TextInput component is used to allow users to input text. It provides a text input field where users can type, paste, or edit text, making it a fundamental component for collecting user input in forms, search bars, chat applications, and more.

Why Do We Need It?

1. User Input Handling:
   • Allows users to input text data into your application;
   • Essential for gathering information from users, such as usernames, passwords, messages, search queries, and more.
2. Versatility:
   • Can be customized and configured to meet various input requirements, including keyboard type, placeholder text, secure text entry, and input validation.

How to Work with TextInput

• The TextInput can be controlled through its props and state;
• We can listen for user input events using callback functions provided by the component, such as onChangeText.

Example

Explanation

• We use the useState hook to manage two state variables: name and welcomeMessage. name stores the user's input text, while welcomeMessage stores the message displayed at the top of the screen;
• The handleNameChange function is called whenever the user types or edits their name in the TextInput component. It updates the name state with the new input value;
• The handleNameSubmission function is called when the user submits their name.
  1. It first checks if the input name is not empty (using trim() to remove leading and trailing whitespace);
  2. If the input name is not empty, it updates the welcomeMessage state to display a personalized welcome message ("Welcome, [name]!");
  3. It then clears the name state by setting it to an empty string, effectively resetting the TextInput component to an empty state for the next input;
  4. If the input name is empty, it updates the welcomeMessage state to prompt the user to enter their name ("Please enter your name.").

Result

In Practice