### Start Example App Packager

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/CONTRIBUTING.md

Starts the Metro bundler for the example application, which is used to demonstrate and test the library's functionality. This command is run from the project root.

```shell
yarn example start
```

--------------------------------

### Run Example App on Web

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/CONTRIBUTING.md

Builds and runs the example application in a web browser. This allows for testing the library's functionality in a web environment.

```shell
yarn example web
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/CONTRIBUTING.md

Installs all necessary project dependencies for both the library and the example app using Yarn workspaces. This is a prerequisite for all development tasks.

```shell
yarn
```

--------------------------------

### Run Example App on Android

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/CONTRIBUTING.md

Builds and runs the example application on an Android device or emulator. This command is essential for testing native code changes and library integration on Android.

```shell
yarn example android
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/CONTRIBUTING.md

Builds and runs the example application on an iOS simulator or device. This is necessary for testing native code changes and library integration on iOS.

```shell
yarn example ios
```

--------------------------------

### Install React Native Skia List and Dependencies

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/README.md

Installs the react-native-skia-list package along with its core dependencies: @shopify/react-native-skia, react-native-keyboard-controller, react-native-reanimated, and react-native-gesture-handler.

```sh
yarn add react-native-skia-list @shopify/react-native-skia react-native-keyboard-controller react-native-reanimated react-native-gesture-handler
```

--------------------------------

### SkiaFlatList Example for Virtualized Lists in React Native

Source: https://context7.com/samuelscheit/react-native-skia-list/llms.txt

This example demonstrates the usage of SkiaFlatList for creating high-performance virtualized lists in React Native. It shows how to set up data, extract keys, estimate item heights, transform raw data into renderable Skia paragraphs, and render these items efficiently. The component utilizes Skia's rendering engine for improved performance, especially with large datasets. Dependencies include @shopify/react-native-skia, react-native-skia-list, react-native-safe-area-context, react-native-gesture-handler, and react-native-keyboard-controller.

```tsx
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 reusable ParagraphBuilder for efficient text rendering
const paragraphBuilder = Skia.ParagraphBuilder.Make({
  textStyle: {
    color: Skia.Color("black"),
    fontSize: 20,
  },
});

export default function MessageList() {
  const safeArea = useSafeAreaInsets();

  return (
    <KeyboardProvider>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <SkiaFlatList
          safeArea={safeArea}
          initialData={() => Array.from({ length: 1000 }, (_, i) => ({
            id: i,
            text: `Message ${i}`
          }))}
          keyExtractor={(item) => `${item.id}`}
          estimatedItemHeight={50}
          // Transform raw data into renderable format (called once per item)
          transformItem={(item, index, id, state) => {
            "worklet";
            paragraphBuilder.reset();
            return paragraphBuilder.addText(item.text).build();
          }}
          // Render the visual representation (called on visibility changes)
          renderItem={(paragraph, index, state, element) => {
            "worklet";
            const { width } = state.layout.value;
            paragraph.layout(width);
            const height = paragraph.getHeight();

            if (!element) return height; // Height-only calculation

            element.addChild(
              SkiaDomApi.ParagraphNode({
                paragraph,
                x: 0,
                y: 0,
                width,
              })
            );

            return height;
          }}
          onEndReached={() => {
            console.log("Load more items");
          }}
          onEndReachedThreshold={500}
          style={{ flex: 1 }}
        />
      </GestureHandlerRootView>
    </KeyboardProvider>
  );
}

```

--------------------------------

### SkiaFlatList Component Usage Example

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/FlatList/index.md

Demonstrates how to use the SkiaFlatList component to render a list of items. It shows how to initialize data, transform items for Skia rendering, and render each item with its layout and dimensions. Note that this component cannot render React Native components inside it.

```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 paragraph for each item
const paragraphBuilder = Skia.ParagraphBuilder.Make({
 textStyle: {
   color: Skia.Color("black"),
   fontSize: 20,
 },
});

export default function Test2() {
 const safeArea = useSafeAreaInsets();

 return (
   <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

       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;
     }}
   />
 );
}

```

