### Start Example App

Source: https://github.com/matipl01/react-native-sortables/blob/main/README.md

Command to start an example application for testing the library locally. Navigate to the specific example directory (e.g., example/fabric) before running.

```bash
cd example/fabric  # or any other example
yarn start
```

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

### Start Development in Example App

Source: https://github.com/matipl01/react-native-sortables/blob/main/CONTRIBUTING.md

Navigate to an example directory and start the development server. Alternatively, use the root yarn commands for specific examples.

```bash
cd example/fabric  # or any other example
yarn start
```

```bash
yarn example:fabric start
yarn example:paper android
yarn example:expo ios
```

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

### Clone and Setup Local Library

Source: https://github.com/matipl01/react-native-sortables/blob/main/README.md

Steps to clone the repository and set up the local development environment for the library. This includes installing dependencies and running pod install for iOS.

```bash
git clone https://github.com/MatiPl01/react-native-sortables.git
cd react-native-sortables
yarn
yarn pod  # iOS only
```

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

### Import Touchable Example and Code

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/grid/examples/touchable.mdx

Imports the necessary components and raw code for the Touchable example. This setup is required to render the interactive example.

```javascript
import InteractiveExample from '@site/src/components/InteractiveExample';
import TouchableExample from '@site/src/examples/Touchable';
import TouchableCode from '!!raw-loader!@site/src/examples/Touchable';
```

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

### Install with Yarn

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/getting-started.mdx

Use this command to install the library using Yarn. Ensure you have Yarn package manager installed.

```sh
yarn add react-native-sortables
```

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

### Install with NPM

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/getting-started.mdx

Use this command to install the library using NPM. Ensure you have Node Package Manager installed.

```sh
npm install react-native-sortables
```

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

### Run Example App Commands from Root

Source: https://github.com/matipl01/react-native-sortables/blob/main/README.md

Alternative way to run example app commands from the project root directory using yarn. This allows you to specify the example app and the command to execute.

```bash
yarn example:fabric start
yarn example:paper android
yarn example:expo ios
```

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

### Default Drop Indicator Example

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/grid/examples/drop-indicator.mdx

Shows the default implementation of the Drop Indicator. No specific setup is required beyond importing the component.

```javascript
import InteractiveExample from '@site/src/components/InteractiveExample';
import DropIndicatorDefaultExample from '@site/src/examples/DropIndicatorDefault';
import DropIndicatorDefaultCode from '!!raw-loader!@site/src/examples/DropIndicatorDefault';

<InteractiveExample
  component={DropIndicatorDefaultExample}
  code={DropIndicatorDefaultCode}
/>
```

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

### Install Project Dependencies

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/README.md

Run this command to install all necessary project dependencies using Yarn.

```bash
$ yarn
```

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

### Flex Active Item Portal Example

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/flex/examples/active-item-portal.mdx

This example showcases the active item portal functionality. It requires importing InteractiveExample, FlexActiveItemPortalExample, and FlexActiveItemPortalCode.

```javascript
import InteractiveExample from '@site/src/components/InteractiveExample';
import FlexActiveItemPortalExample from '@site/src/examples/FlexActiveItemPortal';
import FlexActiveItemPortalCode from '!!raw-loader!@site/src/examples/FlexActiveItemPortal';

<InteractiveExample
  component={FlexActiveItemPortalExample}
  code={FlexActiveItemPortalCode}
  metastring='{33,53}'
/>
```

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

### Basic Sortable Grid Example

Source: https://github.com/matipl01/react-native-sortables/blob/main/README.md

A simple example demonstrating how to use the Sortable.Grid component to display and reorder a list of items. Ensure you have react-native-reanimated and react-native-gesture-handler installed.

```tsx
import { useCallback } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import type { SortableGridRenderItem } from 'react-native-sortables';
import Sortable from 'react-native-sortables';

const DATA = Array.from({ length: 12 }, (_, index) => `Item ${index + 1}`);

export default function Grid() {
  const renderItem = useCallback<SortableGridRenderItem<string>>(
    ({ item }) => (
      <View style={styles.card}>
        <Text>{item}</Text>
      </View>
    ),
    []
  );

  return (
    <Sortable.Grid
      columns={3}
      data={DATA}
      renderItem={renderItem}
      rowGap={10}
      columnGap={10}
    />
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#36877F',
    height: 100,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center'
  }
});
```

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

### Interactive Example with Different Item Heights

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/grid/examples/different-item-heights.mdx

This snippet is used within an interactive example component. It imports the necessary example component and its raw code for display.

```javascript
import InteractiveExample from '@site/src/components/InteractiveExample';
import DifferentHeightsExample from '@site/src/examples/DifferentHeights';
import DifferentHeightsCode from '!!raw-loader!@site/src/examples/DifferentHeights';

<InteractiveExample
  component={DifferentHeightsExample}
  code={DifferentHeightsCode}
/>
```

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

### Start Local Development Server

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/README.md

Starts a local development server that automatically refreshes the browser on code changes. No server restart is needed for most updates.

```bash
$ yarn start
```

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

