Create a custom ScrollView using FlatList in React Native

We are going to create a custom ScrollView using FlatList in React Native

ScrollView is a component in React Native that allows you to scroll content in a single direction, vertically or horizontally. It can contain a single child or multiple children elements and is often used for scrolling a small amount of content.

FlatList, on the other hand, is a more optimized version of ScrollView for large lists of data. It renders only the items that are currently visible on the screen, which makes it more efficient for scrolling large data sets. It also supports advanced features such as pull-to-refresh, header and footer support, and scrolling to index.

In summary, ScrollView is good for scrolling a small amount of content, while FlatList is better for large lists of data, with improved performance and additional features.

Create a custom ScrollView

Code in TypeScript

import React from "react";
import { 
    FlatList, 
    RefreshControlProps, 
    ScrollView, 
    StyleProp, 
    ViewStyle 
} from "react-native";

interface ScrollViewProps {
    ref?: any;
    children: React.ReactNode;
    horizontal?: boolean;
    useScrollView?: boolean;
    nestedScrollEnabled?: boolean;
    showsVerticalScrollIndicator?: boolean;
    showsHorizontalScrollIndicator?: boolean;
    initialNumToRender?: number;
    refreshControl?: React.ReactElement<RefreshControlProps>;
    keyboardDismissMode?: "none" | "interactive" | "on-drag";
    keyboardShouldPersistTaps?: "always" | "never" | "handled";
    contentContainerStyle?: StyleProp<ViewStyle>;
}

const AppScrollView = (props: ScrollViewProps) => {
    return (
        <>
            {
                //
                props?.useScrollView ? (
                    <ScrollView
                        ref={props?.ref}
                        contentContainerStyle={props?.contentContainerStyle}
                        nestedScrollEnabled={props?.nestedScrollEnabled || true}
                        horizontal={props?.horizontal ? props.horizontal : false}
                        keyboardDismissMode={props?.keyboardDismissMode || "on-drag"}
                        keyboardShouldPersistTaps={props?.keyboardShouldPersistTaps || "always"}
                        refreshControl={props?.refreshControl ? props.refreshControl : undefined}
                        showsVerticalScrollIndicator={props?.showsVerticalScrollIndicator || false}
                        showsHorizontalScrollIndicator={props?.showsHorizontalScrollIndicator || false}>
                        {props.children}
                    </ScrollView>
                ) : (
                    <FlatList
                        key={"key0"}
                        data={[]}
                        renderItem={null}
                        ListEmptyComponent={null}
                        initialNumToRender={props?.initialNumToRender}
                        contentContainerStyle={props?.contentContainerStyle}
                        nestedScrollEnabled={props?.nestedScrollEnabled || true}
                        keyboardDismissMode={props?.keyboardDismissMode || "on-drag"}
                        keyboardShouldPersistTaps={props?.keyboardShouldPersistTaps || "always"}
                        horizontal={props?.horizontal ? props.horizontal : false}
                        refreshControl={props?.refreshControl ? props.refreshControl : undefined}
                        showsVerticalScrollIndicator={props?.showsVerticalScrollIndicator || false}
                        showsHorizontalScrollIndicator={props?.showsHorizontalScrollIndicator || false}
                        keyExtractor={(item) => item}
                        ListHeaderComponent={() => <React.Fragment>{props.children}</React.Fragment>}
                    />
                )
            }
        </>
    );
};

export default AppScrollView;

Code in JavaScript

import React from "react";
import { FlatList, ScrollView } from "react-native";

const AppScrollView = (props) => {
    return (
        <>
            {
                //
                props?.useScrollView ? (
                    <ScrollView
                        ref={props?.ref}
                        contentContainerStyle={props?.contentContainerStyle}
                        nestedScrollEnabled={props?.nestedScrollEnabled || true}
                        horizontal={props?.horizontal ? props.horizontal : false}
                        keyboardDismissMode={props?.keyboardDismissMode || "on-drag"}
                        keyboardShouldPersistTaps={props?.keyboardShouldPersistTaps || "always"}
                        refreshControl={props?.refreshControl ? props.refreshControl : undefined}
                        showsVerticalScrollIndicator={props?.showsVerticalScrollIndicator || false}
                        showsHorizontalScrollIndicator={props?.showsHorizontalScrollIndicator || false}>
                        {props.children}
                    </ScrollView>
                ) : (
                    <FlatList
                        key={"key0"}
                        data={[]}
                        renderItem={null}
                        ListEmptyComponent={null}
                        initialNumToRender={props?.initialNumToRender}
                        contentContainerStyle={props?.contentContainerStyle}
                        nestedScrollEnabled={props?.nestedScrollEnabled || true}
                        keyboardDismissMode={props?.keyboardDismissMode || "on-drag"}
                        keyboardShouldPersistTaps={props?.keyboardShouldPersistTaps || "always"}
                        horizontal={props?.horizontal ? props.horizontal : false}
                        refreshControl={props?.refreshControl ? props.refreshControl : undefined}
                        showsVerticalScrollIndicator={props?.showsVerticalScrollIndicator || false}
                        showsHorizontalScrollIndicator={props?.showsHorizontalScrollIndicator || false}
                        keyExtractor={(item) => item}
                        ListHeaderComponent={() => <React.Fragment>{props.children}</React.Fragment>}
                    />
                )
            }
        </>
    );
};

export default AppScrollView;

The above component has the functionality of both a ScrollView and a FlatList ScrollView. A ScrollView is a UI component in React Native that enables scrolling through its content, while a FlatList is a specialized ScrollView that is used for rendering a list of items. So, the component can perform the tasks of both these components, allowing you to scroll through content whether it’s a simple list or something more complex.

Here are some more details about ScrollView and FlatList:

ScrollView:

Can be used to scroll content in one direction (vertically or horizontally).
Can contain multiple children elements, but only one direct child.
Content is always drawn as one image, which can lead to performance issues for large amounts of content.
Does not support efficient handling of large lists, as it renders all of the children at once.

FlatList:

Can be used to scroll through large amounts of data efficiently.
Renders only the items that are currently visible on the screen, improving performance.
Supports features such as pull-to-refresh, header and footer, and scrolling to index.
Uses VirtualizedList under the hood, which uses lazy-loading and only renders the items that are currently visible, making it more memory efficient.
Can be used with initialNumToRender prop to specify the number of items to render before they are needed.

In conclusion, ScrollView is good for scrolling small amounts of content, while FlatList is better suited for scrolling through large amounts of data. If you’re building an app with a list of items, you should use FlatList, as it offers better performance and additional features compared to ScrollView.

Blog

Create a custom ScrollView using FlatList in React Native

Nayanish Damania

We are going to create a custom ScrollView using FlatList in React Native

Join Our Newsletter. No Spam, Only the good stuff.

Related