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.