Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Scroll Elements on a React Native Screen with ScrollView

    Chris AchardChris Achard
    react-nativeReact Native
    javascriptJavaScript
    androidAndroid
    iosiOS

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.