react-native-skia-list - GitLite

KO | EN

gitlite — search

#hacktoberfest #llm #android #machine-learning #rust #deep-learning #macos #nodejs #cli #kubernetes #vue #awesome-list #security #ios

react-native-skia-list

(★ 243)

The fastest react-native list renderer based on @shopify/react-native-skia

File Explorer

Download Latest Version (.zip)

- - ci.yml
  - deploy.yml
- - yarn-4.5.1.cjs
- _layout.tsx
- FlashList.tsx
- FlatList.tsx
- GettingStarted.tsx
- index.tsx
- SkiaFlatList.tsx
- SkiaMessageList.tsx
- SkiaScrollView.tsx
- SkiaVideoList.tsx
- Test.tsx
- adaptive-icon.png
- ArrowUp.tsx
- favicon.png
- icon.png
- splash.png
- - .prettierrc
  - index.mdx
- - .nojekyll
  - demo.gif
  - demo.mov
  - demo.mp4
  - googlec517511817a70763.html
- .gitignore
- babel.config.js
- docusaurus.config.ts
- package.json
- sidebars.ts
- tailwind.config.js
- tsconfig.json
- - NotoColorEmoji-Regular.ttf
  - Roboto-Regular.ttf
- - Assets.ts
  - ContextMenu.tsx
  - index.tsx
  - lipsum.ts
  - randomMessage.ts
  - Render.ts
  - State.ts
  - Swipe.ts
- - HapticsPolyfill.ts
  - SharedText.tsx
  - SkiaPictureView.tsx
  - SkiaPictureView.web.tsx
  - time.tsx
- LoadApp.tsx
- LoadFonts.tsx
- LoadSkia.tsx
- Message.tsx
- canvaskit.wasm
- index.html
- serve.json
- prepare-react-native-skia-catalyst.mjs
- - index.test.tsx
- - index.ts
  - Render.tsx
  - State.ts
- - index.ts
  - Render.tsx
  - Scrollbar.tsx
  - ScrollGesture.ts
  - SkiaDomView.tsx
  - State.ts
- - callOnUI.ts
  - Decay.ts
  - DOM.ts
  - globals.d.ts
  - Interpolate.ts
  - Reconciler.ts
  - timeout.ts
  - timing.ts
  - touch.ts
- index.ts
.gitattributes
.gitignore
.nvmrc
.watchmanconfig
.yarnrc.yml
app.json
App.tsx
babel.config.js
benchmark.txt
CODE_OF_CONDUCT.md
CONTRIBUTING.md
eas.json
lefthook.yml
LICENSE
metro.config.js
package.json
README.md
tsconfig.build.json
tsconfig.json
webpack.config.ts
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Native Skia List

![](https://raw.githubusercontent.com/samuelscheit/react-native-skia-list/main/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
yarn add react-native-skia-list @shopify/react-native-skia react-native-keyboard-controller react-native-reanimated react-native-gesture-handler
```

## [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:

<a href="https://samuelscheit.github.io/react-native-skia-list/#demo">
	<img width="230" src="./docs/static/demo.gif" />
</a>

## 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";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { KeyboardProvider } from "react-native-keyboard-controller";

// 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 (
		<KeyboardProvider>
			<GestureHandlerRootView style={{ flex: 1 }}>
				<SkiaFlatList
					safeArea={safeArea}
					// Provide an initialData array that can be serialized and passed to the worklet thread
					initialData={() => [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
						const text = `Item ${item}`;

return paragraphBuilder.addText(text).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;
					}}
				/>
			</GestureHandlerRootView>
		</KeyboardProvider>
	);
}
```

## 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