https://github.com/samuelscheit/react-native-skia-list

The fastest react-native list renderer based on skia
https://github.com/samuelscheit/react-native-skia-list

Last synced: 4 days ago
JSON representation

The fastest react-native list renderer based on skia

• Host: GitHub
• URL: https://github.com/samuelscheit/react-native-skia-list
• Owner: SamuelScheit
• License: mit
• Created: 2024-10-15T00:48:55.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-11-04T03:10:09.000Z (12 days ago)
• Last Synced: 2024-11-04T04:18:40.533Z (12 days ago)
• Language: TypeScript
• Homepage: https://samuelscheit.github.io/react-native-skia-list/
• Size: 84.8 MB
• Stars: 11
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        


# React Native Skia List

![](./docs/static/img/banner.png)

React Native Skia List is a high-performance list component for React Native. \

It is built on top of [@shopify/react-native-skia](https://shopify.github.io/react-native-skia/), a powerful 2D graphics library designed to be fast and customizable.

## Installation

> [!CAUTION]

> This library is in early development and not ready for production use.

```sh

npm install react-native-skia-list

```

## [Documentation](https://samuelscheit.github.io/react-native-skia-list/)

You can achieve good looking, interactive and high-performance lists with a lot of items like the following example:



	



## Usage

```tsx

// needed for SkiaDomApi type

import type {} from "@shopify/react-native-skia/lib/typescript/src/renderer/HostComponents";

import { Skia } from "@shopify/react-native-skia";

import { SkiaFlatList } from "react-native-skia-list";

import { useSafeAreaInsets } from "react-native-safe-area-context";

// Create a Skia ParagraphBuilder that will be used to build the text for each item

const paragraphBuilder = Skia.ParagraphBuilder.Make({

	textStyle: {

		color: Skia.Color("black"),

		fontSize: 20,

	},

});

export default function Test() {

	const safeArea = useSafeAreaInsets();

	return (

		 [0, 1, 2, 3, 4, 5, 6, 7, 8]}

			// To optimize performance for the initial mount you can provide a transformItem function

			// It will be called once for each item when it is mounted the first time

			transformItem={(item, index, id, state) => {

				"worklet";

				paragraphBuilder.reset(); // reuses the paragraphBuilder for each item

				return paragraphBuilder.addText(`Item ${item}`).build();

			}}

			// renderItem will be called whenever an item visibility changes

			renderItem={(item, index, state, element) => {

				"worklet";

				const { width } = state.layout.value;

				item.layout(width); // calculates the paragraph layout

				const height = item.getHeight(); // gets the height of the paragraph

				// element is a Skia.GroupNode or will be undefined if only the height of the element is needed

				if (!element) return height;

				element.addChild(

					// see the following link for all element types

					// https://github.com/Shopify/react-native-skia/blob/5c38b27d72cea9c158290adb7d23c6109369ac2f/packages/skia/src/renderer/HostComponents.ts#L72-L191

					SkiaDomApi.ParagraphNode({

						paragraph: item,

						x: 0,

						y: 0,

						width,

					})

				);

				return height;

			}}

		/>

	);

}

```

## Contributing

See the [contributing guide](https://github.com/SamuelScheit/react-native-skia-list/blob/main/CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT