Example infinite scroll + useParseQuery

Musikkfest.js

import { initializeParse, useParseQuery } from '@parse/react-native';

import React, { useState } from 'react';

import {
	Button,
	FlatList,
	Text,
	View,
	SafeAreaView,
	StyleSheet,
} from 'react-native';
import Parse from 'parse/react-native.js';

import theme from '../styles/theme.style';
import EventCardMusikkFest from '../components/cards/EventCardMusikkFest.js';

initializeParse(
	'xxxxxx',
	'xxxxxx',
	'xxxxxx'
);

const RECORDS_TO_LOAD = 20;

export default function MusikkFestScreen() {
	const [skip, setSkip] = useState(0);
	const [events, setEvents] = useState([]);
	const parseQuery = new Parse.Query('Schedule');
	parseQuery.limit(RECORDS_TO_LOAD);
	parseQuery.equalTo('published', true);
	parseQuery.ascending('start_time');
	parseQuery.skip(skip);

	const {
		isLive, // Indicates that Parse Live Query is connected
		isLoading, // Indicates that the initial load is being processed
		isSyncing, // Indicates that the library is getting the latest data from Parse Server
		results, // Stores the current results in an array of Parse Objects
		count, // Stores the current results count
		error, // Stores any error
		reload, // Function that can be used to reload the data
	} = useParseQuery(
		parseQuery, // The Parse Query to be used
		{
			enabled: true, // Enables the parse query (default: true)
			enableLocalDatastore: true, // Enables cache in local datastore (default: true)
			enableLiveQuery: true, // Enables live query for real-time update (default: true)
		}
	);

	const getData = () => {
		if (skip === 0) {
			setEvents(results);
		} else {
			setEvents([...events, ...results]);
		}
	};

	useEffect(() => {
		getData();
	}, [results]);



	const loadMore = () => {
		!isSyncing && setSkip(skip + RECORDS_TO_LOAD);
	};

	return (
		<SafeAreaView style={styles.container}>
			{isLoading && (
				<View>
					<Text style={styles.standardText}>Loading...</Text>
				</View>
			)}
			{isLive && (
				<View>
					<Text style={styles.standardText}>Live!</Text>
				</View>
			)}
			{isSyncing && (
				<View>
					<Text style={styles.standardText}>Syncing...</Text>
				</View>
			)}
			<FlatList
				data={events}
				renderItem={({ item }) => <EventCardMusikkFest item={item} />}
				onEndReachedThreshold={0.5}
				onEndReached={(info) => {
					console.log(info);
					// loadMore();
					if (!isLoading) {
						console.log('end reached');
						loadMore();
					}
				}}
			/>
		</SafeAreaView>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#000000',
	},

	sectionHeader: {
		fontSize: 24,
		color: theme.SECONDARY_COLOR,
		flex: 1,
		marginLeft: 16,
		paddingVertical: 8,
		backgroundColor: '#000000',
	},

	footerContainer: {
		flex: 1,
		padding: 8,
		justifyContent: 'center',
		alignItems: 'center',
		flexDirection: 'column',
	},
	loadMoreBtn: {
		padding: 16,
		backgroundColor: theme.PRIMARY_COLOR_LIGHT,
		borderRadius: 4,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		flex: 1,
	},
	standardText: {
		color: 'white',
		fontSize: 15,
		textAlign: 'center',
	},
});