### Import Custom Handle Example Code

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/grid/examples/custom-handle.mdx

Imports the necessary components and raw code for the Custom Handle interactive example.

```javascript
import InteractiveExample from '@site/src/components/InteractiveExample';
import CustomHandleExample from '@site/src/examples/CustomHandle';
import CustomHandleCode from '!!raw-loader!@site/src/examples/CustomHandle';
```

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

### Build and Run on Android

Source: https://github.com/matipl01/react-native-sortables/blob/main/README.md

Commands to build and run the example application on an Android device or emulator. This can be done via the command line or by building in Android Studio.

```bash
yarn android
```

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

### Build and Run on iOS

Source: https://github.com/matipl01/react-native-sortables/blob/main/README.md

Commands to build and run the example application on an iOS device or simulator. This can be done via the command line or by building in Xcode.

```bash
yarn ios
```

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

### Custom Style Drop Indicator Example

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/grid/examples/drop-indicator.mdx

Demonstrates how to apply custom styles to the Drop Indicator. Import the custom style example component and its code.

```javascript
import DropIndicatorCustomStyleExample from '@site/src/examples/DropIndicatorCustomStyle';
import DropIndicatorCustomStyleCode from '!!raw-loader!@site/src/examples/DropIndicatorCustomStyle';

<InteractiveExample
  component={DropIndicatorCustomStyleExample}
  code={DropIndicatorCustomStyleCode}
/>
```

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

### Worklet Callback Example

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/flex/props.mdx

Example of a worklet function for a callback. Worklets run directly on the UI thread for better performance.

```typescript
const onDragStart = useCallback((params: DragStartParams) => {
  'worklet';
  // Your code here
}, []);
```

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

### Custom Component Drop Indicator Example

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/grid/examples/drop-indicator.mdx

Illustrates using a custom React component as the drop indicator. Import the custom component example and its associated code.

```javascript
import DropIndicatorCustomComponentExample from '@site/src/examples/DropIndicatorCustomComponent';
import DropIndicatorCustomComponentCode from '!!raw-loader!@site/src/examples/DropIndicatorCustomComponent';

<InteractiveExample
  component={DropIndicatorCustomComponentExample}
  code={DropIndicatorCustomComponentCode}
/>
```

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

### Plain JS Callback Example

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/flex/props.mdx

Example of a plain JavaScript function for a callback. These run on the JS thread and require `runOnJS` for UI thread execution.

```typescript
const onDragStart = useCallback((params: DragStartParams) => {
  // Your code here
}, []);
```

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

### Custom Item Component Example

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/hooks/useItemContext.mdx

An example demonstrating how to use the `useItemContext` hook to create a custom item component that dynamically styles itself based on drag states.

```APIDOC
## Custom Item Component with useItemContext

### Description
This example shows a `GridItem` component that utilizes `useItemContext` to access `activationAnimationProgress` and `activationState` for applying animated styles, changing background color and applying a shake effect during drag.

### Method
N/A (Component Example)

### Endpoint
N/A

### Parameters
None

### Request Body
None

### Request Example
```tsx
import React from 'react';
import { Text, StyleSheet } from 'react-native';
import Animated, { useAnimatedStyle, interpolateColor, withSequence, withTiming, Easing } from 'react-native-reanimated';
import { useItemContext, DragActivationState } from 'react-native-sortables';

const styles = StyleSheet.create({
  card: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    margin: 10,
    borderRadius: 10,
    height: 100,
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
  },
});

function GridItem({ item }: { item: string }) {
  // highlight-start
  const { activationAnimationProgress, activationState } = useItemContext();
  // highlight-end

  const colorStyle = useAnimatedStyle(() => ({
    backgroundColor: interpolateColor(
      activationAnimationProgress.value,
      [0, 1],
      ['#36877F', '#063934']
    )
  }));

  const shakeStyle = useAnimatedStyle(() => {
    const easeOut = Easing.out(Easing.quad);

    return {
      transform: [
        activationState.value === DragActivationState.ACTIVE
          ? {
              rotate: withSequence(
                withTiming('0.08rad', { duration: 80, easing: Easing.linear }),
                withTiming('-0.08rad', { duration: 80, easing: Easing.linear }),
                withTiming('0.08rad', { duration: 80, easing: Easing.linear }),
                withTiming('-0.06rad', { duration: 80, easing: Easing.linear }),
                withTiming('0.06rad', { duration: 80, easing: Easing.linear }),
                withTiming('-0.04rad', { duration: 80, easing: Easing.linear }),
                withTiming('0.04rad', { duration: 80, easing: Easing.linear }),
                withTiming('0rad', { duration: 100, easing: easeOut })
              )
            }
          : { rotate: withTiming('0rad', { duration: 100, easing: easeOut }) }
      ]
    };
  });

  return (
    <Animated.View style={[styles.card, colorStyle, shakeStyle]}>
      <Text style={styles.text}>{item}</Text>
    </Animated.View>
  );
}

export default GridItem;
```

### Response
#### Success Response (Component Render)
- The component renders an `Animated.View` with dynamic styles based on drag state.

#### Response Example
(Visual output depends on drag state, see video in original documentation)

```

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