--------------------------------

### Manage SkiaScrollView State with useSkiaScrollView

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/ScrollView/index.md

This example shows how to use the `useSkiaScrollView` hook to initialize and manage the state of a SkiaScrollView. The hook returns a state object that can be used to manipulate the scroll view's content and appearance.

```tsx
const state = useSkiaScrollView({ height: 1000 });

state.content.value.addChild(SkiaDomApi.RectNode({ width: 100, height: 100, x: 0, y: 0 }));

<SkiaScrollView list={state} style={{ flex: 1 }} />
```

--------------------------------

### SkiaScrollView State Management with useSkiaScrollView

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/ScrollView/index.md

Illustrates manual state management for SkiaScrollView using `useSkiaScrollView`. This example demonstrates how to access and modify the scroll view's transformation matrix, for instance, to skew the list content.

```tsx
const list = useSkiaScrollView({ height: 1000 });

// do something with the list, e.g. skew the list content:
list.matrix.value[1] = 0.1;

<SkiaScrollView list={list} />
```

--------------------------------

### Dynamic Content Updates with useSkiaScrollView

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/ScrollView/index.md

Demonstrates frequent updates to SkiaScrollView content using `useSkiaScrollView` for performance. This example adds and removes Skia RectNodes dynamically at intervals, leveraging imperative updates to bypass React's reconciliation.

```tsx
const state = useSkiaScrollView({ height: 1000 });
const content = content.value;

let previous = null;
// do something with the list content, e.g. add a new rect every 10ms
setInterval(() => {
	if (previous) content.removeChild(previous);

	previous = SkiaDomApi.RectNode({
		width: 100, height: 100,
		x: Math.random() * 1000,
		y: Math.random() * 1000
	});

	content.addChild(previous);
}, 10);
```

--------------------------------

### Get Item from Touch in react-native-skia-list

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/FlatList/index.md

Returns the item at a specific touch position. It receives the touch event object with 'x' and 'y' coordinates. Returns undefined if no item is found.

```javascript
getItemFromTouch: (e) => TapResult<T> | undefined
```

--------------------------------

### Control Skia ScrollView Imperatively with useSkiaScrollView

Source: https://context7.com/samuelscheit/react-native-skia-list/llms.txt

Utilize the useSkiaScrollView hook for imperative control over a Skia scroll view. This hook provides direct access to the scroll view's content for DOM manipulation, enabling dynamic addition and removal of elements, and triggering redraws for animated updates. Includes setup for an interval to demonstrate dynamic content.

```tsx
import { useSkiaScrollView, SkiaScrollView } from "react-native-skia-list";
import { Skia } from "@shopify/react-native-skia";
import { useEffect } from "react";

function ImperativeScrollView() {
  const state = useSkiaScrollView({
    height: 3000,
    inverted: false,
    bounces: true,
  });

  useEffect(() => {
    const content = state.content.value;

    // Add elements imperatively for high-performance updates
    let yOffset = 0;
    const colors = ["red", "blue", "green", "orange", "purple"];

    for (let i = 0; i < 30; i++) {
      const rect = SkiaDomApi.RectNode({
        x: 20,
        y: yOffset,
        width: 300,
        height: 80,
        color: Skia.Color(colors[i % colors.length]),
      });
      content.addChild(rect);
      yOffset += 100;
    }

    // Trigger redraw after adding elements
    state.redraw();

    // Animate dynamic content updates
    const interval = setInterval(() => {
      const randomRect = SkiaDomApi.RectNode({
        x: Math.random() * 300,
        y: Math.random() * 2900,
        width: 50,
        height: 50,
        color: Skia.Color("yellow"),
      });

      content.addChild(randomRect);
      state.redraw();

      // Remove after 1 second
      setTimeout(() => {
        content.removeChild(randomRect);
        state.redraw();
      }, 1000);
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  return <SkiaScrollView list={state} style={{ flex: 1 }} />;
}

```

--------------------------------

### SkiaScrollView with Children and Height Prop

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/ScrollView/index.md

An example of using SkiaScrollView with direct children elements and setting the `height` prop. This is suitable for simpler scenarios where manual state management is not required. Ensure `height` is specified for scrollability.

```tsx
<SkiaScrollView height={100} style={{ flex: 1 }}>
	<Circle cx={50} cy={50 + 100} r={50} color="blue" />
</SkiaScrollView>
```

--------------------------------

### Basic Usage of SkiaFlatList in React Native

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/README.md

Demonstrates the basic usage of the SkiaFlatList component in a React Native application. It shows how to set up necessary providers, define initial data, and implement item transformation and rendering using Skia's ParagraphBuilder and SkiaDomApi.

```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>
	);
}

```

--------------------------------

### List Data Manipulation with useSkiaFlatList

Source: https://context7.com/samuelscheit/react-native-skia-list/llms.txt

Illustrates various imperative methods provided by `useSkiaFlatList` for dynamic list management, including adding, inserting, removing, and updating items with optional animations.

```tsx
import { useSkiaFlatList } from "react-native-skia-list";

function DynamicList() {
  const list = useSkiaFlatList({
    initialData: () => [
      { id: "1", text: "Item 1" },
      { id: "2", text: "Item 2" },
    ],
    keyExtractor: (item) => item.id,
    renderItem: (item, index) => {
      "worklet";
      return 50; // Simple height-only example
    },
  });

  // Add item to end
  const addItem = () => {
    list.append({
      id: Date.now().toString(),
      text: "New Item"
    }, true); // animated
  };

  // Add item to start
  const prependItem = () => {
    list.prepend({
      id: Date.now().toString(),
      text: "First Item"
    }, true);
  };

  // Insert at specific position
  const insertItem = () => {
    list.insertAt({
      id: Date.now().toString(),
      text: "Middle Item"
    }, 2, true); // index 2, animated
  };

  // Remove by index
  const removeByIndex = () => {
    list.removeAt(0, true); // Remove first item, animated
  };

  // Remove by item reference
  const removeByItem = (item) => {
    list.removeItem(item, true);
  };

  // Remove by id
  const removeById = (id) => {
    list.removeItemId(id, true);
  };

  // Update existing item (must have same id)
  const updateItem = () => {
    list.updateItem({ id: "1", text: "Updated Item 1" });
  };

  // Replace all data
  const resetList = () => {
    list.resetData([
      { id: "a", text: "New Item A" },
      { id: "b", text: "New Item B" },
    ]);
  };

  // Force redraw specific item
  const redrawItem = (index) => {
    list.redrawItem(index);
  };

  return <SkiaFlatList list={list} style={{ flex: 1 }} />;
}

```

--------------------------------

### useSkiaFlatList Hook for Chat Interface

Source: https://context7.com/samuelscheit/react-native-skia-list/llms.txt

Demonstrates using the `useSkiaFlatList` hook to manage a chat-like list with inverted rendering and dynamic message appending. It utilizes Skia's ParagraphBuilder for text rendering and SkiaDomApi for node manipulation.

```tsx
import { useSkiaFlatList, SkiaFlatList } from "react-native-skia-list";
import { Skia } from "@shopify/react-native-skia";
import { useEffect } from "react";

const paragraphBuilder = Skia.ParagraphBuilder.Make({
  textStyle: { color: Skia.Color("black"), fontSize: 16 },
});

function ChatScreen() {
  const list = useSkiaFlatList({
    initialData: () => [],
    estimatedItemHeight: 60,
    inverted: true, // Chat-style bottom-to-top
    maintainVisibleContentPosition: true,
    keyExtractor: (item) => item.id,
    transformItem: (item, index, id, state) => {
      "worklet";
      paragraphBuilder.reset();
      return paragraphBuilder.addText(item.message).build();
    },
    renderItem: (paragraph, index, state, element) => {
      "worklet";
      const { width } = state.layout.value;
      paragraph.layout(width - 20);
      const height = paragraph.getHeight() + 20;

      if (!element) return height;

      element.addChild(
        SkiaDomApi.ParagraphNode({
          paragraph,
          x: 10,
          y: 10,
          width: width - 20,
        })
      );

      return height;
    },
    onTap: (result, state) => {
      "worklet";
      console.log("Tapped item:", result.item, "at index:", result.index);
    },
  });

  useEffect(() => {
    // Simulate receiving new messages
    const interval = setInterval(() => {
      list.prepend({
        id: Date.now().toString(),
        message: `New message at ${new Date().toLocaleTimeString()}`,
      }, true); // animated
    }, 3000);

    return () => clearInterval(interval);
  }, []);

  return <SkiaFlatList list={list} style={{ flex: 1 }} />;
}

```

