The ScrollView component

So far, we know about three components: View , Text, and StyleSheet. Now, imagine a case where we have a lot of rows to show in the application—something such as table of information pops into my mind. Obviously, it will be a long table, but the screen is small, so we will make it scrollable—up and down, like in a browser. This may seem trivial as a concept, but this isn't very easy to implement, which is why React Native provides the ScrollView component.

Let's see this problem in action. Check out Example 3_ No ScrollView problem from the Chapter 2 folder to get started.

Here, we have a typical TaskList component, which converts every task into a Task component. Task displays its name and description as Text. It's a very simple mechanism, but once a number of tasks is huge, such as 20 or more tasks, it fills the entire screen, and suddenly you realize that you cannot scroll like in a browser window:

// Chapter 2 / Example 3 / src / TaskList.js
export const TaskList = ({tasks, containerStyles}) => (
    <View style={containerStyles}>
        {tasks.map(task => // problems if task list is huge
            <ExpandableTask
                key={task.name + task.description}
                name={task.name}
                description={task.description}
            />
        )}
    </View>
);

To fix this issue and make the content scrollable, replace View with ScrollView. You also need to rename the style prop to contentContainerStyle. Please see the full example, as follows:

// Chapter 2 / Example 4 / src / TaskList.js
import React from 'react';
import Task from './Task';
import PropTypes from 'prop-types';
import {StyleSheet, Text, ScrollView, View} from 'react-native';
import makeExpandable from './makeExpandable';

const ExpandableTask = makeExpandable(Task);

export const TaskList = ({tasks, containerStyles}) => (
     <ScrollView contentContainerStyle={containerStyles}>
         {tasks.map(task =>
             <ExpandableTask
                key={task.name + task.description}
                name={task.name}
                description={task.description}
             />
         )}
     </ScrollView>
);

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff'
    }
});

TaskList.propTypes = {
    tasks: PropTypes.arrayOf(PropTypes.shape({
        name: PropTypes.string.isRequired,
        description: PropTypes.string.isRequired
     })),
     containerStyles: PropTypes.oneOfType([
         PropTypes.object,
         PropTypes.number
     ])
};

TaskList.defaultProps = {
    tasks: [],
    containerStyles: styles.container
};

export default TaskList;

I have also included PropTypes definitions so that you can practice what we have learned in the previous section.