Mastering React Native cards & shadows

TLDR; When lacking contentContainerStyle on your ScrollView, its content might be a bit cut off.

Photo by Oskar Yildiz on Unsplash

Before starting to learn (and work, at the same time) with React Native, I was pretty confused about its styling system. Deep down, most of us still probably are. There are some very powerful libraries out there that give you beautiful and ready-to-use components (such as React Native Paper — a very powerful library, it gives you Material Design compliant components), but in this article I want to talk about designing a custom card component and the caveat that appears when using your cards in a ScrollView .

Styling ScrollView’s content

On a recent project that I’ve worked on, we struggled a bit to understand why the shadows on our cards were not displayed properly throughout the app. It took some reading and debugging until I discovered this magic prop of ScrollView: contentContainerStyle .

As it’s mentioned in its official documentation regarding this prop:

These styles will be applied to the scroll view content container which wraps all of the child views.

This is what this will look like:

<ScrollView…