--------------------------------

### Publish New Versions

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/CONTRIBUTING.md

Utilizes release-it to automate the process of publishing new versions of the library to npm. This includes version bumping, tagging, and release creation.

```shell
yarn release
```

--------------------------------

### Run Unit Tests

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/CONTRIBUTING.md

Executes all defined unit tests using Jest. This is crucial for verifying the correctness of code changes and ensuring no regressions are introduced.

```shell
yarn test
```

--------------------------------

### Programmatic Scrolling Control with useSkiaFlatList

Source: https://context7.com/samuelscheit/react-native-skia-list/llms.txt

Demonstrates how to programmatically control the scroll position of a `SkiaFlatList` using methods like `scrollToStart`, `scrollToEnd`, `scrollToIndex`, and `scrollToItem`. These methods support smooth scrolling animations.

```tsx
import { useSkiaFlatList } from "react-native-skia-list";
import { Button, View } from "react-native";

function ScrollableList() {
  const list = useSkiaFlatList({
    initialData: () => Array.from({ length: 100 }, (_, i) => ({
      id: `${i}`,
      text: `Item ${i}`
    })),
    keyExtractor: (item) => item.id,
    renderItem: (item, index) => {
      "worklet";
      return 60;
    },
  });

  return (
    <View style={{ flex: 1 }}>
      <View style={{ flexDirection: "row", padding: 10 }}>
        <Button
          title="To Start"
          onPress={() => list.scrollToStart(true)}
        />
        <Button
          title="To End"
          onPress={() => list.scrollToEnd(true)}
        />
        <Button
          title="To Index 50"
          onPress={() => list.scrollToIndex(50, true)}
        />
        <Button
          title="To Item"
          onPress={() => {
            const item = list.data.value[25];
            if (item) list.scrollToItem(item, true);
          }}
        />
      </View>
      <SkiaFlatList list={list} style={{ flex: 1 }} />
    </View>
  );
}

```

--------------------------------

### Lint Project Files

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/CONTRIBUTING.md

Runs ESLint to check for code style and potential errors in the project's JavaScript/TypeScript files. This command helps maintain code consistency.

```shell
yarn lint
```

--------------------------------

### Handle Touch and Gestures in Skia List

Source: https://context7.com/samuelscheit/react-native-skia-list/llms.txt

Implement touch and gesture handling for items within a Skia FlatList. This includes detecting taps and hovers, updating item appearance, and logging interaction details. It leverages the useSkiaFlatList hook for data management and rendering.

```tsx
import { useSkiaFlatList } from "react-native-skia-list";
import { Skia } from "@shopify/react-native-skia";

function InteractiveList() {
  const list = useSkiaFlatList({
    initialData: () => Array.from({ length: 50 }, (_, i) => ({
      id: `${i}`,
      text: `Item ${i}`,
      color: "lightblue",
    })),
    keyExtractor: (item) => item.id,
    transformItem: (item, index, id, state) => {
      "worklet";
      return { text: item.text, color: item.color };
    },
    renderItem: (transformed, index, state, element, touch, hover) => {
      "worklet";
      const { width } = state.layout.value;
      const height = 60;

      if (!element) return height;

      // Change color on hover/touch
      const bgColor = hover ? "yellow" : touch ? "orange" : transformed.color;

      element.addChild(
        SkiaDomApi.RectNode({
          x: 5,
          y: 5,
          width: width - 10,
          height: height - 10,
          color: Skia.Color(bgColor),
        })
      );

      return height;
    },
    onTap: (result, state) => {
      "worklet";
      // result contains: item, id, index, x, y, rowY, touchX, touchY, height
      console.log(`Tapped item ${result.index} at position (${result.touchX}, ${result.touchY})`);

      // Update item on tap
      const item = state.data.value[result.index];
      item.color = item.color === "lightblue" ? "lightgreen" : "lightblue";
      state.redrawItem(result.index, item);
    },
    onHover: (result, state) => {
      "worklet";
      if (result) {
        // Hovering over an item
        state.redrawItem(result.index, result.item, undefined, result);
      }
    },
  });

  return <SkiaFlatList list={list} style={{ flex: 1 }} />;
}

```

