Check out a free preview of the full React Native (feat. Redux) course:
The "TextInput Component" Lesson is part of the full, React Native (feat. Redux) course featured in this preview video. Here's what you'd learn in this lesson:

Scott adds a TextInput component into the top bar of the modal to search for exercises. Once that’s in place, he spends a few minutes debugging some other issues in the application and answering some audience questions.

Get Unlimited Access Now

Transcript from the "TextInput Component" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Scott: So now we need to do a few things. We need to add a ListView. I didn't tell you how to make a ListView, but I wanna make one ListView and then it's gonna be up to you to make another ListView. So the first ListView we need to make if you look at the designs here are

[00:00:25]
>> Scott: Sweet, so we look here, we have this input at the top with x box here, Xbox [LAUGH]. And then a ListView of different exercises. So you can click the exercise and that's gonna add it to your workout. So I'm gonna make this ListView and then the exercise you guys are gonna be doing, you're gonna do the ListView and then we'll hook it up to the API.

[00:00:45] So let's just do that. Let's talk about ListViews and why we need them. So what we'll do now is we'll head over to the ExerciseModal, which is where we'll do the ListView. And what we want is so right now, in the modal, all we have is all those things are still broken.

[00:01:10]
>> Scott: Go away, go away.
>> Scott: Cool, okay. So what we want right now, all we have is a button here, but we wanna see what our Topbar where the input and x, right? So we wanna put that inside of our modal first instead of just this button and then we want a ListView.

[00:01:27] So let's just do that. So we'll put, we'll lead this view here and then I will bring in our Topbar that we made, I will put that here.
>> Scott: And the Topbar is gonna have an input in it. So we'll bring in TextInput.
>> Scott: And we'll say TextInput.

[00:02:15] Actually now I'm thinking this is gonna take a while to style and I don't really wanna focus on this part. I really wanna focus on the ListView. So I'm actually just gonna [COUGH], I just gonna copy this over, so we can save some time and get to the actual important stuff.

[00:02:31] So I'm just gonna copy this person here, search bar, there we go, so I'm gonna make a new component right-click called Searchbar.js. So I'm just going to paste this stuff right here and Searchbar is literally just that component I was just about to make. It's just a text input in the Topbar that we're gonna use.

[00:03:01] So SearchBbar, export SearchBar from './SearchBar'; there we go. And then we'll head back over to the ExerciseModal. And we can just put here in this Topbar what we really want if you look at the designs. Is actually there's like a linear gradient right here with the SearchBar in it.

[00:03:28] So let's just do that. So we'll import the linear gradient which looks like, where is that? Grab that person, head back over to a ExerciseModal, import that and we'll put a linear gradient right here inside the Topbar. Cuz remember we can use all the children here and this is gonna have the colors that we'll use in a minute.

[00:04:00]
>> Scott: And I will go over the SearchBar right here, there we go. And the SearchBar takes in any properties you wanna pass to the TextInput. So whatever you wanna pass at the TextInput. You just passed there and that's about it, cool. So we got that. Where did it go?

[00:04:26] There we go. So we'll save it and then for the colors, looks like there's like some light green to dark green. I have the exact colors right here inside of the finished app on ExerciseModal or no, ExerciseList, I broke that out so many abstractions. I want to get that right there.

[00:04:51] So left to right. There we go. So LinearGradient allows you to say how you want the gradient to be left or right or stuff like that. So this is breaking news. I need to do our NPM link. So let's shot you down.
>> Scott: All right, so while this is linking, that was fast, that was really fast.

[00:05:21]
>> Scott: Cool. So we got this Topbar, we're at the LinearGradient, we got a SearchBar here. And now what we want is when we type in the search. We want a list of exercises to pop up, so we can tap on those exercises and add them to our current workout.

[00:05:38] So that's what we wanna do.
>> Scott: SearchBar is not defined, so I forgot to import it.
>> Scott: There we go. Yes?
>> Speaker 2: Whenever you're importing another file in the same folder, is there a way to use index?
>> Scott: No. I mean you could go direct like I say /index and get it within, you're already in this folder, so yeah.

[00:06:23] Okay, what's going on? What's going on?
>> Scott: More errors we got.
>> Scott: Let me refresh very quick.
>> Scott: There we go. Okay, cool. SearchBar is broken because I didn't pass in the handle text and all that stuff.