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.
Let’s start by rendering a
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
At first, this seems insecure because the password appears to be visible when typing.
TextInput has a lot of functionality, one of them is the
Let’s try it out, add the
secureTextEntry property to the
Good! When entering a name, the input is now obfuscated.
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.