ListComponent.js

import React, { useRef, useEffect } from 'react';
import {
    View,
    Text,
    FlatList,
    StyleSheet
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { listItems, scrollToTop } from '../services';

const renderItem = (data, itemBackgroundColor) => {
    const { item } = data;
    return (
        <View style={[styles.itemContainer, {
            backgroundColor: itemBackgroundColor
        }]}>
            <Text style={styles.itemText}>{item.title}</Text>
        </View>
    )
};

const itemSeparatorComponent = () => <View style={styles.separator} />;

const ListComponent = props => {
    const {
        itemBackgroundColor,
        containerBackgroundColor
    } = props;

    const listRef = useRef(null);

    const navigation = useNavigation();

    useEffect(() => {
        if (listRef?.current) {
            scrollToTop(navigation, listRef);
        }
    }, []);

    return (
        <View style={[styles.container, {
            backgroundColor: containerBackgroundColor
        }]}>
            <FlatList
                keyExtractor={item => item.id.toString()}
                contentContainerStyle={styles.contentContainerStyle}
                ref={listRef}
                data={listItems}
                showsVerticalScrollIndicator={false}
                ItemSeparatorComponent={itemSeparatorComponent}
                renderItem={data => renderItem(data, itemBackgroundColor)}
            />
        </View>
    )
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    contentContainerStyle: {
        padding: 10
    },
    itemContainer: {
        padding: 15,
        borderRadius: 5
    },
    itemText: {
        fontSize: 15,
        textAlign: 'center',
        color: 'white'
    },
    separator: {
        height: 10
    }
});

export default ListComponent;