--------------------------------

### Type Check Project Files

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/CONTRIBUTING.md

Executes TypeScript to perform type checking across the entire project. This helps ensure code quality and catch potential type-related errors before committing.

```shell
yarn typecheck
```

--------------------------------

### Create Custom Skia ScrollView Component

Source: https://context7.com/samuelscheit/react-native-skia-list/llms.txt

Demonstrates creating a custom scrollable container for Skia content using the SkiaScrollView component. This allows for manual height specification and the inclusion of various Skia drawing elements. It also shows how to handle scroll events and configure scroll physics like decelerationRate.

```tsx
import { SkiaScrollView } from "react-native-skia-list";
import { Skia, Circle, Rect } from "@shopify/react-native-skia";

const paint = Skia.Paint();
paint.setColor(Skia.Color("rgb(91, 128, 218)"));

function CustomScrollView() {
  const contentHeight = 2000;
  const circleCount = 20;

  return (
    <SkiaScrollView
      height={contentHeight}
      style={{ flex: 1 }}
      safeArea={{ top: 20, bottom: 20, left: 10, right: 10 }}
      bounces={true}
      decelerationRate={0.998}
      onScroll={(event) => {
        "worklet";
        // Called on every scroll position change
        console.log("ScrollY:", event.scrollY);
      }}
      onScrollBeginDrag={() => {
        "worklet";
        console.log("Started dragging");
      }}
      onScrollEndDrag={() => {
        "worklet";
        console.log("Stopped dragging");
      }}
    >
      {Array.from({ length: circleCount }, (_, i) => (
        <Circle
          key={i}
          cx={50}
          cy={50 + i * 100}
          r={40}
          paint={paint}
        />
      ))}

      <Rect
        x={100}
        y={100}
        width={200}
        height={100}
        color="red"
      />
    </SkiaScrollView>
  );
}

```

--------------------------------

### useSkiaFlatList Hook Usage

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/FlatList/index.md

Demonstrates how to use the useSkiaFlatList hook to manage the state of a SkiaFlatList. The hook returns the list's state, which can then be passed to the SkiaFlatList component.

```tsx
const state = useSkiaFlatList({ ... });

<SkiaFlatList list={state} style={{ flex: 1 }} />
```

--------------------------------

### Prepend Data to List in react-native-skia-list

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/FlatList/index.md

Prepends new data to the beginning of the list. An optional animated parameter can be provided for animated transitions.

```javascript
prepend: (data, animated?) => void
```

--------------------------------

### Fix Linting Errors

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/CONTRIBUTING.md

Applies automatic code formatting and fixes to resolve linting errors detected by ESLint. This command should be run to ensure code style compliance.

```shell
yarn lint --fix
```

--------------------------------

### Basic SkiaScrollView Usage

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/ScrollView/index.md

Demonstrates the basic implementation of SkiaScrollView, rendering multiple Skia Circle elements within a scrollable container. It requires the `height` prop to be set for scrollability and uses a paint object for styling.

```tsx
const paint = Skia.Paint();
paint.setColor(Skia.Color("rgb(91, 128, 218)"));

const circleCount = 100;

<SkiaScrollView height={circleCount * 100} style={{ flex: 1 }}>
	{Array.from({ length: circleCount }, (_, i) => (
		<Circle key={i} cx={50} cy={50 + i * 100} r={50} paint={paint} />
	))}
</SkiaScrollView>
```

