FlatList does not show data and screen keeps loading

I'm trying to fetch documents from a collection in Firestore and show it through a FlatList. But it shows a loading circle (IDK what it is actually called)!

I am using my own phone to test the app if it makes any difference. (I am quite new to this)

Here is a screenshot of my items screen where items are to be displayed:

Here is my code:

const Items = () => {
    const [isLoading, setIsLoading] = useState(false)
    const [isMoreLoading, setIsMoreLoading] = useState(false)
    const [last, setLast] = useState(null)
    const [items, setItems] = useState([])

    let onEndReachedCalledDuringMomentum = false;

    const itemsLoc = db.collection('items')

    useEffect(() => {
        getItems();
    }, []);

    getItems = async () => {
        setIsLoading(true);
        const snapshot = await itemsLoc.get();

        if(!snapshot.empty){
            let newItems = [];
            setLast(snapshot.docs[snapshot.docs.length-1]);

            for (let i = 0; i < snapshot.docs.length; i++){
                newItems.push(snapshot.docs[i].data());
            }

            setItems(newItems)
        }else{
            setLast(null);
        }
        setIsLoading(false);
    }

    getMore = async () => {
        if (last){
            setIsMoreLoading(true);

            let snapshot = await itemsLoc.orderBy('id').startAfter(last.data().id).limit(3).get();

            if(!snapshot.empty){
                let newItems = items;
                setLast(snapshot.docs[snapshot.docs.length - 1]);
                for (let i = 0 ; i < snapshot.docs.length; i++){
                    newItems.push(snapshot.docs[i].data());
                }

                setItems(newItems);
                if(snapshot.docs.length < 3) setLast(null);
            }else{
                setLast(null)
            }
            setIsMoreLoading(false);
        }

        onEndReachedCalledDuringMomentum = true;
    }

    renderList = ({name,desc,image}) => {
        return(
            <View style={styles.container}>
                <Image source={{uri: image}} style={styles.imageContainer}/>
                <View style={styles.itemInfoContainer}>
                    <View>
                        <Text style={styles.title}>{name}</Text>
                    </View>
                    <View>
                        <Text style={styles.description}>{desc}</Text>
                    </View>
                </View>
            </View>
        )
    }

    renderFooter = () => {    
        if (isMoreLoading) {return true;}
        return <ActivityIndicator size="large" color="#64aeae" style={{ marginBottom:10 }}/>
    }

    onRefresh = () => {
        getItems();
    }

    return(
        <View style={{marginTop: 20}}>
            <FlatList 
                showsVerticalScrollIndicator={false}
                data={items}
                keyExtractor={item => item.id}
                renderItem={({item}) => renderList(item)}
                ListFooterComponent = {renderFooter}
                initialNumToRender={3}
                onEndReachedThreshold = {0.1}
                refreshing={
                    <RefreshControl 
                        refreshing = {isLoading}
                        onRefresh = {onRefresh}
                    />
                }
                onMomentumScrollBegin={() => onEndReachedCalledDuringMomentum = false}
                onEndReached = {() => {
                    if (!onEndReachedCalledDuringMomentum && !isMoreLoading){
                        getMore();
                    }
                }}
                />
        </View>