React Native Tutorial #5 - Text Inputs

Key Takeaways

our rather than gang so now we've seen how we can use states inside a component using the U state Hulk now what I'd like to do is add in a text input field so a user can type in something into that input field and then we can take that value and update our state with the value that they provide okay so first of all we need to use a component called text input and we need to import that up here at the top so I'm going to get rid of button because we don't need that anymore and instead import text import like so now you'll already see that I've created two pieces of state one of them named and set name is equal to you state and then we have a name of Sean and then the next line is age and set age and that's equal to 30 to begin with so at the bottom down here what we're doing is just outputting those two variables name and age and we can see named Sean aged 30 so what I'd like to do now is add a text input field for each one of these things right here so two input fields in total and a user can type into those input fields to update those two values so first of all I'm going to do a text component this is just going to be for a label for the first text input and it will say enter name like so and then underneath that I'm going to do a text input so we imported that is just text input like so and it's a self closing tag so let's first of all save this and take a look at what this looks like on the screen over here so we can see enter name at the top but this down here this input field we can't really see it's just a blank space however if I click into it we can see the cursor and the keyboard pop-up so it is there however we can't really see it so what I'm going to do is add a style prop to this and set it equal to styles and then we'll call this style input so dots input and let's create that down here so input and that will be an object and this is just gonna have a few simple different properties so first of all border width and that is going to be one because by default it doesn't have a border also we want a border color and that is going to be seven seven seven so kind of like a deep gray then I'm going to give this a bit of padding which is eight pixels a margin which is ten pixels to bring it away from these two text lines and then also a width of 200 pixels so if I save this now we should see something that looks a bit more like a text input over here awesome and if we click it we can see the cursor and we can type stuff in there now at the minute when we do this nothing is happening we're not taking that value and doing anything with it so I'd like to do that but first of all let me show you something else I can also add a placeholder into this text input as well and we can do that by adding a placeholder prop on the text input now what I'm going to do is format this a little bit differently I'm going to bring this down to the next line otherwise we're going to have loads of props going over and out of the screen so I'm just going to stack them instead so first of all we have the style then I'm going to do a placeholder so placeholder and I'm going to set that equal to a string and I'll just say eg John Doe okay because this is a name input so if I save that now we should see that placeholder inside the text input there it is in faint gray if I click it and start typing it deletes that and replaces it with whatever I typed awesome so now we have that placeholder we have the style what I'd like to do is detect whenever the value changes whenever a user types a new character inside this field I want to then take the current value that's inside the field and I want to update our state the name with that new value so to do this we need some kind of event listener so you know like on the bottom we have the on press prop well on an input field we can have on change text so whenever the text changes inside the import then it's going to fire some kind of function in here now we could externalize it up here like we did before but this time I'm just going to do it inline inside an anonymous function because it's just gonna be a one-line statement so all we're gonna do is call set name which is the function up here to set the state of this and we're gonna pass in a new value and that value is gonna be whatever a user types in whatever the current value inside here is now when we pass a function to on change text that anonymous function or whatever function we reference here automatically takes in the value inside the text field at that moment in time so we get access to what the user has typed in and when we set name we can pass in that current value into that function so we'll update in the state so if I save this now then hopefully it when it reloads I can type in something now watch the name change down here as I type because every time the text changes in here we run this function and we update the name uses set name and since we're out putting their name down here and it's been updated it should update in real time over here as well to reflect that change so I'm going to change this to Mario and as a type you can see it changing at the bottom as well awesome so it's updating the state with whatever I type in to the text input and this is really good because if you have a farm in the future for logging in or signing up you can gather all of the information from a user and store it in some local state and then take all of that data and make a request to whatever server you need to to sign that user up okay so it's a good way to track what a user is typing into these input fields so we have our first input field now I want to do another one for the second piece of state which is going to be the age and let me paste that down here so I just copied this and paste it down here I'm gonna say enter age instead for the placeholder I'll say eg 99 and then we want to set the age this time with the value of this input field rather than the name so let me save this and again let me enter into these two fields so first of all the name I'll type in Mario and then the age which is gonna be I don't know 25 press the tick and now we can see name is Mario and age is 25 awesome so now we've seen how to add a text import and track the information that a user types in and update the state with that data I just want to show you one or two more things I wanna see more props we can add two text inputs the first one is going to be the multi-line prop like so and this allows us to add multiple different lines inside the text input so say we've got like a blog post to write or something like that or more than just one word like a few sentences we could use the multi-line if I save this now then you're gonna notice over here it's probably not going to look any different but if I start to type and then enter it goes on to the next line and it gets bigger okay so that's one thing the next prop I want to show you is the keyboard type and we can set this equal to several different things it could be default or number pad or numeric for example if I type here numeric and in fact that should probably go to the age input not the name one because we want a number here so I could add right here the keyboard type to be numeric if I save this and then when this reloads if I go to this the keyboard that pops up is now numeric okay so there's quite a few different props we can add to text import and we are going to see more of them in the future but if you want to read more about them now I will leave a link down in the description below so you can check out all of these different props you can add to a text input field in the next video I want to move on and show you how we can work with lists of data and outputting those lists to the screen