### Basic Sortable Grid Example

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/grid/usage.mdx

Demonstrates how to create a basic sortable grid with custom items. Ensure your renderItem function is wrapped in useCallback to prevent unnecessary re-renders.

```tsx
import { useCallback } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import type { SortableGridRenderItem } from 'react-native-sortables';
import Sortable from 'react-native-sortables';

const DATA = Array.from({ length: 12 }, (_, index) => `Item ${index + 1}`);

export default function Grid() {
  const renderItem = useCallback<SortableGridRenderItem<string>>(
    ({ item }) => (
      <View style={styles.card}>
        <Text>{item}</Text>
      </View>
    ),
    []
  );

  return (
    <Sortable.Grid
      columns={3}
      data={DATA} // Pass your data here
      renderItem={renderItem}
      rowGap={10}
      columnGap={10}
    />
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#36877F',
    height: 100,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center'
  }
});
```

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

### Flex Item Snap Example

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/flex/examples/item-snap.mdx

Demonstrates the item snap functionality in a flex layout. This example shows how an item transforms in relation to the touch position when pressed, prior to the drag operation.

```javascript
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { SortableGestureResponderEvent, SortableItem, SortableList } from 'react-native-sortables';

const styles = StyleSheet.create({
  item: {
    height: 100,
    width: 100,
    backgroundColor: 'red',
    margin: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  itemText: {
    color: 'white',
    fontSize: 20,
  },
});

const FlexItemSnapExample = () => {
  return (
    <SortableList
      style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
      itemStyle={styles.item}
      itemTextStyle={styles.itemText}
      data={['A', 'B', 'C']}
      renderItem={({ item, drag, isActive }) => (
        <SortableItem
          item={item}
          drag={drag}
          isActive={isActive}
          style={{
            transform: [
              {
                scale: isActive ? 1.1 : 1,
              },
            ],
          }}
        >
          <Text style={styles.itemText}>{item}</Text>
        </SortableItem>
      )}
    />
  );
};

export default FlexItemSnapExample;

```

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

### Flex Auto Scroll Example

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/flex/examples/auto-scroll.mdx

This example shows how to implement auto scrolling in a Sortable Flex component. Pass a `scrollableRef` to the component to enable this functionality.

```javascript
import React from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import { SortableFlex } from 'react-native-sortables';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
  },
  item: {
    height: 100,
    backgroundColor: 'blue',
    marginVertical: 10,
    marginHorizontal: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  itemText: {
    color: 'white',
    fontSize: 20,
  },
});

const FlexAutoScrollExample = () => {
  const scrollableRef = React.useRef(null);
  const [items, setItems] = React.useState([
    { id: '1', text: 'Item 1' },
    { id: '2', text: 'Item 2' },
    { id: '3', text: 'Item 3' },
    { id: '4', text: 'Item 4' },
    { id: '5', text: 'Item 5' },
    { id: '6', text: 'Item 6' },
    { id: '7', text: 'Item 7' },
    { id: '8', text: 'Item 8' },
    { id: '9', text: 'Item 9' },
    { id: '10', text: 'Item 10' },
  ]);

  return (
    <ScrollView ref={scrollableRef} style={styles.container}>
      <SortableFlex
        items={items}
        setItems={setItems}
        scrollableRef={scrollableRef}
        renderItem={({ item, drag }) => (
          <TouchableOpacity
            onLongPress={drag}
            style={styles.item}
          >
            <Text style={styles.itemText}>{item.text}</Text>
          </TouchableOpacity>
        )}
      />
    </ScrollView>
  );
};

export default FlexAutoScrollExample;

```

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

### Install Dependencies and Pods

Source: https://github.com/matipl01/react-native-sortables/blob/main/CONTRIBUTING.md

Run these commands to set up the development environment for React Native Sortables. 'yarn pod' is iOS specific.

```bash
yarn
yarn pod  # iOS only
```

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

### Custom Handle Example

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/flex/examples/custom-handle.mdx

This example shows how to integrate a custom drag handle within the Sortable Flex component. It requires importing the necessary components and raw code for display.

```javascript
import InteractiveExample from '@site/src/components/InteractiveExample';
import FlexCustomHandleExample from '@site/src/examples/FlexCustomHandle';
import FlexCustomHandleCode from '!!raw-loader!@site/src/examples/FlexCustomHandle';

<InteractiveExample
  component={FlexCustomHandleExample}
  code={FlexCustomHandleCode}
/>
```

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

### Flex Fixed Items Example

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/flex/examples/fixed-items.mdx

This example demonstrates how to implement fixed items within a Sortable Flex component. The fixed items are visually distinct and do not change their position during sorting.

