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.
The keyboard is not appearing for mine, what troubleshooting steps could I take?
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
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.
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.
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.
It feels like you're just reading a code example from another screen and typing it, "Now we're creating this, then we're creating that, then we're importing platform" Do you wanna explain what "platform" is and what is good for ? This is not instructing or teaching.
Hey, thank you for the course! I like React Native so far. But, I have a question:
header: {
paddingHorizontal: 16,
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center"
}
Here you said that alignItems will center items horizontally, did you mean vertically? I'm new to React Native, and this might be a different kind of flexbox, but in web, align-items usually operates with secondary axis, which is vertical when flex-direction: row
Agree with Ming above. You're literally just reading your code out loud. Please help us understand WHY you make certain choices, what is actually happening, what data structures you're using...more teaching would be more helpful.
Man, this is nice but if you slowed down a bit it would be nice. As far as the explanation goes, there is literally no explanation on why you are typing what you are typing. As beginners, we get stuck in small details a lot, by the time we figure out what that specific line of code means, you have already created 5 pages and implemented the local state management.
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