Learn

Creating scrollable content on web is fairly straightforward. You only have to apply a fixed width and height to a container to make out-of-bounds content scrollable. With native development, this requires a bit more than a View component with fixed dimensions.

View components aren’t scrollable in Expo and React Native. Rendering scrollable content requires additional calculations which could hurt performance when applied to all View components. Expo and React Native have different scrollable components that we can use, like ScrollView. ScrollView allows us to fully manage and customize how the content should be scrolled.

Instructions

1.

Let’s start by rendering a title and three boxes, with different colors, in our app. The boxes should be contained within a View component, this will be our scrollable area.

2.

Great! You might have noticed that the preview is actually scrollable. It is also showing all our boxes, even the boxes which should be “out of bounds”.

That’s because this is a web preview where the View component is translated to a div element, which is scrollable by default, on web. If you try this code on a mobile device, the content is NOT scrollable.

Let’s add a ScrollView inside our “scrollable” area where we want to scroll through the content. In our case, the colored boxes are the scrollable content.

3.

That’s better! Our boxes outside the scrollable area are now hidden. In React Native we have to be a bit more verbose when creating scrollable content. Being verbose with scrollable also has its benefits, it allows us to fully customize the behavior of the scroll area.

We can make our red, green, and blue boxes horizontally scrollable by adding a single property. There are a lot more properties that we can use, you can find them in the ScrollView documentation.

For now, let’s add the horizontal property to our ScrollView.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?