One of the main things that you wanna think about when using a password field is to remember that those passwords need to be protected. So as a user's typing them in, you don't want the user to see the entire password, instead, they should be hidden, just the same way they are on the web and so because of that, the text input component inside of React Native gives us the ability to have that same behavior so that's what we're gonna implement in this guide.

So the very first thing I'm gonna do is I'm gonna give us some state. So right now, we already are using the useState hook in order to store and set our email state. Now we can do the same thing with the password. So I'm just gonna copy this line and change it to password. And then setPassword.

AuthScreen.tsx

export default () => {
  const [formToShow, setFormToShow] = useState("LOGIN");
  const [ email, setEmail] = useState("");
  const [password, setPassword] = useState("");

As you may have noticed, whenever you're working with the useState React hook, the common convention is to name your state element out, kind of like your variable essentially. And then the only change you make for the setter is to add the word set in front of whatever the variable name is and then to capitalize that and so you're using camel case. That's the convention you're gonna see used the most as you're working with React hooks.

So now that we have our state and our setter, now we can come down here and we can create another element here. I'm going to create another text input and I'm gonna copy this entire View tag here and I'm just gonna paste it down below but for the placeholder, obviously I'm going to say Password. For the value, we're gonna use password. onChangeText is gonna be setPassword and then for right now, this is all I'm going to do. Let's just hit Save and let's just make sure everything is working.

AuthScreen.tsx

<View style={{ marginTop: 20, marginBottom: 20 }}>
  <TextInput
    placeholder="Password"
    value={password}
    onChangeText={val => setPassword(val)}
    style={{
      backgroundColor: "white",
      borderRadius: 20,
      height: 40,
      paddingLeft: 20
    }}
    autoCapitalize="none"
    spellCheck={false}
  />
</View>

So it's gonna hit Refresh and now you can see we have a email field and then we have a password field. So that is all working nicely.

Now, the problem is as I'm typing this out, you can see it's still showing all of that content there and that's not exactly what we're wanting, we're wanting to hide it. We're wanting it to look something maybe like this as it's being typed out. So let's see what we need to do.

You can definitely look through the React Native documentation, the TextInput documentation like we have already seen and as you're going to through it, you're gonna see some pretty interesting props. They have all kinds of different cool tools you can use to say customize the behavior. So say that you only wanted to allow the user to have numbers to type in, they have a prop for that.

In our case, we want to hide the values. So it's not like we're encrypting the values. These values, as far as the application is concerned, are still gonna be stored in their regular format, we're simply hiding them. So if someone's looking over the shoulder of the user, they're not gonna be able to see their password typed out. So the way that we can do that is we're gonna get rid of this autoCapitalize and spellCheck, we're gonna get rid of these props and instead, we're gonna say secureTextEntry and this is a Boolean so I'm gonna say true.

AuthScreen.tsx

<View style={{ marginTop: 20, marginBottom: 20 }}>
  <TextInput
    placeholder="Password"
    value={password}
    onChangeText={val => setPassword(val)}
    style={{
      backgroundColor: "white",
      borderRadius: 20,
      height: 40,
      paddingLeft: 20
    }}
    secureTextEntry={true}
  />
</View>

So let's hit save here and now let's see what happens in the simulator so on the email, I can say jordan@example.com. Now if I type in the password, secret123, you can see that now that is secured.

Now if a user's looking over their shoulder, they're not gonna be able to see what the password was, and that is also all stored inside of our password state. So great job if you went through that, you now know how to use the secureTextEntry prop inside of React Native.

Resources

• Source code