```javascript
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { SortableFlex } from 'react-native-sortables';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f0f0f0',
  },
  item: {
    padding: 15,
    marginVertical: 8,
    backgroundColor: '#ffffff',
    borderRadius: 5,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 2,
    flexDirection: 'row',
    alignItems: 'center',
  },
  fixedItem: {
    backgroundColor: '#d3d3d3',
    opacity: 0.6,
  },
  itemText: {
    fontSize: 16,
  },
});

const data = [
  { id: '1', text: 'Item 1 (Fixed)', fixed: true },
  { id: '2', text: 'Item 2' },
  { id: '3', text: 'Item 3' },
  { id: '4', text: 'Item 4 (Fixed)', fixed: true },
  { id: '5', text: 'Item 5' },
  { id: '6', text: 'Item 6' },
  { id: '7', text: 'Item 7 (Fixed)', fixed: true },
];

const FlexFixedItemsExample = () => {
  return (
    <View style={styles.container}>
      <SortableFlex
        data={data}
        renderItem={({ item, drag, isActive }) => (
          <View
            style={[
              styles.item,
              item.fixed && styles.fixedItem,
              isActive && { opacity: 0.5 },
            ]}
            onTouchStart={drag}
          >
            <Text style={styles.itemText}>{item.text}</Text>
          </View>
        )}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
};

export default FlexFixedItemsExample;

```

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

### Custom Shadow Example

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/grid/examples/custom-shadow.mdx

Demonstrates applying a custom shadow to an active drag item by disabling the default shadow and animating the box-shadow property.

```javascript
import InteractiveExample from '@site/src/components/InteractiveExample';
import GridCustomShadowExample from '@site/src/examples/GridCustomShadow';
import GridCustomShadowCode from '!!raw-loader!@site/src/examples/GridCustomShadow';

<InteractiveExample
  component={GridCustomShadowExample}
  code={GridCustomShadowCode}
/>
```

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

### onDragStart

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/grid/props.mdx

Callback function invoked when the drag gesture begins. It receives parameters including the item's key, its starting index, and mappings for index-to-key and key-to-index.

```APIDOC
## onDragStart

### Description
Called when the drag gesture starts.

### Type
`DragStartCallback` (default: `undefined`)

### Required
No

### Type Definitions
```tsx
type DragStartCallback = (params: DragStartParams) => void;

type DragStartParams = {
  key: string;
  fromIndex: number;
  indexToKey: Array<string>;
  keyToIndex: Record<string, number>;
};
```
```

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

### Flexbox with Different Item Sizes

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/flex/examples/different-item-sizes.mdx

This example showcases the Sortable Flex component's ability to handle items of varying sizes. It demonstrates how items naturally flow and wrap based on their content.

```javascript
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { SortableFlex } from 'react-native-sortables';

const styles = StyleSheet.create({
  item1: {
    width: 100,
    height: 100,
    backgroundColor: 'lightblue',
    margin: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  item2: {
    width: 150,
    height: 80,
    backgroundColor: 'lightgreen',
    margin: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  item3: {
    width: 80,
    height: 120,
    backgroundColor: 'lightcoral',
    margin: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  item4: {
    width: 120,
    height: 90,
    backgroundColor: 'lightsalmon',
    margin: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

const FlexDifferentSizes = () => {
  const data = [
    { id: '1', content: 'Item 1 (100x100)' },
    { id: '2', content: 'Item 2 (150x80)' },
    { id: '3', content: 'Item 3 (80x120)' },
    { id: '4', content: 'Item 4 (120x90)' },
    { id: '5', content: 'Item 5 (100x100)' },
    { id: '6', content: 'Item 6 (150x80)' },
    { id: '7', content: 'Item 7 (80x120)' },
    { id: '8', content: 'Item 8 (120x90)' },
  ];

  return (
    <SortableFlex
      data={data}
      renderItem={({ item, index }) => (
        <View style={styles[`item${index + 1}`]}>
          <Text>{item.content}</Text>
        </View>
      )}
      keyExtractor={(item) => item.id}
      numColumns={3} // Example: 3 columns
    />
  );
};

export default FlexDifferentSizes;

```

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

### Create Interactive Button with JSX

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/blog/2021-08-01-mdx-blog-post.mdx

Use JSX within an MDX file to render interactive React components. This example creates a simple button that triggers an alert on click.

```jsx
<button onClick={() => alert('button clicked!')}>Click me!</button>
```

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

### Active Item Decoration

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/flex/props.mdx

Settings applied to the active item when the drag gesture starts.

```APIDOC
## Active Item Decoration

All active item decoration settings are applied when the **item becomes active** (when drag gesture starts being handled).

### activeItemScale

Scale to which the pressed item is scaled when active.

- **Type**: `Animatable<number>`
- **Default**: `1.1`
- **Required**: `NO`

### activeItemOpacity

Opacity to which the pressed item is animated when active.

- **Type**: `Animatable<number>`
- **Default**: `1`
- **Required**: `NO`
```

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

### Custom Shadow for Active Item

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/flex/examples/custom-shadow.mdx

This example shows how to disable the default shadow and apply a custom box-shadow to an active item during drag operations. It utilizes the useItemContext hook to animate the shadow based on the activation progress, which is particularly useful for platforms like Android.

