### Install DraggableFlatList with npm

Source: https://github.com/computerjazz/react-native-draggable-flatlist/blob/main/README.md

This snippet shows how to install the react-native-draggable-flatlist package using npm. Ensure you have followed the installation instructions for Reanimated and React Native Gesture Handler first.

```bash
npm install --save react-native-draggable-flatlist
```

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

### Install DraggableFlatList with yarn

Source: https://github.com/computerjazz/react-native-draggable-flatlist/blob/main/README.md

This snippet shows how to install the react-native-draggable-flatlist package using yarn. Ensure you have followed the installation instructions for Reanimated and React Native Gesture Handler first.

```bash
yarn add react-native-draggable-flatlist
```

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

### Basic DraggableFlatList Example in React Native

Source: https://github.com/computerjazz/react-native-draggable-flatlist/blob/main/README.md

A fundamental example showcasing a DraggableFlatList with basic styling and functionality. It utilizes `ScaleDecorator` for item animations and `TouchableOpacity` for drag initiation via `onLongPress`.

```typescript
import React, { useState } from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
import DraggableFlatList,
  {
    ScaleDecorator,
  } from "react-native-draggable-flatlist";

const NUM_ITEMS = 10;
function getColor(i: number) {
  const multiplier = 255 / (NUM_ITEMS - 1);
  const colorVal = i * multiplier;
  return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`;
}

type Item = {
  key: string;
  label: string;
  height: number;
  width: number;
  backgroundColor: string;
};

const initialData: Item[] = [...Array(NUM_ITEMS)].map((d, index) => {
  const backgroundColor = getColor(index);
  return {
    key: `item-${index}`,
    label: String(index) + "",
    height: 100,
    width: 60 + Math.random() * 40,
    backgroundColor,
  };
});

export default function App() {
  const [data, setData] = useState(initialData);

  const renderItem = ({ item, drag, isActive }: RenderItemParams<Item>) => {
    return (
      <ScaleDecorator>
        <TouchableOpacity
          onLongPress={drag}
          disabled={isActive}
          style={[
            styles.rowItem,
            { backgroundColor: isActive ? "red" : item.backgroundColor },
          ]}
        >
          <Text style={styles.text}>{item.label}</Text>
        </TouchableOpacity>
      </ScaleDecorator>
    );
  };

  return (
    <DraggableFlatList
      data={data}
      onDragEnd={({ data }) => setData(data)}
      keyExtractor={(item) => item.key}
      renderItem={renderItem}
    />
  );
}

const styles = StyleSheet.create({
  rowItem: {
    height: 100,
    width: 100,
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    color: "white",
    fontSize: 24,
    fontWeight: "bold",
    textAlign: "center",
  },
});

```

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

### Import DraggableFlatList in React Native

Source: https://github.com/computerjazz/react-native-draggable-flatlist/blob/main/README.md

This snippet demonstrates how to import the DraggableFlatList component into your React Native project after installation. This import statement is necessary to use the component in your application.

```javascript
import DraggableFlatList from 'react-native-draggable-flatlist'
```

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

### Nesting DraggableFlatLists with React Native

Source: https://github.com/computerjazz/react-native-draggable-flatlist/blob/main/README.md

Demonstrates how to render multiple DraggableFlatList components within a single scrollable parent by using `NestableScrollContainer` and `NestableDraggableFlatList`. This setup allows for complex nested list interactions.

```tsx
import { NestableScrollContainer, NestableDraggableFlatList } from "react-native-draggable-flatlist"

...

  const [data1, setData1] = useState(initialData1);
  const [data2, setData2] = useState(initialData2);
  const [data3, setData3] = useState(initialData3);

  return (
    <NestableScrollContainer>
      <Header text='List 1' />
      <NestableDraggableFlatList
        data={data1}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        onDragEnd={({ data }) => setData1(data)}
      />
      <Header text='List 2' />
      <NestableDraggableFlatList
        data={data2}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        onDragEnd={({ data }) => setData2(data)}
      />
      <Header text='List 3' />
      <NestableDraggableFlatList
        data={data3}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        onDragEnd={({ data }) => setData3(data)}
      />
    </NestableScrollContainer>
  )
```

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

### Draggable FlatList Props

Source: https://github.com/computerjazz/react-native-draggable-flatlist/blob/main/README.md

Configuration options for the Draggable FlatList component.

```APIDOC
## Draggable FlatList Component Props

### Description
These props control the behavior and appearance of the draggable flat list.

### Parameters
#### Props
- **onScrollOffsetChange** (`(offset: number) => void`) - Called with scroll offset. Stand-in for `onScroll`.
- **onPlaceholderIndexChange** (`(index: number) => void`) - Called when the index of the placeholder changes.
- **dragItemOverflow** (`boolean`) - If true, dragged item follows finger beyond list boundary.
- **dragHitSlop** (`object: {top: number, left: number, bottom: number, right: number}`) - Enables control over what part of the connected view area can be used to begin recognizing the gesture. Numbers need to be non-positive (only possible to reduce responsive area).
- **debug** (`boolean`) - Enables debug logging and animation debugger.
- **containerStyle** (`StyleProp<ViewStyle>`) - Style of the main component.
- **simultaneousHandlers** (`React.Ref<any>` or `React.Ref<any>[]`) - References to other gesture handlers, mainly useful when using this component within a `ScrollView`. See [Cross handler interactions](https://docs.swmansion.com/react-native-gesture-handler/docs/interactions/).
- **itemEnteringAnimation** (`Reanimated AnimationBuilder`) - Animation when item is added to list. See [docs](https://docs.swmansion.com/react-native-reanimated/docs/api/LayoutAnimations/entryAnimations).
- **itemExitingAnimation** (`Reanimated AnimationBuilder`) - Animation when item is removed from list. See [docs](https://docs.swmansion.com/react-native-reanimated/docs/api/LayoutAnimations/exitAnimations).
- **itemLayoutAnimation** (`Reanimated AnimationBuilder`) - Animation when list items change position (`enableLayoutAnimationExperimental` prop must be `true`). See [docs](https://docs.swmansion.com/react-native-reanimated/docs/api/LayoutAnimations/layoutTransitions).
- **enableLayoutAnimationExperimental** (`boolean`) - Flag to turn on experimental support for `itemLayoutAnimation`.
```

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

### Cell Decorators

Source: https://github.com/computerjazz/react-native-draggable-flatlist/blob/main/README.md

Components to easily add common hover animations to list items.

```APIDOC
## Cell Decorators

### Description
Cell Decorators are an easy way to add common hover animations. For example, wrapping `renderItem` in the `<ScaleDecorator>` component will automatically scale up the active item while hovering.

### Available Decorators
- `ScaleDecorator`: Scales up the active item.
- `ShadowDecorator`: Adds a shadow effect to the active item.
- `OpacityDecorator`: Changes the opacity of the active item.

### Custom Decorators
Developers may create their own custom decorators using the animated values provided by the `useOnCellActiveAnimation` hook.
```

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