This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Create a React Native TextInput

4:29 React lesson by

In this lesson we'll use TextInput to receive input from the user and save off separate items into state. We'll store the value on state, show how to setup specific keyboards to display and how to handle actions from the keyboard.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this lesson we'll use TextInput to receive input from the user and save off separate items into state. We'll store the value on state, show how to setup specific keyboards to display and how to handle actions from the keyboard.

Avatar
Adrian

Good lesson, but please get the VScode autohits disabled as its quite large and seems to always be in the way of seeing the code.

Thanks

Avatar
Daniel Cortes

The keyboard is not appearing for mine, what troubleshooting steps could I take?

Avatar
Jason Brown

Running in the iOS Simulator you must enable the keyboard to show up.
The key command is CMD + K to toggle it on and off.

Also with the simulator focused you can go to Hardware > Keyboard > Toggle Software Keyboard

In reply to Daniel Cortes
Avatar
John

Ditto. And please slow down a bit. I have the video playing at 0.8 and I'm having to stop frequently to try to catch up. And I know I'm not slow. You just know this stuff too well.

In reply to Adrian
Avatar
Jason Brown

Apologies for that. I will do my best in future videos to slow down.
I'm actually recording in small chunks and editing out pauses in between each one.
Mostly was focusing on continual flow of the video + code access would be enough.

I will make adjustments in future videos.

In reply to John
Avatar
Jason Brown

Sorry about that, I actually don't typically use them. I'll find a way to disable them as they are more obnoxious than valuable.

In reply to Adrian

We'll start by important TextInput from react-native. Now inside of our view, we'll open it, and re-close it, and then render our textInput that we imported.

Then, we'll add a few properties to our textInput, we'll add placeholder, then we'll type what needs to be done, which will display when there's no text inside of our textInput. We'll then add blurOnSubmit, and then say false for this prop. Then, we'll also define a returnKeyType which we'll say is done.

Now, we'll go create our styles, we'll say const styles=Stylesheet.create, which is a function that takes an object. We'll then add our input style, which we'll give it the flex:1 properly and a height of 50, now, we'll apply that style to our input.

Now, we'll go add our header style, which we'll give a paddingHorzontal of 16, a flexDirection of row to tell it to render its children in a row style rather than in a column style. We'll then give it a justifyContent of space-around, which renders space around any child items that it has.

We'll then add aligntems:"center" which will tell it to render its children in the center horizontally, because it is a flexDirection row. Now, we'll go add our style to our view by typing style={styles.header}, and now when we refresh, we can see that there's 16 pixels on both sides and we can type into our text input.

Now, we'll go into our app, and we'll create a constructor, takes props, we'll call super(props), and we'll define this.state, which is equal to an object, and will give a value of an empty string. This will hold our value for our textInput.

We'll also add an items which is an empty array, which will hold the items that we want to add to our Todo list. Now, we'll also create a handleAddItem function, and then, we'll go bind this.handleAddItem=this.handleAddItem.bind(this) in our constructor.

Now, we'll pass value={this.state.value} to our header, we'll also pass onAddItem and pass in this.handleAddItem, and we'll also add onChange equals a function, which will take the value and call this.setState, and we'll then pass in our value to set our state with the value of the text that gets given to us.

Now inside of our handleAddItem, we'll say if(! This.state.value), and we'll return, we won't add any empty text to the array. We'll then take const newItems is equal to an array. We'll spread the old items into our array.

We'll add a new object which will give a key, which will just be a unique identifier, which will be Date.now(), we'll then add text of this.state.value to add the text of the value that's been entered. Then, we'll also add complete of false.

Then, we'll do this.setState which takes an object of items, and it will pass in newItems, and also value of nothing to clear out the text input. Now that we have this all set up, you can go into our header and we can wire everything up.

W say value={this.props.value} because we're passing in the state as a prop now. We'll then say onChangeText = this.props.onChange, and then additionally, we'll add an onSubmitEditing, and we'll say this.props.onAddItem, which means whenever they press the Done button, the onAddItem function will be called.

Now if we refresh our emulator, and we type in anything into our textInput, and then click the Done button, we can see that our keyboard stays open because the blurOnSubmit. The value is cleared because we set state of values to nothing, and a new item was added to the array.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?