--------------------------------

### Render React Elements with SkiaRoot Reconciler

Source: https://context7.com/samuelscheit/react-native-skia-list/llms.txt

Utilizes the SkiaRoot reconciler for low-level rendering of React elements into Skia DOM nodes outside of scroll views. This allows for direct manipulation of Skia elements. It requires react-native-skia-list and @shopify/react-native-skia. The render method takes JSX as input, and unmount cleans up resources.

```tsx
import { SkiaRoot } from "react-native-skia-list";
import { Skia, Circle, Rect } from "@shopify/react-native-skia";
import { useEffect, useState } from "react";

function CustomRenderer() {
  const [root] = useState(() => {
    const skiaRoot = new SkiaRoot(
      Skia,
      false, // native mode
      () => console.log("Redraw requested"),
      () => 0 // native ID
    );
    return skiaRoot;
  });

  useEffect(() => {
    // Render React elements to Skia DOM
    root.render(
      <>
        <Circle cx={100} cy={100} r={50} color="red" />
        <Rect x={200} y={200} width={100} height={100} color="blue" />
      </>
    );

    return () => {
      root.unmount();
    };
  }, []);

  // Access the underlying Skia DOM
  const dom = root.dom;

  return null; // Custom usage with SkiaCanvas or other components
}

```

--------------------------------

### InitialScrollViewState

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/ScrollView/index.md

The initial state object for the SkiaScrollView.

```APIDOC
## InitialScrollViewState

### `root` (SharedValue<RenderNode<GroupProps>>)

The root [group node](https://shopify.github.io/react-native-skia/docs/group) of the skia list view with a fixed position that contains the `content` group node. You can transform the entire list by setting the `matrix` property.

```tsx
root.value.setProp("matrix", Skia.Matrix().skew(1, 0.5).get());
```

### `content` (SharedValue<RenderNode<GroupProps>>)

The content [group node](https://shopify.github.io/react-native-skia/docs/group) of the skia list view that contains the list items which are translated based on the scroll position.

### `matrix` (SharedValue<SkMatrix>)

The Skia Matrix that translates the content node.
- `matrix.value[0]` is the **X scale**.
- `matrix.value[4]` is the **Y scale**.
- `matrix.value[5]` is the **Y translation**. Use `scrollY` instead.
- `matrix.value[2]` is the **X translation**. Use `safeArea.left` instead.
- `matrix.value[1]` is the **X skew**.
- `matrix.value[3]` is the **Y skew**.

### `redraw` (() => void)

Call `redraw()` to request a redraw of the skia canvas, e.g. when adding a fixed element to the root node. When using FlatList use `redrawItems()` instead to redraw the list items. When animating a property use `startedAnimation()` and `finishedAnimation()` to efficiently rerender the list.

### `pressing` (SharedValue<boolean>)

Shared value that indicates if the view is currently being pressed.
```

--------------------------------

### SkiaScrollView with useSkiaScrollView Hook

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/ScrollView/index.md

Shows how to manage SkiaScrollView's state manually using the `useSkiaScrollView` hook. This approach is beneficial for custom behaviors, gestures, or imperative updates to the content, avoiding the React reconciler for performance.

```tsx
const state = useSkiaScrollView({ height: 1000 });
const content = content.value;

content.addChild(SkiaDomApi.RectNode({ width: 100, height: 100, x: 0, y: 0 }));

<SkiaScrollView list={state} style={{ flex: 1 }} />
```

--------------------------------

### Insert Data at Index in react-native-skia-list

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/FlatList/index.md

Inserts new data at a specified index within the list. An optional animated parameter can be provided to control the transition.

```javascript
insertAt: (data, index, animated?) => void
```

--------------------------------

### useSkiaScrollView Hook

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/ScrollView/index.md

Hook to manage and access the state of SkiaScrollView.

