Now, we're gonna be doing this quite a bit throughout the entire course so don't worry if a few of the concepts that we're gonna walk through are a little bit fuzzy. The most important thing I want you to understand after going through this guide is a high level view on how form elements work in React Native and then also some of the required props that you need to pass to them in order to get them working.

Let's start at the very top of this file, I have the AuthScreen file open. And right after TouchableOpacity, let's bring in what is called the TextInput component. So this is very similar to View, Text, TouchableOpacity. This is a form input component that Reactive Native has bundled together and has all of the necessary items that are needed in order to build your very own form element inside of an application.

AuthScreen.tsx

import { View, Text, ToucableOpacity, TextInput } from "react-native";

Now, if you're coming from a background where you built a lot of forms on the web with React, this is gonna be quite a bit different because we don't really have the same concept of web forms that HTML has. Forms in HTML are something that are just baked directly into how HTML works as a markup language. We don't have that same concept inside of Reactive Native.

So instead, we simply build in our form elements on the screen. We update the state, that local state or global state, depending on what you're wanting to change, inside of that component and then you are continually listening for any changes. Don't worry if that's a little bit fuzzy right now. I just wanna give you more understanding that the way that you work with forms on a webpage is gonna be slightly different than how you work with them here on a mobile app.

Now that we have this TextInput component imported, we can come down here and let's create a View component or let's call a View component and now I'm gonna bring in this TextInput. So I'm going to say that I want to call the TextInput and there are a few required props that we want to work with here, the first one is gonna be the value.

Now, the value is gonna eventually be something dynamic, but for right now, let's just type in something. I'm just gonna say Some Value and I'm also gonna do a colon here and this is just so you can see a few things happening when we start debugging this in a moment. So that's gonna be one thing.

AuthScreen.tsx

<View>
  <TextInput value={"Some Value: "} />
</View>

Now, if I hit save right here, you can see that we now have Some Value that is popping up.

I'm also gonna give us a little bit of room here so let's add a style and I'm gonna say I want to just add a marginTop of 20 and marginBottom of 20 as well just so it's easy for you to see all of this. So we have Some Value now and this is a form element. Now, form elements are text inputs inside of Reactive Native don't actually look like anything, they don't come with any pre-baked type of styles the way they do in HTML forms, we're gonna have to build those manually.

But we're not gonna worry about the styles for right now. Right now, I just wanna walk through how this would work. So the next thing that we can add is we can add an onChange handler and the specific prop that we're looking for right here is called onChange.

Now, it's not onChange by itself, that would be a little bit too high level. onChange handlers are listening for any type of change including the user pressing the element. Instead what we wanna work with is the onChangeText handler, that is listening for whenever the user presses on the TextInput and then starts typing.

So I'm gonna say onChangeText and right now let's just console.log out these events because one thing we have not done in this course yet is walk through how to perform some debugging. So I'm gonna say console.log and onChangeText, actually it is going to slide in without us doing anything, it's gonna slide in a value. So the value is this first argument here.

So onChangeText, you can just inside of the parens and depending on the formatting tool you use like Prettier, it will actually get rid of that. So I can just call this val. I can call it anything, I could call it x. I could call it anything I want. This is just something that is automatically passed from the TextInput directly to the onChangeText and what it is is whatever value is getting typed in.

So in this case, let's just call it val and then I wanna console.log this value right here.

AuthScreen.tsx

<View style={{ marginTop: 100 }}>
  <Text>{headerTeext()}</Text>

  <View style={{ marginTop: 20, marginBottom: 20 }}>
    <TextInput 
      value={"Some Value: "} 
      onChangeText={val => console.log(val)} 
      />
  </View>

So I'm gonna hit save and now we get to talk about how you can look at console.log statements in Reactive Native. This is something we've not gotten into yet. I think this is a really good time to do it.

So there's two ways that you could do this. The first is if you open up the terminal. So wherever you have the application running, if you open up the terminal, then it's going to be automatically shown there. So if I click on Some Value, you'll see that we now have a little cursor here.

And if I start typing, you'll see whatever I type in is getting printed out to the terminal.

So that is a way that you can see a console.log statement. You're gonna see us using this quite a bit especially when we get into the stage where we're calling data in from an API, this is one of the best ways of being able to see that data. The other spot is if you open up the browser, if you look on the top right-hand side in your Expo window and click on these two windows, the second window will open up the terminal.

And if I open up the simulator now, you'll see down here if I just start typing anything in, you'll see these are getting updated.

Now, you may notice it's only passing in one value and that's because we're not actually changing the value. It's only capturing the one key press down event. So let's actually fix that now so our form is actually functional and working. So I'm gonna open up Visual Studio Code and we're going to once again use React hooks and we're gonna add a new item.

So in this case, let's add an email item so I'm gonna say const and let's call this just email and then we're going to say setEmail which is going to allow us to get and set whatever email the user is typing in. And then I'm gonna say useState and we're going to just start this off with an empty string. So by default, there's not gonna be any type of content inside of that TextInput.

AuthScreen.tsx

export default () => {
  const [formToShow, setFornToShow] = useState("LOGIN");
  const [email, setEmail] = useState("");
}

Now, if I scroll back down to the TextInput, I can replace where it says Some Value, I can just replace all of that and say email. And then for the value, I'm going to say in the onChangeText handler, I'm gonna say setEmail and that should give us our setter.

AuthScreen.tsx

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

Now, when I do this, when I hit save, you'll see everything just disappears because we don't have any styles yet. One way to get around this for right now is I'm gonna add a placeholder. So another prop you can pass TextInput is a placeholder so I'm gonna say placeholder and let's just say Email.

AuthScreen.tsx

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

You could say something like Your Email or whatever you want there. So I'll hit save and now you can see this kinda like grayed out. It's a placeholder text for email.

Now if I click on this, you'll see the cursor is active and I could do something that says like Example@devcamp.com and now it's all working. So now we are actually retrieving the value and then setting the value with each key down press. So that is all working really nicely.

So in review, let's walk through what we did. We imported the TextInput component from Reactive Native, we walked through some of the key required props that we really need to have in order to work with it. One is the value, that is so the TextInput knows exactly what to render on the screen.

The next is the onChangeText prop, that gives us the ability to be passed in whatever value is being typed in and then that sets whatever state element we want and then we used React hook to be able to do that for our email. So now that all of that is done, in the next guide, we're gonna see how we can extend this and actually add some styles to it.

Resources

• Source code