Name: Build a View with React Native's ListView Component
Uploaded: 2015-04-19T18:30:15-05:00
Description: Displaying lists of data efficiently is an important aspect of native applications. React Native provides the ListView component to accomplish this. We will use the ListView component to display our application's notes that we persisted in Firebase.

Start Building a React Native Application

Set up Basic iOS Routing with React Native

Use State and Touch Events in React Native

Understand the fetch API

Use Fetch to Load External Data in React Native

Pass Data when Changing Routes in React Native

Use React Native's Error Handle and ActivityIndicatiorIOS

Use Images in a React Native Application

Use propTypes in Reusable React Native Components

Create a Scrollable React Native Component with ScrollView

Build a Reusable React Native UI Component

Build a Github Repositories Component in React Native

Navigate to a React Native component

Access Web Pages through React Native's WebView Component

Persist data in React Native with Firebase REST API

Build a View with React Native's ListView Component

Complete the Notes view in React Native

React Native Fundamentals

Displaying lists of data efficiently is an important aspect of native applications. React Native provides the ListView component to accomplish this. We will use the ListView component to display our application's notes that we persisted in Firebase.

https://app.egghead.io/api/v1/lessons/react-build-a-view-with-react-native-s-listview-component/subtitles

[00:00] With this Notes component, we're going to use this ListView because what it is is it's...I can just read it. It's a core component designed for efficient display of vertically scrolling lists of changing data. That's exactly what we're going to have. When we're doing those notes, those notes could be changing.

[00:15] The biggest thing here, looking at this example, is we create this new instance of DataSource. We pass it this object. Then what we do is we invoked a cloneWithRows method on our dataSource instance that we made. We pass it the rows that we want to loop over. We save that as part of our state.

[00:35] Then you'll notice down here, we have the ListView component. dataSource is the result of calling cloneWithRows, and then, here, we have this renderRow attribute. We give it a callback function that will invoke for every row in our array we pass to cloneWithRows. Here, rowData will be row 1 and row 2. That's getting passed in as a parameter to our function.

[01:05] Let's jump over to our code now and go to our Components folder and create a new file called "Notes.js." Require React. We're also going to require our API so that we can communicate with our Firebase API. We're going to require our Separator component we built earlier. The last one is we're going to require our Badge that we built earlier as well. 

[01:36] The things we're going to need. We're going to need a View, Text, a ListView, TextInput, in order to get the new note, StyleSheet for styles, and TouchableHighlight so we can submit that new note. I'm just going to throw in our styles down here.

[01:56] Now, what we'll do is let's go ahead and create our new Notes component, which extends React.Component. Then, because this component is going to manage its own state, we need to have this constructor function. We're going to set this.state to be a few things. Before we do that, we're always going to call super, passing in props.

[02:26] Then we're going to have this DataSource. What we're going to pass it is rowHasChanged. We have row1, row2, and then fat arrow. row1 does not equal row2. All right. There we go. Now, in our state, we're going to have a dataSource which is set to what we get back from invoking cloneWithRows.

[03:02] We're going to pass it this.props.notes, which is all the notes that we'll get from Firebase before we come to this route. We'll have an empty note, and then we'll also have an error.

[03:16] Let's make a render function now. This is going to be wrapped in a View. The style, as always, is going to be our container. Then what we're going to do...Before we go and we do all the mapping over the rows stuff, let's go ahead and just make our text input box that's going to allow us to add new notes.

[03:36] As of right now, we don't really have any notes. It wouldn't make sense to make the functionality of repeating or looping over the notes before we have any. What I'm going to do is I'm going to make this function, called "footer," that's going to return us the UI for our footer, which will go right here.

[03:53] Let's now go and, above render, have footer, which is going to return us a View. What's nice about React is that you can do things like this, where you can have a function which returns some UI and then just invoke that function. You can have it be returned down there, which will show your UI.

[04:16] We're going to have our TextInput. Some properties to it, style. It's going to styles.searchInput. value is going to be set to this.state.note, and then we're going to have an onChange function. Their placeholder is going to be just "New Note."

[04:34] Let's go ahead and make this onChange function. Let's call it "handleChange." We'll need to bind this. Now, up here, we'll have handleChange. All it's going to do is it's going to take in an event. It's going to keep our note property on our state object up to date. We're going to say, " note is now nativeEvent.text."

[05:02] Now that that's good, let's go back down to our footer. Let's add in a button. We're going to use TouchableHighlight to be able to capture that touch event. styles is styles.button.

[05:16] onPress is going to equal this.handleSubmit, which will make...The underlayColor is going to equal 88D4F5. Inside of here, let's have a Text component with a style of buttonText. Have it say, "Submit," and then we'll close out our TouchableHighlight component.

[05:44] Now, let's go ahead and make this handleSubmit function. I'm going to do it right below handleChange. Remember, what handleSubmit's responsible for is it's going to take the value or it's going to take this note property on our state and throw it up to Firebase.

[05:59] We're going to get the note. Then what we can do is reset the state so that'll clear out our input field. Then, if you remember, in our API, we made an addNote method that expects to receive the user's username and a note. It's going to return us a promise. We're going to use the fat arrow syntax here.

[06:24] Now, inside this, we're going to go and get the notes again. That will return us a promise, which we can .then on. Now, we have the updated data. We can setState. Now, our dataSource is going to be cloneWithRows again, but instead, it's going to be the new data.

[06:48] If any of that errors, let's go ahead and throw a catch in here. We're going to console.log "Request failed" and the error message, and then we're going to setState error. One last ES6 feature here is that before, you would have to do something like error error, but if these repeat, you can just throw in one, which is really convenient.

[07:15] Now that that's up, now that our footer is working and it should be making requests to Firebase, let's go ahead and now worry about our ListView. In here, we're going to have our ListView component. 

[07:29] The dataSource we're going to give it is this.state.dataSource, which we made up when we did getInitialState. Remember, renderRow is basically the UI for every item in our dataSource. I'm going to do this.renderRow. We'll make this function here, in a bit.

[07:51] Then we can also give it a header. You can think of this ListView as like a collection of UI. It's a list. Because of that, we can have a header to it, which is really convenient. At the top of our file, we are going to render the Badge component.

[08:10] Remember, we need to give it the username, this.props.userInfo. Close that, and then close that, I believe. That's the Badge, and then that's the function. renderHeader takes in a function. Whatever you return will be the header of this ListView.

[08:30] The last thing we need to do is specify renderRow. Let's come here. We'll add renderRow. Remember, the thing that gets returned from here is going to be the UI for every item in our list. We take in some row data.

[08:45] We're going to return a View. The style's going to be set to styles.rowContainer. As always, if you're curious about those styles, feel free to go check them out up here. I'll post all this to our GitHub when I'm done or to my GitHub when we're done.

[09:00] I have a View. Inside of that, I'm just going to render the rowData Text and then, of course, throw in the Separator here. We'll get that nice, great divider between every item. Looks like I forgot to do module.exports.

[09:18] Then let's set up some prop types on our component. We're expecting to receive some userInfo. As always, that's going to be React.PropTypes.object.isRequired. There are some notes, which is going to be React.PropTypes.object.isRequired as well.

Build a View with React Native's ListView Component

Share this video with your friends

Course

React Native Fundamentals