This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "ListView Component" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott: All we need to do now is like I said we've got to create a ListView. And I'm not going to focus on the search bar right now. We'll just go ahead and create that ListView and see what that looks like. So I'll make a new component here called ExerciseList.
[00:00:19] And this is, we're just gonna bootstrap this right quick, React, (Component) from 'react'. And this one's actually gonna be really important. So definitely look at this one. So we're gonna have a View, some Text and a ListView from 'react.native'.
>> Scott: And we're just gonna export class ExerciseList.
>> Scott: Cool, the ListView is pretty much just gonna be the native view component underneath either Android or iOS.
[00:01:07] So it's not just like some regular scroll view that's ill performant. So it's gonna native version of it. So it's the API is a little different to work with. So the first thing we wanna do is we'll say constructor and the ExerciseList is we're gonna pass the ExerciseList a list of exercises.
[00:01:23] So let's just set up some default props for that. So we'll say static defaultProps = { exercises = [] }. So that will be it.
>> Speaker 2: Scott.
>> Scott: Yes?
>> Speaker 2: You got an import react on the top of that? You do?
>> Scott: Yes.
>> Speaker 2: Then why's it showing up in red?
[00:01:41]
>> Scott: What is? This?
>> Speaker 2: Yeah.
>> Scott: Because my linter doesn't know about that.
>> Speaker 2: Okay.
>> Scott: My linter is not smart enough yet.
>> Speaker 2: Sorry.
>> Scott: I'm not smart enough to tell my linter how to be smart enough.
>> Speaker 2: Comment from the channel.
>> Scott: Yeah,.
>> Speaker 2: This is some straight Jedi stuff here [LAUGH]
[00:01:59]
>> Scott: Yeah, so in the constructor what we wanna do is call super. And we need to set up a specific data source for our ListView. You can't just pass like object or an array to ListView. You got to use this data source thing. So what we'll do is we'll say const ds = new ListView.cloneWithRows.
[00:02:33] That doesn't sound right. Just let me double check.
>> Scott: It is, no .DataSource row exchange. Yeah, so new ListView.DataSource which is going to be a function here and takes an object. And we'll say rowHasChanged which is going to be a method that determines if a row is different.
[00:03:00] So it uses like algorithm to determine if the data you pass in is different so it can render the list performantly. rowHasChanged, and this is going to give you the previous row with the next row. So we'll say rowHasChanged(r1, r2) and all this on one line is crazy.
[00:03:27]
>> Scott: And we'll just say return row one does not equals
>> Scott: row two. So it's just going to compare those two things. If they don't equal each other, then it's changed. That's the algorithm that we want. So we got that.
>> Scott: And then now we want to do is say this.state = {, and we'll just call this exercise, we'll just call this ds for short too, or dataSource.
[00:04:05] And this is gonna be ds.cloneWithRows and this is where we actually pass in the data that we wanna provide. And by default we wanna use the props that was passed in. So we can actually get props from the constructor as the first argument, and we can say props.exercises.
[00:04:24] So that would be the default.
>> Scott: So that we have our new dataSource, we can actually render this ListView now. So what we're doing is we're making a new dataDource, setting up the algorithm that's gonna determinate if it change or not, and it's gonna bind that to our state.
[00:04:41] So we can use it, so now we'll go make our render function. And we'll say ListView, and the ListView takes in a dataSource which is gonna be this.state.dataSource
>> Scott: Actually is it dataSource? Let's double check. Yeah, it is dataSource, sweet.
>> Scott: All right, so it's gonna take in a dataSource.
[00:05:17] And this also is gonna take in a renderRow method, which determines what the rows in the ListView are gonna look like. So they can be any component we want. So we'll just in line it right quick. So let's just say it's going to be, we'll just say it's just going to be a Wiew with a Text.
[00:05:38] And you get access to the individual row, which will be the individual exercise, so we'll say exercise. And all exercises have names, so we'll say, exercise.name. So we're just gonna render a list with the exercises on them, and have their names rendered, that’s about it.
>> Scott: Any questions on the ListView?
[00:06:09] This is just the beginning of it. There's more to it. Cuz then you gotta think about, well how do we update this when the props come in?
>> Scott: Because right now, it's just getting props.exercises which is at first is gonna be empty array but when this updates, we're not updating the dataSource.
[00:06:28] So we have to update the dataSource too. And wherever we wanna do that it's actually just gonna be in the render function. And this is broken because I didn't put a return. There we go. And we can do that in the render function, we can say const dataSoure = this.setState or this.state.clone.
[00:07:00] We'll call the same method cloneWithRows, and we'll pass in the new this.props.exercises. So this will updated it for us. So now we have dataSource and we just pass in dataSource. The reason we do it here is you know the render method is gonna be called whenever the props are updated.
[00:07:18] So this is a chance for us to make a new dataSource.
>> Speaker 2: Now type on the line 22 waiting your exercises.
>> Scott: Ex, see? That's what happened to me last time, I had to change everything in the app. Exercise cool all right so we have that. The other way is we can actually just like, we can call connect and get the exercise ourselves right here too if we want because this isn't ExerciseList.
[00:07:44] So, although it's a UI component, we can literally just connect to it and get the exercises ourselves which I think is what I did in this solution. But sometimes I do things differently. But we'll just pass it in, no big deal. If we got it if we got it ourselves we wouldn't have to do this.
[00:08:00] But it's all good. So we got the ExerciseList, we got the ExerciseModal, and then now all we need to do is just hook this up to the search bar. So the search bar if we go look at it, it's freaking out because it needs a onTextChange. And, yeah it just needs a onTextChage.
[00:08:20] So we need to give it a method to when it changes the text. So we'll go back to the ExerciseModal and we'll say, onTextChange, run some method here that we don't have, so we need to pass that method into the ExerciseModal. And the method that will pass in is, what do we want to do on onTextChange?
[00:08:45] What we'll do, so we got to make this like a class
>> Scott: Export, extends, component.
>> Scott: There we go. And we'll just copy this stuff right here and render
>> Scott: There we go, so we still got that. So on the text change for this, we just need to make a method right quick, and we'll just say like handle change.
[00:09:27] Oops.
>> Scott: handleTextChange, that'll work. And this will give us the text. There we go and then with this text we're gonna actually do something, sweet. So, now that we got that, we need to do is go ahead and bring in the, wait where is the top part? There we go, SearchBar is in there, LinearGradient is in there, cool.
[00:09:52] We need to go ahead and bring in the ExerciseList in here. So we'll do that now. Say import { ExerciseList } from './ExerciseList';. There we go. And we'll place it down here.
>> Scott: All right that was a whole lot.