Most apps require users to provide content, like writing tweets on Twitter. The TextInput component is created to capture textual and numeric input. This component is best comparable with the <input> HTML element.
To listen to input changes from the user, we can use the onChangeText event handler. This event handler receives the input as a string, provided by the user.
Instructions
Let’s start by rendering a Text and TextInput component. The Text displays the user’s name, and the TextInput gives the user a method to provide it.
You might have noticed the app still asks for the user’s name after they’ve typed it. When the user provides their name, nothing happens yet.
To fix this, we have to connect the TextInput to our name state through the onChangeText event handler.
Make this event handler call setName when the TextInput is being changed.
Awesome! When the user provides any content, we have to do something with that input. In this case, we only store it in the name state so we can render it in the Text component. If you fill in a name, the app will greet you.
When asking the user for a password, you also need to use the TextInput.
At first, this seems insecure because the password appears to be visible when typing.
Luckily the TextInput has a lot of functionality, one of them is the secureTextEntry property.
Let’s try it out, add the secureTextEntry property to the TextInput.
Good! When entering a name, the input is now obfuscated.
Our onChangeText event handler still registers the actual input from the user.
You can see more properties on the TextInput props documentation.
Press run to continue to the next exercise.