```javascript
import React from 'react';
import {
  Sortable,
  useItemContext,
} from 'react-native-sortables';
import {
  View,
  Text,
  StyleSheet,
  Animated,
} from 'react-native';

const CustomShadowItem = ({ item }) => {
  const { isActivated } = useItemContext();

  const animatedShadowOpacity = React.useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    Animated.timing(animatedShadowOpacity, {
      toValue: isActivated ? 1 : 0,
      duration: 200,
      useNativeDriver: false,
    });
  }, [isActivated]);

  const shadowStyle = {
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: animatedShadowOpacity.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 0.35],
    }),
    shadowRadius: animatedShadowOpacity.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 8],
    }),
  };

  return (
    <Animated.View style={[styles.item, shadowStyle]}>
      <Text style={styles.text}>{item.text}</Text>
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  item: {
    backgroundColor: 'white',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
    borderRadius: 8,
    elevation: 4, // Default shadow for Android
  },
  text: {
    fontSize: 16,
  },
});

const FlexCustomShadowExample = () => {
  const data = React.useMemo(() => [
    { id: '1', text: 'Item 1' },
    { id: '2', text: 'Item 2' },
    { id: '3', text: 'Item 3' },
    { id: '4', text: 'Item 4' },
  ], []);

  return (
    <Sortable
      data={data}
      renderItem={({ item }) => <CustomShadowItem item={item} />}
      keyExtractor={(item) => item.id}
      activeItemShadowOpacity={0} // Disable default shadow
    />
  );
};

export default FlexCustomShadowExample;

```

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

### Custom Item Component with useItemContext

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/hooks/useItemContext.mdx

Example of a custom item component using useItemContext to dynamically style the item based on its activation state and animation progress. Requires react-native-reanimated for animations.

```tsx
function GridItem({ item }: { item: string }) {
  const { activationAnimationProgress, activationState } = useItemContext();

  const colorStyle = useAnimatedStyle(() => ({
    backgroundColor: interpolateColor(
      activationAnimationProgress.value,
      [0, 1],
      ['#36877F', '#063934']
    )
  }));

  const shakeStyle = useAnimatedStyle(() => {
    const easeOut = Easing.out(Easing.quad);

    return {
      transform: [
        activationState.value === DragActivationState.ACTIVE
          ? {
              rotate: withSequence(
                withTiming('0.08rad', { duration: 80, easing: Easing.linear }),
                withTiming('-0.08rad', { duration: 80, easing: Easing.linear }),
                withTiming('0.08rad', { duration: 80, easing: Easing.linear }),
                withTiming('-0.06rad', { duration: 80, easing: Easing.linear }),
                withTiming('0.06rad', { duration: 80, easing: Easing.linear }),
                withTiming('-0.04rad', { duration: 80, easing: Easing.linear }),
                withTiming('0.04rad', { duration: 80, easing: Easing.linear }),
                withTiming('0rad', { duration: 100, easing: easeOut })
              )
            }
          : { rotate: withTiming('0rad', { duration: 100, easing: easeOut }) }
      ]
    };
  });

  return (
    <Animated.View style={[styles.card, colorStyle, shakeStyle]}>
      <Text style={styles.text}>{item}</Text>
    </Animated.View>
  );
}
```

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

### Deploy Website Using SSH

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/README.md

Deploys the website using SSH. Ensure your SSH keys are configured correctly for deployment.

```bash
$ USE_SSH=true yarn deploy
```

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

### Build and Run on Platforms

Source: https://github.com/matipl01/react-native-sortables/blob/main/CONTRIBUTING.md

Commands to build and run the React Native application on iOS and Android devices.

```bash
yarn ios
yarn android
```

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

### Build Static Website Content

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/README.md

Generates the static content for the website, which is then placed in the 'build' directory. This output can be hosted on any static content hosting service.

```bash
$ yarn build
```

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

### Flex Touchable Example

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/flex/examples/touchable.mdx

This example showcases how to use the Sortable.Touchable component to enable press events on nested elements, such as a delete button, within a sortable list item. It prevents the item from being dragged when the nested element is pressed.

```javascript
import React from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
import Sortable from 'react-native-sortable';

const styles = StyleSheet.create({
  item: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 10,
    backgroundColor: '#f9f9f9',
    borderBottomWidth: 1,
    borderColor: '#eee',
  },
  text: {
    flex: 1,
    fontSize: 16,
  },
  deleteButton: {
    padding: 8,
    backgroundColor: '#ff4d4d',
    borderRadius: 4,
  },
  deleteButtonText: {
    color: 'white',
    fontSize: 12,
  },
});

const FlexTouchableExample = () => {
  const [data, setData] = React.useState([
    { id: '1', text: 'Item 1' },
    { id: '2', text: 'Item 2' },
    { id: '3', text: 'Item 3' },
    { id: '4', text: 'Item 4' },
  ]);

  const handleDelete = (id) => {
    setData((prevData) => prevData.filter((item) => item.id !== id));
  };

  const renderItem = ({ item, drag }) => (
    <Sortable.Touchable
      drag={drag}
      style={styles.item}
      onPress={() => console.log('Item pressed:', item.text)}
    >
      <Text style={styles.text}>{item.text}</Text>
      <Sortable.Touchable
        drag={drag}
        onPress={() => handleDelete(item.id)}
        style={styles.deleteButton}
      >
        <Text style={styles.deleteButtonText}>Delete</Text>
      </Sortable.Touchable>
    </Sortable.Touchable>
  );

  return (
    <Sortable.Container
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      onDragEnd={({ data }) => setData(data)}
    />
  );
};

export default FlexTouchableExample;

```

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

