Create a React Native TextInput
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.
[00:00] 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.
[00:10] 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.
[00:31] 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.
[00:49] 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.
[01:14] 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.
[01:40] 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.
[01:59] 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.
[02:22] 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.
[02:51] 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.
[03:08] 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.
[03:26] 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.
[03:44] 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.
[04:11] 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.