React Native: Carousels with Horizontal Scroll Views

How to create fluid and responsive carousels with native components

ScrollView: One component to rule them all?

ScrollView is one of the most fundamental components of a React Native app, that can act as a standalone component as well as a dependency for a range of other more complex components.

It is impressive thinking about its wide-ranging use-cases. It can be used as a standalone vertical scrolling solution, automatically making your content suitable for any screen height. Other more complex components, like SectionList and FlatList, rely on ScrollView and its props, whereas community driven components like KeyboardAwareScrollView expand upon ScrollView’s functionality to solve complicated UX problems with the virtual keyboard.

And these use cases just entail vertical scrolling. ScrollView also supports horizontal scrolling and pinch to zoom — that tracks the current magnification with the zoomScale prop, along with others to limit its minimum, maximum and zoom behaviour. This makes ScrollView ideal for panning around maps-based applications, or apps with large canvases like boardgames.

The particular use-case this article focusses on, however, is that of a horizontal-only…