### dragActivationFailOffset

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/grid/props.mdx

The maximum distance (in pixels) the finger can move from the touch start position without cancelling the activation of the drag gesture.

```APIDOC
## dragActivationFailOffset

### Description
The maximum distance (in pixels) the finger can move from the touch start position without cancelling the activation of the drag gesture.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Response
#### Success Response (200)
- **dragActivationFailOffset** (Animatable<number>) - Description: The maximum distance (in pixels) the finger can move from the touch start position without cancelling the activation of the drag gesture. Default: 5. Required: NO.
```

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

### onDragMove

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/grid/props.mdx

Callback function invoked as the drag gesture progresses. It provides the item's key, its starting index, and touch data during the movement.

```APIDOC
## onDragMove

### Description
Called when the drag gesture moves.

### Type
`DragMoveCallback` (default: `undefined`)

### Required
No

### Type Definitions
```tsx
type DragMoveCallback = (params: DragMoveParams) => void;

type DragMoveParams = {
  key: string;
  fromIndex: number;
  touchData: TouchData;
};
```
```

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

### Deploy Website Without SSH

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/README.md

Deploys the website without using SSH. Replace '<Your GitHub username>' with your actual GitHub username.

```bash
$ GIT_USER=<Your GitHub username> yarn deploy
```

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

### Portal Provider Usage

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/providers/portal-provider.mdx

Demonstrates how to wrap your sortable component with the PortalProvider to enable the portal functionality.

```APIDOC
## Portal Provider Usage

### Description
Wrap your sortable component and any other components that should appear below the active item with the `Sortable.PortalProvider` component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
import Sortable from 'react-native-sortables';

// ... other components
<Sortable.PortalProvider>
  {/* other components and the nested sortable component */}
</Sortable.PortalProvider>;
// ... other components
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Custom Drop Indicator Implementation

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/customization/drop-indicator.mdx

Implement a custom drop indicator by passing a `DropIndicatorComponent` to the `Sortable.Grid` component. This example shows how to override the default style with a custom border radius.

```tsx
import { View } from 'react-native';
import type { DropIndicatorComponentProps } from 'react-native-sortables';

function CustomDropIndicator({
  style // style from the `dropIndicatorStyle` prop or a default style
}: DropIndicatorComponentProps) {
  return <View style={[style, { borderRadius: '100%' }]} />;
}

export default function Grid() {
  return (
    <Sortable.Grid
      DropIndicatorComponent={CustomDropIndicator}
      // ... other props
    />
  );
}
```

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

### Using Sortable.Handle Component

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/helper-components/handle.mdx

Demonstrates how to integrate the Sortable.Handle component within a sortable list item. Ensure necessary imports are present.

```tsx
import Sortable from 'react-native-sortables';

// ... other components
<Sortable.Handle>
  {/* ... other components */}
  <HandleComponent />
  {/* ... other components */}
</Sortable.Handle>;
// ... other components
```

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

### Basic Usage of Sortable Layer

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/helper-components/layer.mdx

Demonstrates how to wrap sortable components with the Sortable.Layer component to enable automatic zIndex management. Ensure at least one sortable component is a descendant.

```tsx
import Sortable from 'react-native-sortables';

// ... other components
<Sortable.Layer>
  {/* ... other components */}
  <Sortable.Grid // or Sortable.Flex
  // ... sortable grid props
  />
  {/* ... other components */}
</Sortable.Layer>;
// ... other components
```

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

### itemExiting

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/grid/props.mdx

Layout animation to use when an item is removed from the grid, excluding cases where the entire grid is unmounted. Similar to itemEntering, it defaults to a library implementation on native platforms and null on Web.

```APIDOC
## itemExiting

### Description
Layout animation to use when an item is removed from the grid (except when the entire grid is unmounted).

### Type
`LayoutAnimation` (default: `SortableItemExiting` / `null` on Web)

### Required
No

### Type Definitions
```tsx
type LayoutAnimation =
  | BaseAnimationBuilder
  | EntryExitAnimationFunction
  | typeof BaseAnimationBuilder;
```
```

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

### Layout Animations

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/grid/props.mdx

Information regarding layout animations for items within the grid, including notes on initial render, unmounting, and web-specific behavior.

```APIDOC
## Layout Animations

### Description
Layout animations control how items animate when their positions change and when they are added or removed from the grid. Item entering animations are not triggered during the initial render of the grid. Item exiting animations are not triggered when the entire grid is unmounted.

### Web Considerations
There are some differences in the layout animations implementation on Web:
- `itemLayout` is ignored since Web implementation doesn't use Reanimated layout transitions for items reordering.
- `itemEntering` and `itemExiting` don't have default values due to inconsistent behavior, but you can provide your own animations that will be used instead.
```

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

### Grid Layout Props

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/grid/props.mdx

Props to configure the visual layout of the grid, including columns and spacing.

```APIDOC
## Grid Layout Props

