Capture Keyboard Input with a TextInput - React Native Basics

to capture input from a user's keyboard in react native you're going to want to use the text input component so we're going to go ahead and import that from react native now text input is just like any other component we'll go ahead and render this below our status bar and it's going to be a self-closing component meaning we just do that slash at the end of the component rather than having to write a another text input like so rather than doing that we can just use this self closing component now if i save this we're not really going to see anything because by default the text input doesn't have any styling so if we go ahead and add a style prop to it create a styles.input then we can go ahead and style this now a text input can be styled just like a normal view component could so we can go ahead and give it a width let's say 200 again we're not going to see anything so let's go ahead add a border color i'll just set this to gray we'll give a border width of one maybe a border radius of 20 and we can see it and now we can actually see where that input is so if i go ahead and click in there you can see we see that little blue icon or cursor popping up there let's give that a little bit of breathing room i'll just give it a padding of 20. actually let's drop that down to 10 it looks kind of silly okay so we've got this basic text input and now we can go ahead and type into it and this works perfectly well but right now we're not actually capturing or doing anything with that input so what we could do is go ahead and let's import or let's create some new states so let's go ahead and say input we'll say set input and it's going to equal react.ustate and we'll just default that to an empty string now we can update this input variable which we can go ahead and let's just console.log input as it changes we can go ahead and say on change text this is going to give us a function which we can go ahead and access the text that's updating it so that'll be the text and we can then go ahead and call a set input with that text now if we take a look at the react native debugger and we actually go ahead and type into this clear this out you can say hello and you can see this is going to update every time i type a character in here now this gives us a whole host of options because we can now capture that input and use it somewhere let's say we want to submit this when someone presses that return button well we could go ahead and say on submit editing we can go ahead and call a function let's just go ahead and say alert your message is and then we can go ahead and use string interpolation to drop that input in that they typed so let's go ahead and type hello there press return and we get that alert message your message is hello there exactly what we typed cool so we've captured text we've managed how we can actually go ahead and submit that just using the actual keyboard that the platform gives us well what if when we press return and submit this we also want to clear out this input right now the text input is what's called an uncontrolled component it captures data it gives us data but we can actually control what's being displayed that's just purely what the system is doing we can turn this into a controlled component by using the value prop if i go ahead and press value in here this will go ahead and show us what exactly that value is going to be rather than just being managed internally where we don't know exactly what's going in there we're just responding to what's being given to us so with all that said i could go ahead and pass input in here as the value and now if i go ahead and press return we still get the alert everything's happening there but if after pressing the alert i go ahead and say i want to set my input to an empty string now when i press return we still get our message but our input value goes away now let's say we've got this plain input it's not really clear it's an input before we actually type into it and even then it's not super clear what if we want to give a brief message to tell someone what to use this input for well we can use the placeholder prop and this placeholder prop takes a string as an argument and i'm just going to say type a message in here and what's nice here is even though we are let me go ahead and refresh this even though we're not active on this input you can see that message in here and when we do become active on this input you still see that message but as soon as you start typing in here you can see that our placeholder is going to be overridden by our value once the value is not an empty string our placeholder is going to go away and we can start typing and displaying our content now the final thing i want to show you in this video is the different keyboard types if we look at our keyboard right now it's just a typical qwerty keyboard well if we want to change this we could go ahead and pass a keyboard type prop to it and in here we've got a bunch of different options you can do all kinds of different things there are some different differences between ios and android but there is a subset of that of all the available ones that work on both ios and android so let's go ahead and say we want to set this as a decimal pad now if we save this you can see we're getting all the numbers in here instead of numbers and letters so we can go ahead and start typing in our numbers likewise actually i'll give you a bonus one after this we can go ahead and say our keyboard appearance if you're using a light mode or a dark mode you go ahead and specify your keyboard appearance to say we always want this to be dark or we always want this to be light just kind of a nice thing as dark mode and light mode exists so that's a super brief intro to the text input component which gives us that ability to capture input via the user's keyboard which opens up a whole realm of capabilities now text input is a very powerful component with a lot of options so be sure to check out the react native documentation on all the available props to the text input if you're looking for any more tips tricks or tutorials on react native be sure to check out reactnatorschool.com

Channel: React Native School

Views: 15,798

Keywords:

Id: 21VI9LVshvc

Length: 6min 49sec (409 seconds)

Published: Wed Apr 14 2021