Scroll Elements on a React Native Screen with ScrollView
Screens on mobile devices don’t automatically scroll like the web. To let the user scroll the screen, we’ll wrap our screen in a ScrollView.
Instructor: [00:00] We have a list of restaurants, but unlike the Web, the screen doesn't scroll by default. The easiest way to get it to scroll is to import ScrollView from React Native and then wrap all of the content with ScrollView instead of just with view.
[00:16] When we reload, the app list can scroll. Now, if we add many more restaurants to the list, the list scrolls. All the restaurants are visible. There are some formatting things that we might want to consider.
[00:33] First, the entire screen scrolls because we wrapped the entire component in a ScrollView. That's not required, however. We could just wrap the list part in a ScrollView. Now, just the list scrolls, while the header and the live search input stay at the top of the screen.
[00:53] However, if we stop scrolling while a gray row is at the top, it looks a bit odd with all this white space between the search and the row. We can try to fix that by removing the margin below the text input, but keep the initial space between the live search and the list by adding padding to the top of the list view.
[01:11] What happens now shows you a styling quirk of the ScrollView. When you scroll, the rows properly go all the way up and under the text input. However, when you get to the bottom of the list, the last line is cut off. That's because we added padding to the top of the ScrollView component itself.
[01:28] Inside the ScrollView, there is another wrapping container. Adding padding to the top of the ScrollView actually pushed the inner container down by 30 pixels and pushed the last row right off the screen.
[01:39] Instead, we want to apply the padding to the inner content container by setting the contentContainerStyle prop instead of just the style prop. Now, the list has an initial padding at the top to separate it from the live search. When it scrolls, the row flows all the way up and under live search with no gap. The bottom row is no longer cut off.
[02:02] The last thing to keep in mind is that ScrollViews should only be used for small, limited numbers of items because they're all loaded into memory at once when the ScrollView mounts. Here, we only have 20 items, which is perfectly fine for ScrollView. If you had hundreds or thousands of items, you would want to use a flat list instead.
Thanks Kayla! :)
👏🏻 thank you
Hey! I noticed you didn't put a code section of the restaurant array, so I figured I'd put it in the comments in case anyone else wanted to just copy/paste it into their code to avoid writing all of those out. :)
const restaurants = [ {name: 'React Cafe', address: '123 Anywhere Street'}, {name: 'Fancy Restaurant', address: '799 Main Street'}, {name: 'Taco Place', address: '550 Maple Road'}, {name: 'Tony's Diner', address: '4104 College St'}, {name: 'Pasta Central', address: '706 Central St'}, {name: 'Burger Builder', address: '4869 Hamilton Dr'}, {name: 'Pizza Express', address: '1049 Bird St'}, {name: 'Teriyaki To Go', address: '1885 Tea Berry Ln'}, {name: 'Maroon Deli', address: '1082 Stuart St'}, {name: 'Prime Bar and Grill', address: '1848 Fairfax Dr'}, {name: 'Dumpling House', address: '747 Kelly Dr'}, {name: 'Hot Chicken', address: '1816 Olive St'}, {name: 'Luna's Tap Room', address: '3256 Spirit Dr'}, {name: 'Quick Sandwich Shop', address: '2587 Cherry Ridge Dr'}, {name: 'Bobby's Burgers', address: '4152 Berkley St'}, {name: 'Turnpike Diner', address: '4571 Central Ave'}, {name: 'Bombay Express', address: '65 Queens Ln'}, {name: 'Coffee Central', address: '3228 Oakwood Cr'}, {name: 'King's Garden', address: '2935 Victoria Ct'}, {name: 'Salads and More', address: '2454 Preston St'} ]