### columns

Number of columns in the grid.

- **Type**: `number`
- **Default**: `1`
- **Required**: NO

### rowGap

Gap between rows in the grid.

- **Type**: `Animatable<number>`
- **Default**: `0`
- **Required**: NO

### columnGap

Gap between columns in the grid.

- **Type**: `Animatable<number>`
- **Default**: `0`
- **Required**: NO

### dimensionsAnimationType

Whether and how to animate container dimensions changes.

- **Type**: `'layout' | 'none' | 'worklet'`
- **Default**: `'none'`
- **Required**: NO

- `'none'` - No animation
- `'layout'` - uses **Reanimated Layout Animations**
- `'worklet'` - uses **Reanimated worklet-based animations**

:::info
- `'layout'` mode is more performant than `'worklet'` but it doesn't affect surrounding views during the animation (surrounding content updates position immediately).
- `'worklet'` mode affects surrounding views but is less performant as it requires layout recalculations on every frame.
:::

```

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

### itemExiting

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/flex/props.mdx

Defines the layout animation used when an item exits the flex container (unless the entire container is unmounted). This enables custom exit animations for removed items.

```APIDOC
## itemExiting

### Description
Layout animation to use when an item is removed from the flex container (except when the entire flex container is unmounted).

### Props

- **`LayoutAnimation`** (LayoutAnimation) - Required: NO - The layout animation configuration for exiting items. Defaults to `SortableItemExiting` on native platforms, with no default on Web.
```

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

### Item Drag Configuration

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/flex/props.mdx

Configure the behavior of item dragging within the flex container.

```APIDOC
## Item Drag

### overDrag

Whether the **active item position** should be **clamped to the flex boundaries** or **dragging outside** of the flex component is **allowed**.

- **Type**: `'both' | 'horizontal' | 'none' | 'vertical'`
- **Default**: `'both'`
- **Required**: `NO`

- `'both'` - allowed in both directions
- `'horizontal'` - allowed in horizontal direction
- `'vertical'` - allowed in vertical direction
- `'none'` - not allowed

### dragActivationDelay

The delay (in milliseconds) between when an item is initially pressed and when the drag gesture becomes active.

- **Type**: `Animatable<number>`
- **Default**: `200`
- **Required**: `NO`

### activationAnimationDuration

Duration (in milliseconds) of the animation after the item becomes active (by default, the item is scaled up and snapped to the finger).

- **Type**: `Animatable<number>`
- **Default**: `300`
- **Required**: `NO`

### dropAnimationDuration

Duration (in milliseconds) of the animation after the item is dropped (the finger is released).

- **Type**: `Animatable<number>`
- **Default**: `300`
- **Required**: `NO`

### dragActivationFailOffset

The maximum distance (in pixels) the finger can move from the touch start position without cancelling the activation of the drag gesture.

- **Type**: `Animatable<number>`
- **Default**: `5`
- **Required**: `NO`
```

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

### strategy

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/grid/props.mdx

Controls how items are reordered while the active item is being dragged around.

```APIDOC
## strategy

### Description
Controls how items are reordered while the active item is being dragged around.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Response
#### Success Response (200)
- **strategy** (SortableGridStrategy) - Description: Controls how items are reordered. Default: 'insert'. Required: NO.

### Type Definitions
```ts
type SortableGridStrategy = 'insert' | 'swap' | SortableGridStrategyFactory;
```

### Usage
- `'insert'` - items are reordered by inserting the active item at the target position and moving all items between the active item and the target position
- `'swap'` - items are reordered by swapping the active item with the target item without moving other items
```

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

### Custom Mixed Item Snap Offsets

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/grid/examples/item-snap.mdx

Use a mix of percentage and numeric values for `snapOffsetX` and `snapOffsetY` to create flexible snap behaviors.

```tsx
snapOffsetX='120%'
snapOffsetY={10}
```

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

### Auto Scroll Configuration

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/grid/props.mdx

Configure the auto-scroll behavior of the grid, including activation offset, speed, and whether it is enabled.

```APIDOC
## autoScrollActivationOffset

### Description
Offset from the edge of the grid at which the auto scroll is activated. Can be a single number for both edges or an array of two numbers for top and bottom edges.

### Type
`Animatable<[number, number] | number>`

### Default
`75`

### Required
No

---

## autoScrollSpeed

### Description
Speed of the auto scroll. Adjust it based on your preferences.

### Type
`Animatable<number>`

### Default
`1`

### Required
No

---

## autoScrollEnabled

### Description
Controls whether the auto scroll is enabled. Use this prop to disable auto scroll instead of removing the `scrollableRef` prop.

### Type
`Animatable<boolean>`

### Default
`true`

### Required
No
```

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

### snapOffsetY

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/flex/props.mdx

Configures the vertical offset for snapping the active item to the finger. Percentage values are relative to the item's height.

```APIDOC
## snapOffsetY

