React Native ScrollView

Scrollview is a mobile app view where you can scroll by following standard scrolling behaviour on touchscreen. Scrollviews are standard view on both android and ios.

React native supports implementing scrollview where components can be wrapped with platform specific scrollview along with implementing required touch responders.

Please note that in React Native you can easily configure scrollview to either scroll vertically or horizontally depending on your need.

React Native ScrollView

In react native, standard scrollview feature allows adding scrolling behaviour to any generic containers. Technically, ScrollView is a container component which supports arbitrary child components.

Here is a quick example of a simple scrollview

import React, { Component } from 'react';
import { AppRegistry, ScrollView, Text } from 'react-native'


class ScrolledComponent extends Component {
  render() {
      return(
        <ScrollView>
          // child components
          <Text>hello World 1</Text>
          <Text>hello World 2</Text>
          <Text>hello World 3</Text>
          <Text>hello World 4</Text>
          <Text>hello World 5</Text>
          <Text>hello World 6</Text>
          <Text>hello World 7</Text>
          <Text>hello World 8</Text>
          <Text>hello World 9</Text>
          <Text>hello World 10</Text>
          <Text>hello World 11</Text>
          <Text>hello World 12</Text>
          <Text>hello World 13</Text>
          <Text>hello World 14</Text>
          <Text>hello World 15</Text>          
        </ScrollView>
    );
  }
}


AppRegistry.registerComponent(
  'ScrolledComponent',
  () => ScrolledComponent);

Once you render this component, you will be able to scroll down easily from Hello World 1 to Hello World 15.

ScrollView vs ListView in React Native

In the scrollView, all child components are rendered even if they are not currently displayed on the screen. If you have a very big list and want to lazy load the components based on when they are displayed, you should use ListView instead.

Though ListView has more complicated API compared to simple and straightforward api of Scrollview in react native.

ScrollView - Important Properties (props)

You can configure a ScrollView by optionally providing the props. Here are the main properties supported by ScrollView

• horizontal - if false, vertical scrolling. if true, horizontal scrolling is enabled.
• contentContainerStyle - Allows you to provide style properties to scrollview container
• onScroll - allows you to take action after a frame is scrolled
• pagingEnabled - if true, the scroll view stops on multiples of the scroll view's size when scrolling