Implementing the fastest list renderer for React Native

const width = 256;
const height = 256;
const r = width * 0.33;
 
return (
	<Canvas style={{ width, height }}>
		<Group blendMode="multiply">
			<Circle cx={r} cy={r} r={r} color="cyan" />
			<Circle cx={width - r} cy={r} r={r} color="magenta" />
			<Circle cx={width / 2} cy={width - r} r={r} color="yellow" />
		</Group>
	</Canvas>
);

yarn add react-native-skia-list

// needed for types for global.SkiaDomApi
import type {} from "@shopify/react-native-skia/lib/module/renderer/HostComponents";
import { matchFont, Skia } from "@shopify/react-native-skia";
import { SkiaFlatList, useSkiaFlatList } from "react-native-skia-list";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useCallback, useEffect, useMemo } from "react";
 
export default function FlatList() {
	// Get the safe area insets to handle padding around the screen edges (needed for devices with notches)
	const safeArea = useSafeAreaInsets();
 
	// Create a Skia paint object to define a blue color for drawing the rectangle background
	const blue = Skia.Paint();
	blue.setColor(Skia.Color("rgb(124, 165, 230)"));
 
	// Define the white color that will be used for the text inside each rectangle
	const white = Skia.Color("#fff");
 
	// Memoize the paragraph builder to optimize performance by only creating it once and reusing
	const paragraphBuilder = useMemo(() => {
		return Skia.ParagraphBuilder.Make({
			textStyle: {
				fontSize: 24, // Set the font size for the text
				fontFamilies: ["Arial"], // Define font family for text
				color: white, // Set the color of the text to white
			},
		});
	}, []);
 
	// Function to generate the initial data for the list, creating 10_000 items
	const initialData = useCallback(() => {
		return Array.from({ length: 10_000 }, (_, i) => {
			paragraphBuilder.reset(); // Reset the paragraph builder before adding new text
 
			// Return an object for each item containing an id and a Skia paragraph with the text
			return {
				id: `${i}`,
				text: paragraphBuilder.addText(`Item ${i}`).build(), // Build the paragraph with the item text
			};
		});
	}, []);
 
	// Define the type for each entry in the list (an object with id and text properties)
	type Entry = ReturnType<typeof initialData>[number];
 
	// Function to extract the unique key from each list item (required)
	const keyExtractor = useCallback((item: Entry) => {
		"worklet"; // Indicates this function is used in a worklet context (required to run on the UI thread)
		return item.id; // Use the id property of each item as the unique key
	}, []);
 
	// Define padding and margin values for each rectangle in the list
	const rectPadding = 10;
	const rectMargin = 10;
 
	// useSkiaFlatList() to create and manage the list state
	const list = useSkiaFlatList({
		safeArea: {
			bottom: safeArea.bottom, // Pass the safe area insets to handle screen padding
			top: safeArea.top,
			left: 15, // Add padding to the left and right of the screen
			right: 15,
		},
		keyExtractor, // Provide the keyExtractor function
		initialData, // Provide the initial data for the list
		estimatedItemHeight: 100, // Set an estimated height for each item (to calculate the initial max height of the list)
		// Render function for each item
		renderItem: (item, index, state, element) => {
			"worklet"; // required to run on the UI thread
 
			// calculate the width of the item based on the screen width and safe area insets
			const width = state.layout.value.width - state.safeArea.value.left - state.safeArea.value.right;
 
			let maxTextWidth = width - rectPadding * 2; // Calculate maximum width available for the text
 
			// Layout the text with the calculated width
			item.text.layout(maxTextWidth); // needed to calculate the height of the text
 
			const textHeight = item.text.getHeight(); // Get the height of the laid-out text
			const rectHeight = textHeight + rectPadding * 2; // Calculate the height of the rectangle including padding
 
			const itemHeight = rectHeight + rectMargin; // Calculate the total item height including margin
 
			if (!element) return itemHeight; // If no element is passed, the item is not rendered and only its height is calculated
 
			// Add a rectangle node to the item background with the calculated dimensions and blue color
			element.addChild(
				SkiaDomApi.RectNode({
					x: 0,
					y: 0,
					width,
					height: rectHeight,
					paint: blue, // Set the paint to blue
				})
			);
 
			// Add a paragraph node to the item containing the text
			element.addChild(
				SkiaDomApi.ParagraphNode({
					paragraph: item.text, // Set the paragraph (text) to be displayed
					x: rectPadding, // Add horizontal padding
					y: rectPadding, // Add vertical padding
					width: maxTextWidth, // Set the maximum width for the text
					color: white, // Set the text color to white
				})
			);
 
			return itemHeight; // Return the calculated item height for proper layout
		},
	});
 
	// Render the SkiaFlatList with a flex style to fill the available space
	return <SkiaFlatList list={list} style={{ flex: 1 }} />;
}