Create a React Native TextInput

Jason Brown
InstructorJason Brown

Share this video with your friends

Send Tweet

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.

Adrian Twarog
Adrian Twarog
~ 4 years ago

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

Daniel Cortes
Daniel Cortes
~ 4 years ago

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

Jason Brown
Jason Browninstructor
~ 4 years ago

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

John
John
~ 4 years ago

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.

Jason Brown
Jason Browninstructor
~ 4 years ago

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.

Jason Brown
Jason Browninstructor
~ 4 years ago

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.

Ming
Ming
~ 4 years ago

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.

Tauyekel Kunzhol
Tauyekel Kunzhol
~ 3 years ago

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

Matt Erhart
Matt Erhart
~ 3 years ago

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.

beckinfonet
beckinfonet
~ 3 years ago

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.