### Description
Vertical snap offset of the item. When percentage is used, it is relative to the height of the item.

### Type
`Animatable<Offset>`

### Default
`50%`

### Required
No

### Type Definitions
```ts
type Offset = `${number}%` | number;
```
```

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

### Portal Provider Props

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/providers/portal-provider.mdx

Details the available props for the Portal Provider component, including 'enabled' and 'children'.

```APIDOC
## Portal Provider Props

### enabled

Determines whether the portal functionality is enabled.

| type      | default | required |
| --------- | ------- | -------- |
| `boolean` | `true`  | NO       |

When enabled, the active item will be rendered in a portal outlet, which is rendered on top of other components rendered within the `PortalProvider` component.

### children

The components above which the active item should be rendered.

| type        | default | required |
| ----------- | ------- | -------- |
| `ReactNode` | NO      | YES      |
```

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

### useItemContext Hook Usage

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/hooks/useItemContext.mdx

Demonstrates how to import and use the useItemContext hook within a sortable item component to access context values.

```APIDOC
## useItemContext Hook

### Description
The `useItemContext` hook provides context with useful item-related values. It must be used within a component that is rendered as part of a sortable item.

### Method
Hook

### Endpoint
N/A (Hook)

### Parameters
None

### Request Body
None

### Request Example
```tsx
import { useItemContext } from 'react-native-sortables';

const ctx = useItemContext(); // inside a sortable item component
```

### Response
#### Success Response (Hook Return)
- **gesture** (GestureType) - Gesture object used for item dragging.
- **itemKey** (string) - Key of the item within which the hook is called.
- **isActive** (ReadonlySharedValue<boolean>) - Whether the item is currently being dragged.
- **activationAnimationProgress** (ReadonlySharedValue<number>) - Progress of the activation animation (0 to 1) of the currently active item.
- **activationState** (ReadonlySharedValue<DragActivationState>) - Current drag activation state of the sortable component.
- **activeItemKey** (ReadonlySharedValue<null | string>) - Key of the currently active item.
- **prevActiveItemKey** (ReadonlySharedValue<null | string>) - Key of the previously active item.
- **indexToKey** (ReadonlySharedValue<Array<string>>) - Array of keys in the order of the items.
- **keyToIndex** (ReadonlySharedValue<Record<string, number>>) - Object mapping item keys to their current order indices.

#### Response Example
```json
{
  "gesture": { ... },
  "itemKey": "item-1",
  "isActive": true,
  "activationAnimationProgress": 0.5,
  "activationState": "ACTIVE",
  "activeItemKey": "item-1",
  "prevActiveItemKey": null,
  "indexToKey": ["item-1", "item-2", "item-3"],
  "keyToIndex": {"item-1": 0, "item-2": 1, "item-3": 2}
}
```

### Remarks
- The `useItemContext` hook must be used within a component that is rendered as part of a sortable item.
- If you need to access other values, please request them in the [GitHub Discussions](https://github.com/matipl01/react-native-sortables/discussions). There are other properties that can be exposed in the `ItemContextType` type.
```

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

### snapOffsetX

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/flex/props.mdx

Configures the horizontal offset for snapping the active item to the finger. Percentage values are relative to the item's width.

```APIDOC
## snapOffsetX

### Description
Horizontal snap offset of the item. When percentage is used, it is relative to the width of the item.

### Type
`Animatable<Offset>`

### Default
`50%`

### Required
No

### Type Definitions
```ts
type Offset = `${number}%` | number;
```
```

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

### itemEntering

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/flex/props.mdx

Defines the layout animation used when an item enters the flex container after the initial render. This allows for custom entry animations for new items.

```APIDOC
## itemEntering

### Description
Layout animation to use when an item is added to the flex container after the initial render.

### Props

- **`LayoutAnimation`** (LayoutAnimation) - Required: NO - The layout animation configuration for entering items. Defaults to `SortableItemEntering` on native platforms, with no default on Web.
```

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

### Basic Sortable Flex Usage

Source: https://github.com/matipl01/react-native-sortables/blob/main/packages/docs/docs/flex/usage.mdx

Demonstrates rendering a list of items within a Sortable.Flex component. No props are strictly required, and items can be of any type and height.

```tsx
import { Text, View, StyleSheet } from 'react-native';
import Sortable from 'react-native-sortables';

const DATA = [
  'Poland',
  'Germany',
  'France',
  'Italy',
  'Spain',
  'Portugal',
  'Greece',
  'Great Britain',
  'United States',
  'Canada',
  'Australia',
  'New Zealand'
];

export default function Flex() {
  return (
    <Sortable.Flex gap={10} padding={10}>
      {/* You can render anything within the Sortable.Flex component */}
      {DATA.map(item => (
        <View style={styles.cell} key={item}>
          <Text>{item}</Text>
        </View>
      ))}
    </Sortable.Flex>
  );
}

const styles = StyleSheet.create({
  cell: {
    backgroundColor: '#36877F',
    borderRadius: 9999,
    padding: 10,
    alignItems: 'center',
    justifyContent: 'center'
  }
});
```