```APIDOC
## useSkiaScrollView

Use this hook to manage and access the state of SkiaScrollView.

### Parameters

- `SkiaScrollViewProps` (object) - Props for the SkiaScrollView.

### Returns

- `SkiaScrollViewState` (object) - The state of the SkiaScrollView.

### Example

```tsx
const state = useSkiaScrollView({ height: 1000 });

state.content.value.addChild(SkiaDomApi.RectNode({ width: 100, height: 100, x: 0, y: 0 }));

<SkiaScrollView list={state} style={{ flex: 1 }} />
```
```

--------------------------------

### Apply Skia Matrix Transformation to List

Source: https://context7.com/samuelscheit/react-native-skia-list/llms.txt

Applies a skew transformation to the entire Skia list using Skia matrices. This involves obtaining the SkiaScrollView state, modifying its matrix value with translation and skew, and then updating the root property and redrawing the list. It requires react-native-skia-list and react-native-reanimated.

```tsx
import { useSkiaScrollView, SkiaScrollView } from "react-native-skia-list";
import { Skia, Circle } from "@shopify/react-native-skia";
import { useEffect } from "react";
import { runOnUI } from "react-native-reanimated";

function TransformedList() {
  const state = useSkiaScrollView({ height: 1000 });

  useEffect(() => {
    // Apply skew transformation to entire list
    runOnUI(() => {
      "worklet";
      const matrix = state.matrix.value;
      matrix.identity().translate(0, 0).skew(0.1, 0);
      state.root.value.setProp("matrix", matrix);
      state.redraw();
    })();
  }, []);

  return (
    <SkiaScrollView list={state} style={{ flex: 1 }}>
      {Array.from({ length: 20 }, (_, i) => (
        <Circle key={i} cx={100} cy={50 + i * 50} r={30} color="blue" />
      ))}
    </SkiaScrollView>
  );
}

```

--------------------------------

### Redraw Items in react-native-skia-list

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/FlatList/index.md

Recalculates the items in the list and performs necessary element mounting or unmounting. This is automatically called on scroll or when data changes.

```javascript
redrawItems: () => void
```

--------------------------------

### SkiaScrollView Style Prop

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/ScrollView/index.md

Illustrates the usage of the `style` prop for SkiaScrollView, emphasizing the need for `flex: 1` to ensure the Skia canvas occupies the available screen space. This follows standard React Native styling practices.

```tsx
<SkiaScrollView style={{ flex: 1 }} />
```

--------------------------------

### Implement SkiaScrollView onScroll Callback

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/ScrollView/index.md

This snippet demonstrates how to implement the `onScroll` callback for SkiaScrollView. The callback must be a worklet function and requires manual throttling for performance. It receives scroll event data, allowing you to react to scroll position changes.

```tsx
function onScroll(event: ScrollEvent) {
	"worklet";
	const { scrollY } = event;
	// do something with scrollY, e.g. update the position of a sticky header
}

<SkiaScrollView onScroll={onScroll} />
```

--------------------------------

### Transform Skia List with Root Node Matrix

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/ScrollView/index.md

This code illustrates how to apply transformations to the entire Skia list view by manipulating the `matrix` property of the `root` node. You can use Skia's Matrix API to apply transformations like skewing.

```tsx
root.value.setProp("matrix", Skia.Matrix().skew(1, 0.5).get());
```

--------------------------------

### SkiaScrollView with Fixed Children

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/ScrollView/index.md

Shows how to use the `fixedChildren` prop in SkiaScrollView to render elements that remain visible and non-scrollable at the top of the list content, such as headers or overlays.

```tsx
<SkiaScrollView fixedChildren={<Fill color="blue" />} />
```

--------------------------------

### Append Data to List in react-native-skia-list

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/FlatList/index.md

Appends new data to the end of the list. An optional animated parameter can be provided for animated transitions.

```javascript
append: (data, animated?) => void
```

--------------------------------

### SkiaScrollView Props

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/ScrollView/index.md

Props available for the SkiaScrollView component, controlling its behavior and appearance.

