Javatpoint Logo
Javatpoint Logo

React Native ScrollView

The ScrollView is a generic scrollable container, which scrolls multiple child components and views inside it. In the ScrollView, we can scroll the components in both vertically and horizontally. By default, the ScrollView container scrolls its components and views in vertical. To scroll its components in horizontal, it uses the props horizontal: true (default, horizontal: false).

Props of ScrollView

alwaysBounceVertical onScroll horizontal
contentContainerStyle scrollEnabled bouncesZoom zoomScale
onScrollBeginDrag onContentSizeChange maximumZoomScale minimumZoomScale
onScrollBeginDrag onContentSizeChange maximumZoomScale minimumZoomScale
onScrollEndDrag centerContent contentInset refreshControl
pagingEnabled scrollsToTop snapToAlignment showsHorizontalScrollIndicator
snapToStart snapToEnd indicatorStyle showsHorizontalScrollIndicator

React Native ScrollView Example

In this example, we create a vertical ScrollView using text and button.

App.js

Output:

React Native ScrollView React Native ScrollView

React Native Horizontal ScrollView Example

The horizontal ScrollView scrolls the components and views from left to right. It will be implemented by using the props horizontal to true (horizontal={true}).

App.js

Output:

React Native ScrollView React Native ScrollView




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


B.Tech / MCA