7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 `ScrollView` and `ListView`

Content doesn’t always fit onto a single screen. For these cases, we have scrollable views and list views. In this lesson, you will learn about those important components.

2.5 `ScrollView` and `ListView`

Hi, and welcome back to Get Started with React Native. In this lesson, we are going to look at two important components of React Native that might not have a use case in the cost project, but are important for most apps nonetheless. Let's have a look at ScrollView first. It is useful if you have content that needs scrolling, like the name says. Meaning that the content is larger than what fits on the screen. A ScrollView is like a regular view, a wrapper component that accepts some additional parameters to configure its behavior. The most commonly used parameters are setting the arrangement by using the horizontal parameter, enabling or disabling paging or having a pull-to-refresh control. There is also very useful function that you can use to immediately scroll to the top. So, a ScrollView seems useful if you have many items that are displayed in the scrolling list. Well, not quite. If you have a big number of items where only a few of them are visible on the screen, it's better to use a ListView. It is more complex than a simple ScrollView, but only renders what's visible. The most essential part of a ListView is its data source. This defines the content of the ListView. To create it, you have to create a new instance of ListView.DataSource and pass a callback function that determines if a row has changed. One of these implementations uses just the equality operator. Whenever you change the data, you need to call cloneWithRows or cloneWithRowsAndSections if you have root group data. The last thing you need is to define the renderRow callback on the component, which defines what gets rendered for each row. There is also the renderSeparator callback that gets called whenever a separator between two rows is needed. If you don't implement it, there won't be any separation. If you want to handle touches on rows, just use TouchableHighlight and let it act like a button. Okay, then that's theory, let's get into examples. For the time being I'm commenting out our previous code in the render function of the init file and use it as a playground. For the ScrollView, let's see two examples. In the first one, we have a lot of text which, for example, happens in a description. I added some padding to the text itself so that paragraphs become more visible when scrolling. Without any custom value set on the ScrollView, you'll get a vertically scrolling view that does work quite well. Let's have a look at another common example. It's a scroll level folder view. I have an image to this public domain and I want to set a few parameters on the image itself, so it looks a bit nicer. Then let's change the horizontal and paging enabled properties to true. Notice that you can't use true directly. You have to use the curly braces around it, since it's a logical value. Now it looks like a photo browser. You can swipe to the right or left. And if you go over the threshold, it automatically shows the next page. Okay, let's have a look at the listView. As you already know, we need a data source. I'm going to initialize this in the Constructor. And set the state with it again by using cloneWithRows. Here, I'm adding some names. The ListView itself is quite simple. We specify the data source and create a callback to render a single row. I can even get fancy here and reuse the image from above, and use it as an additional element. The only thing I have to make sure is to wrap it in a single top-level component. We can offset the separator to create the true list. Just using an empty view component with a bit of styling is enough. There you go. Once you have a strategy on how to populate your data source, let's use a really simple and powerful instrument in creating your user interface. To recap, when you have content that potentially is larger than the screen, use the ScrollView. If you have a list of items that is much larger than what fits on the screen, it isn't the best option. For that, a ListView is the way to go. ListViews have a data source, which is queried for rows to be much more efficient. One of the most common use cases of ListViews is data fetched from a server. In the next lesson, we're going look at more advanced components, like the MapView, that sometimes are from a third party and need to be added to the project separately. See you there.

Back to the top