```APIDOC
## SkiaScrollView Props

### `decelerationRate` (number) - Optional

The deceleration rate for momentum scrolling. Default is 0.998.

### `height` (number) - Optional

Sets the initial value for `maxHeight` while taking the layout height into consideration. This value is required for SkiaScrollView to be able to scroll.

### `inverted` (boolean) - Optional

Inverts the scroll direction of the Gesture Handler. Used in conjunction with `inverted` of `SkiaScrollViewProps`.

### `onScroll` ((value) => void) - Optional

Callback that is invoked every time the scroll position changes. Needs to be a worklet function. You need to implement throttling yourself.

```tsx
function onScroll(event: ScrollEvent) {
  "worklet";
  const { scrollY } = event;
  // do something with scrollY, e.g. update the position of a sticky header
}

<SkiaScrollView onScroll={onScroll} />
```

### `onScrollBeginDrag` (() => void) - Optional

Callback that is invoked when the user starts dragging the scroll view. Needs to be a worklet function.

### `onScrollEndDrag` (() => void) - Optional

Callback that is invoked when the user stops dragging the scroll view. Needs to be a worklet function.

### `onMomentumScrollEnd` (() => void) - Optional

Callback that is invoked when the momentum scroll begins. Needs to be a worklet function.

### `onMomentumScrollBegin` (() => void) - Optional

Callback that is invoked when the momentum scroll ends. Needs to be a worklet function.

### `startedAnimation` (() => void) - Optional

Call this function when you start animating a SharedValue to enable continuous rendering mode.

### `finishedAnimation` (() => void) - Optional

Call this function when you finish animating a SharedValue to return to default rendering mode. Ensure that you have an equal amount of `startedAnimation` and `finishedAnimation` calls to avoid unnecessary re-renders when idling.

### `customScrollGesture` (typeof getScrollGesture) - Optional

Specify a custom scroll gesture.

### `customGesture` ((props) => ComposedGesture) - Optional

Specify a custom gesture handler. E.g. to implement scrolling and swiping list items horizontally.

### `safeArea` (EdgeInsets) - Optional

Specify offsets for the content of the scroll view. e.g. `{ top: 30, bottom: 20, left: 15, right: 15 }`

### `automaticallyAdjustKeyboardInsets` (boolean) - Optional

Set to `false` to disable the automatic keyboard adjustment.

### `keyboard` (ReanimatedContext) - Optional

Specify a custom keyboard handler

### `inverted` (boolean) - Optional

SkiaScrollView so that the elements start rendering from the bottom screen to the top.
```

--------------------------------

### Remove Specific Item in react-native-skia-list

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/FlatList/index.md

Removes a specific item from the list. An optional animated parameter can be provided for animated transitions.

```javascript
removeItem: (item, animated?) => void
```

--------------------------------

### Unmount Element in react-native-skia-list

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/FlatList/index.md

Unmounts an element from the list, either by its index or by the item object itself.

```javascript
unmountElement: (index, item) => void
```

--------------------------------

### Reset Data in react-native-skia-list

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/FlatList/index.md

Sets a new data array for the list and resets the list's position and cache. This operation is useful for completely refreshing the list content.

```javascript
resetData: (newData?) => void
```

--------------------------------

### Remove Data at Index in react-native-skia-list

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/FlatList/index.md

Removes data at a specific index from the list. An optional animated parameter can be provided for animated transitions.

```javascript
removeAt: (index, animated?) => void
```

--------------------------------

### ScrollGestureState

Source: https://github.com/samuelscheit/react-native-skia-list/blob/main/docs/docs/api/ScrollView/index.md

Represents the state of the scroll gesture within SkiaScrollView.

```APIDOC
## ScrollGestureState

### `gesture` (GestureType)

Represents the current gesture.

### `scrollTo` ((opts) => void)

Scroll to a certain Y position.

### `scrollToEnd` ((opts) => void)

Scroll to the end of the scroll view (inferred by maxHeight).

### `startMomentumScroll` (velocityY) => void

If you manually handle scrolling, e.g. with a custom ScrollBar, you can call this function to start momentum scrolling.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.