The very first thing that I wanna do is up here at the top, I want to add a background color so let's see with this View. This is the wrapper view for the entire screen, we want to bring in one of our special colors. So I'm gonna say backgroundColor and if you open up that color palette, you can see we have all of these different options. I wanna go with the dark color here.

Now, I am going to eventually put all of this code into its own separate file. So for right now, I'm not gonna worry about even using the variable. This is mainly the whole point of this guide is to show you how we can style text input. So we're not even going to do that. We're gonna save that for a later guide.

So that's gonna be our backgroundColor and I'll hit Save.

AuthScreen.tsx

return (
  <View style={{ marginTop: 100, backgroundColor: "#1f2125" }}>
    <Text>{headerText()}</Text>

And you can see that, just like we've discussed, a View component only is going to be as tall as the content inside of it so we need to tell it that we want it to be 100% in height. So here I will say height and let's say 100%.

AuthScreen.tsx

return (
  <View style={{ marginTop: 100, backgroundColor: "#1f2125", height: "100%"  }}>
    <Text>{headerText()}</Text>

Hit Save and now it's going all the way down to the bottom.

Eventually, we're also going to style that top header so don't worry about that right now. Just for right now, we're focusing in on our form. So that's one part.

Now, the next thing that we need to do is actually start to style each one of those Text components 'cause like you can see, it's using the black text which is very hard to see when you have the very dark background. So let's go to these Text components and I'm gonna say style equals and for this, we'll just say color of white, and then copy that and then we wanna go and populate this down on that other Text tag.

AuthScreen.tsx

return (
  <View
    style={{ marginTop: 100, backgroundColor: "#1f2125", height: "100%" }}
  >
    <Text style={{ color: "white" }}>{headerText()}</Text>

    <View style={{ marginTop: 20, marginBottom: 20 }}>
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={val => setEmail(val)}
      />
    </View>

    <TouchableOpacity onPress={handleAuthTypePress}>
      <Text style={{ color: "white" }}>{screenTypeText()}</Text>
    </TouchableOpacity>
  </View>
);

Hit Save and now if you switch between the two, you can see that that Text tag, it still has that white color so it's easier to see.

And eventually we're gonna make the text larger, we're gonna style it more and it's gonna look nice but for right now, it's just good to be able to see what's there.

Now, let's get into how we can style our text input component. I'm gonna give us a little bit of room here and we're gonna add a new prop. And this is gonna be a style prop and so we're gonna treat it just like any other style prop where you do the two curly brackets and that's because, once again, the first bracket is to represent that we are gonna pass in JavaScript code. We are gonna pass in something we want React Native to actually render out and then the other set of brackets is because we're passing in an object.

So here with style, I want to add a backgroundColor of white and then we wanna have kinda like a rounded edge. So if you remember back to when you were learning CSS, that's called a border radius. So here I'm gonna say that I wanna do a borderRadius and in this case, I wanna do 20 and as you can see, that now has a nice white background and it has a curved border radius.

Now, I wanna also add a height to it. So I'm gonna say height: 40 and that's looking much better. It's looking much more like a real text input. The only other thing I want is notice how email here is being cut off on the left-hand side? Let's move that over. So the way you can do that is with padding so I'm gonna say paddingLeft and in this case, we can say paddingLeft and let's just say 20.

AuthScreen.tsx

<View style={{ marginTop: 20, marginBottom: 20 }}>
  <TextInput
    placeholder="Email"
    value={email}
    onChangeText={val => setEmail(val)}
    style={{
      backgroundColor: "white",
      borderRadius: 20,
      height: 40,
      paddingLeft: 20
    }}
  />
</View>

And there you go that's looking really good. Notice when I press on it, and I start typing in it. So I can say Jordan @asndf.com, you can see that that is working. So I am really liking all of this and how it's coming along.

Now, I want to also open up the documentation for text input 'cause I wanna show you something. Do you notice here, when I start typing, it automatically capitalizes that first letter, that's not really the behavior that you want in a email-type of text input. So let's look at the documentation.

So I'm gonna open up the browser here and let's go to React Native TextInput. That's the way that you're gonna be able to find all of the different props and options that you can use. So here at the very top, you can actually see that you have autoCapitalize so that's pretty cool. That's a lot easier to find. You can see all of the different options and I definitely recommend for you to go through these because you're gonna see that you have quite a few sets of fields that you can use.

So autoCapitalize; it says you can tell TextInput to automatically capitalize certain characters. This property is not supported by some keyboard types such as name-phone-pad which that's just saying if you're using a specific keyboard type, this may not work but in this case, it will. So when you see this prop, come down and you see the types.

So this says that we have a set of options and each of these options are a string and these are telling us what we can use and what we can't. So autoCapitalize, we want this to be none and so I'm just gonna copy this and come back to Visual Studio Code and I'm gonna say autoCapitalize and remember, this is a string so we can just pass it in as a regular string and type none.

AuthScreen.tsx

<TextInput
  placeholder="Email"
  value={email}
  onChangeText={val => setEmail(val)}
  style={{
    backgroundColor: "white",
    borderRadius: 20,
    height: 40,
    paddingLeft: 20
  }}
  autoCapitalize="none"
/>

Hit Save and now let's type this out and you may have to hit Refresh in order to have it but now, if I type it in, you can see that that is working.

Now, there is another issue. Notice how it's trying to fix, it's trying to perform spell check as I'm typing. That's definitely not what we want in email. So if you come back down, we're gonna find there is a spellCheck option. So here we can see we have a spellCheck prop.

So we can say spellCheck is false because we don't want the system to try to change someone's email address. This is also important when you're using a field such as a username field or something like that. So I'm just going to copy the spellCheck prop, come over to Visual Studio Code, spellCheck equals and in this case, we actually want JavaScript so we want a Boolean so I'm gonna say false.

AuthScreen.tsx

<TextInput
  placeholder="Email"
  value={email}
  onChangeText={val => setEmail(val)}
  style={{
    backgroundColor: "white",
    borderRadius: 20,
    height: 40,
    paddingLeft: 20
  }}
  autoCapitalize="none"
  spellCheck={false}
/>

If you now open up the simulator, and start typing in some email, it's not going to try to correct that. So that is another really nice thing to do whenever you're working with email addresses and different things like that. So now that we have our styles, you've learned more about some of the various props that you have access to, in the next guide, we're going to extend this and we're gonna see how we can build out a password field.

Resources

• Source code