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
Expo and React Native have different scrollable components that we can use, like
ScrollView allows us to fully manage and customize how the content should be scrolled.
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.
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.
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
For now, let’s add the
horizontal property to our