diff --git a/Example/.expo-shared/assets.json b/Example/.expo-shared/assets.json
deleted file mode 100644
index a9e88346..00000000
--- a/Example/.expo-shared/assets.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "e997a5256149a4b76e6bfd6cbf519c5e5a0f1d278a3d8fa1253022b03c90473b": true,
- "af683c96e0ffd2cf81287651c9433fa44debc1220ca7cb431fe482747f34a505": true,
- "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
- "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
-}
diff --git a/Example/.gitignore b/Example/.gitignore
deleted file mode 100644
index ec8a36a2..00000000
--- a/Example/.gitignore
+++ /dev/null
@@ -1,14 +0,0 @@
-node_modules/
-.expo/
-dist/
-npm-debug.*
-*.jks
-*.p8
-*.p12
-*.key
-*.mobileprovision
-*.orig.*
-web-build/
-
-# macOS
-.DS_Store
diff --git a/Example/App.tsx b/Example/App.tsx
deleted file mode 100644
index 186e9770..00000000
--- a/Example/App.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { StatusBar } from "expo-status-bar";
-import { SafeAreaProvider } from "react-native-safe-area-context";
-
-import useCachedResources from "./hooks/useCachedResources";
-import useColorScheme from "./hooks/useColorScheme";
-import Navigation from "./navigation";
-
-export default function App() {
- const isLoadingComplete = useCachedResources();
- const colorScheme = useColorScheme();
-
- if (!isLoadingComplete) {
- return null;
- } else {
- return (
-
-
-
-
- );
- }
-}
diff --git a/Example/app.json b/Example/app.json
deleted file mode 100644
index e5dcdad5..00000000
--- a/Example/app.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
- "expo": {
- "name": "Example",
- "slug": "Example",
- "version": "1.0.0",
- "orientation": "portrait",
- "icon": "./assets/images/icon.png",
- "scheme": "myapp",
- "userInterfaceStyle": "automatic",
- "splash": {
- "image": "./assets/images/splash.png",
- "resizeMode": "contain",
- "backgroundColor": "#ffffff"
- },
- "updates": {
- "fallbackToCacheTimeout": 0
- },
- "assetBundlePatterns": ["**/*"],
- "ios": {
- "supportsTablet": true
- },
- "android": {
- "adaptiveIcon": {
- "foregroundImage": "./assets/images/adaptive-icon.png",
- "backgroundColor": "#ffffff"
- }
- },
- "web": {
- "favicon": "./assets/images/favicon.png"
- }
- }
-}
diff --git a/Example/assets/fonts/SpaceMono-Regular.ttf b/Example/assets/fonts/SpaceMono-Regular.ttf
deleted file mode 100755
index 28d7ff71..00000000
Binary files a/Example/assets/fonts/SpaceMono-Regular.ttf and /dev/null differ
diff --git a/Example/assets/images/adaptive-icon.png b/Example/assets/images/adaptive-icon.png
deleted file mode 100644
index 03d6f6b6..00000000
Binary files a/Example/assets/images/adaptive-icon.png and /dev/null differ
diff --git a/Example/assets/images/favicon.png b/Example/assets/images/favicon.png
deleted file mode 100644
index e75f697b..00000000
Binary files a/Example/assets/images/favicon.png and /dev/null differ
diff --git a/Example/assets/images/icon.png b/Example/assets/images/icon.png
deleted file mode 100644
index a0b1526f..00000000
Binary files a/Example/assets/images/icon.png and /dev/null differ
diff --git a/Example/assets/images/splash.png b/Example/assets/images/splash.png
deleted file mode 100644
index 0e89705a..00000000
Binary files a/Example/assets/images/splash.png and /dev/null differ
diff --git a/Example/babel.config.js b/Example/babel.config.js
deleted file mode 100644
index 17131ee3..00000000
--- a/Example/babel.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = function (api) {
- api.cache(true);
- return {
- presets: ["babel-preset-expo"],
- plugins: ["react-native-reanimated/plugin"],
- };
-};
diff --git a/Example/components/EditScreenInfo.tsx b/Example/components/EditScreenInfo.tsx
deleted file mode 100644
index f9eb7636..00000000
--- a/Example/components/EditScreenInfo.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as WebBrowser from "expo-web-browser";
-import { StyleSheet, TouchableOpacity } from "react-native";
-
-import Colors from "../constants/Colors";
-import { MonoText } from "./StyledText";
-import { Text, View } from "./Themed";
-
-export default function EditScreenInfo({ path }: { path: string }) {
- return (
-
-
-
- Open up the code for this screen:
-
-
-
- {path}
-
-
-
- Change any of the text, save the file, and your app will automatically
- update.
-
-
-
-
-
-
- Tap here if your app doesn't automatically update after making
- changes
-
-
-
-
- );
-}
-
-function handleHelpPress() {
- WebBrowser.openBrowserAsync(
- "https://docs.expo.io/get-started/create-a-new-app/#opening-the-app-on-your-phonetablet"
- );
-}
-
-const styles = StyleSheet.create({
- getStartedContainer: {
- alignItems: "center",
- marginHorizontal: 50,
- },
- homeScreenFilename: {
- marginVertical: 7,
- },
- codeHighlightContainer: {
- borderRadius: 3,
- paddingHorizontal: 4,
- },
- getStartedText: {
- fontSize: 17,
- lineHeight: 24,
- textAlign: "center",
- },
- helpContainer: {
- marginTop: 15,
- marginHorizontal: 20,
- alignItems: "center",
- },
- helpLink: {
- paddingVertical: 15,
- },
- helpLinkText: {
- textAlign: "center",
- },
-});
diff --git a/Example/components/StyledText.tsx b/Example/components/StyledText.tsx
deleted file mode 100644
index 3553cb9f..00000000
--- a/Example/components/StyledText.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Text, TextProps } from "./Themed";
-
-export function MonoText(props: TextProps) {
- return (
-
- );
-}
diff --git a/Example/components/Themed.tsx b/Example/components/Themed.tsx
deleted file mode 100644
index 6c4083a9..00000000
--- a/Example/components/Themed.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Learn more about Light and Dark modes:
- * https://docs.expo.io/guides/color-schemes/
- */
-
-import { Text as DefaultText, View as DefaultView } from "react-native";
-
-import Colors from "../constants/Colors";
-import useColorScheme from "../hooks/useColorScheme";
-
-export function useThemeColor(
- props: { light?: string; dark?: string },
- colorName: keyof typeof Colors.light & keyof typeof Colors.dark
-) {
- const theme = useColorScheme();
- const colorFromProps = props[theme];
-
- if (colorFromProps) {
- return colorFromProps;
- } else {
- return Colors[theme][colorName];
- }
-}
-
-type ThemeProps = {
- lightColor?: string;
- darkColor?: string;
-};
-
-export type TextProps = ThemeProps & DefaultText["props"];
-export type ViewProps = ThemeProps & DefaultView["props"];
-
-export function Text(props: TextProps) {
- const { style, lightColor, darkColor, ...otherProps } = props;
- const color = useThemeColor({ light: lightColor, dark: darkColor }, "text");
-
- return ;
-}
-
-export function View(props: ViewProps) {
- const { style, lightColor, darkColor, ...otherProps } = props;
- const backgroundColor = useThemeColor(
- { light: lightColor, dark: darkColor },
- "background"
- );
-
- return ;
-}
diff --git a/Example/components/__tests__/StyledText-test.js b/Example/components/__tests__/StyledText-test.js
deleted file mode 100644
index 94be5149..00000000
--- a/Example/components/__tests__/StyledText-test.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from "react";
-import renderer from "react-test-renderer";
-
-import { MonoText } from "../StyledText";
-
-it(`renders correctly`, () => {
- const tree = renderer.create(Snapshot test!).toJSON();
-
- expect(tree).toMatchSnapshot();
-});
diff --git a/Example/constants/Colors.ts b/Example/constants/Colors.ts
deleted file mode 100644
index 5ebc6243..00000000
--- a/Example/constants/Colors.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-const tintColorLight = "#2f95dc";
-const tintColorDark = "#fff";
-
-export default {
- light: {
- text: "#000",
- background: "#fff",
- tint: tintColorLight,
- tabIconDefault: "#ccc",
- tabIconSelected: tintColorLight,
- },
- dark: {
- text: "#fff",
- background: "#000",
- tint: tintColorDark,
- tabIconDefault: "#ccc",
- tabIconSelected: tintColorDark,
- },
-};
diff --git a/Example/constants/Layout.ts b/Example/constants/Layout.ts
deleted file mode 100644
index 0656caef..00000000
--- a/Example/constants/Layout.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Dimensions } from "react-native";
-
-const width = Dimensions.get("window").width;
-const height = Dimensions.get("window").height;
-
-export default {
- window: {
- width,
- height,
- },
- isSmallDevice: width < 375,
-};
diff --git a/Example/hooks/useCachedResources.ts b/Example/hooks/useCachedResources.ts
deleted file mode 100644
index 85328a2d..00000000
--- a/Example/hooks/useCachedResources.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { FontAwesome } from "@expo/vector-icons";
-import * as Font from "expo-font";
-import * as SplashScreen from "expo-splash-screen";
-import { useEffect, useState } from "react";
-
-export default function useCachedResources() {
- const [isLoadingComplete, setLoadingComplete] = useState(false);
-
- // Load any resources or data that we need prior to rendering the app
- useEffect(() => {
- async function loadResourcesAndDataAsync() {
- try {
- SplashScreen.preventAutoHideAsync();
-
- // Load fonts
- await Font.loadAsync({
- ...FontAwesome.font,
- "space-mono": require("../assets/fonts/SpaceMono-Regular.ttf"),
- });
- } catch (e) {
- // We might want to provide this error information to an error reporting service
- console.warn(e);
- } finally {
- setLoadingComplete(true);
- SplashScreen.hideAsync();
- }
- }
-
- loadResourcesAndDataAsync();
- }, []);
-
- return isLoadingComplete;
-}
diff --git a/Example/hooks/useColorScheme.ts b/Example/hooks/useColorScheme.ts
deleted file mode 100644
index a880dd05..00000000
--- a/Example/hooks/useColorScheme.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {
- ColorSchemeName,
- useColorScheme as _useColorScheme,
-} from "react-native";
-
-// The useColorScheme value is always either light or dark, but the built-in
-// type suggests that it can be null. This will not happen in practice, so this
-// makes it a bit easier to work with.
-export default function useColorScheme(): NonNullable {
- return _useColorScheme() as NonNullable;
-}
diff --git a/Example/metro.config.js b/Example/metro.config.js
deleted file mode 100644
index b5bf24cd..00000000
--- a/Example/metro.config.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Metro configuration for React Native
- * https://github.com/facebook/react-native
- *
- * @format
- */
-const path = require("path");
-const extraNodeModules = {
- "react-native-draggable-flatlist": path.resolve(__dirname + "/../src"),
-};
-const watchFolders = [path.resolve(__dirname + "/../src")];
-module.exports = {
- transformer: {
- getTransformOptions: async () => ({
- transform: {
- experimentalImportSupport: false,
- inlineRequires: false,
- },
- }),
- },
- resolver: {
- extraNodeModules: new Proxy(extraNodeModules, {
- get: (target, name) =>
- //redirects dependencies referenced from target/ to local node_modules
- name in target
- ? target[name]
- : path.join(process.cwd(), `node_modules/${name}`),
- }),
- },
- watchFolders,
-};
diff --git a/Example/navigation/LinkingConfiguration.ts b/Example/navigation/LinkingConfiguration.ts
deleted file mode 100644
index 4855f89b..00000000
--- a/Example/navigation/LinkingConfiguration.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Learn more about deep linking with React Navigation
- * https://reactnavigation.org/docs/deep-linking
- * https://reactnavigation.org/docs/configuring-links
- */
-
-import { LinkingOptions } from "@react-navigation/native";
-import * as Linking from "expo-linking";
-
-import { RootStackParamList } from "../types";
-
-const linking: LinkingOptions = {
- prefixes: [Linking.makeUrl("/")],
- config: {
- screens: {
- Root: {
- screens: {
- TabOne: {
- screens: {
- Basic: "basic",
- },
- },
- TabTwo: {
- screens: {
- Swipeable: "swipeable",
- },
- },
- },
- },
- NotFound: "*",
- },
- },
-};
-
-export default linking;
diff --git a/Example/navigation/index.tsx b/Example/navigation/index.tsx
deleted file mode 100644
index 10558f22..00000000
--- a/Example/navigation/index.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-/**
- * If you are not familiar with React Navigation, refer to the "Fundamentals" guide:
- * https://reactnavigation.org/docs/getting-started
- *
- */
-import { FontAwesome } from "@expo/vector-icons";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import {
- NavigationContainer,
- DefaultTheme,
- DarkTheme,
-} from "@react-navigation/native";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import * as React from "react";
-import { ColorSchemeName, Pressable } from "react-native";
-
-import Colors from "../constants/Colors";
-import useColorScheme from "../hooks/useColorScheme";
-import NotFoundScreen from "../screens/NotFoundScreen";
-import BasicScreen from "../screens/BasicScreen";
-import SwipeableScreen from "../screens/SwipeableScreen";
-import {
- RootStackParamList,
- RootTabParamList,
- RootTabScreenProps,
-} from "../types";
-import LinkingConfiguration from "./LinkingConfiguration";
-import NestedScreen from "../screens/NestedScreen";
-import HorizontalScreen from "../screens/HorizontalScreen";
-
-export default function Navigation({
- colorScheme,
-}: {
- colorScheme: ColorSchemeName;
-}) {
- return (
-
-
-
- );
-}
-
-/**
- * A root stack navigator is often used for displaying modals on top of all other content.
- * https://reactnavigation.org/docs/modal
- */
-const Stack = createNativeStackNavigator();
-
-function RootNavigator() {
- return (
-
-
-
- );
-}
-
-/**
- * A bottom tab navigator displays tab buttons on the bottom of the display to switch screens.
- * https://reactnavigation.org/docs/bottom-tab-navigator
- */
-const BottomTab = createBottomTabNavigator();
-
-function BottomTabNavigator() {
- const colorScheme = useColorScheme();
-
- return (
-
- ) => ({
- title: "Basic",
- tabBarIcon: ({ color }) => ,
- })}
- />
- (
-
- ),
- }}
- />
- ,
- }}
- />
- (
-
- ),
- }}
- />
-
- );
-}
-
-/**
- * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
- */
-function TabBarIcon(props: {
- name: React.ComponentProps["name"];
- color: string;
-}) {
- return ;
-}
diff --git a/Example/package.json b/Example/package.json
deleted file mode 100644
index 78f0a715..00000000
--- a/Example/package.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
- "name": "example",
- "version": "1.0.0",
- "main": "node_modules/expo/AppEntry.js",
- "scripts": {
- "start": "expo start",
- "android": "expo start --android",
- "ios": "expo start --ios",
- "web": "expo start --web",
- "eject": "expo eject",
- "test": "jest --watchAll"
- },
- "jest": {
- "preset": "jest-expo"
- },
- "dependencies": {
- "@expo/vector-icons": "^13.0.0",
- "@react-navigation/bottom-tabs": "^6.0.5",
- "@react-navigation/native": "^6.0.2",
- "@react-navigation/native-stack": "^6.1.0",
- "expo": "^48.0.0",
- "expo-asset": "~8.9.1",
- "expo-constants": "~14.2.1",
- "expo-font": "~11.1.1",
- "expo-linking": "~4.0.1",
- "expo-splash-screen": "~0.18.1",
- "expo-status-bar": "~1.4.4",
- "expo-system-ui": "~2.2.1",
- "expo-web-browser": "~12.1.1",
- "react": "18.2.0",
- "react-dom": "18.2.0",
- "react-native": "0.71.3",
- "react-native-gesture-handler": "~2.9.0",
- "react-native-reanimated": "~2.14.4",
- "react-native-safe-area-context": "4.5.0",
- "react-native-screens": "~3.20.0",
- "react-native-swipeable-item": "^2.0.2",
- "react-native-web": "~0.18.11"
- },
- "devDependencies": {
- "@babel/core": "^7.20.0",
- "@types/react": "~18.0.27",
- "@types/react-native": "~0.66.13",
- "jest": "^29.2.1",
- "jest-expo": "^48.0.0",
- "react-test-renderer": "17.0.2",
- "typescript": "^4.9.4"
- },
- "private": true
-}
diff --git a/Example/screens/BasicScreen.tsx b/Example/screens/BasicScreen.tsx
deleted file mode 100644
index 82673057..00000000
--- a/Example/screens/BasicScreen.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { useCallback, useState } from "react";
-import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
-import DraggableFlatList, {
- ScaleDecorator,
- ShadowDecorator,
- OpacityDecorator,
- RenderItemParams,
-} from "react-native-draggable-flatlist";
-
-import { mapIndexToData, Item } from "../utils";
-
-const NUM_ITEMS = 100;
-
-const initialData: Item[] = [...Array(NUM_ITEMS)].map(mapIndexToData);
-
-export default function Basic() {
- const [data, setData] = useState(initialData);
-
- const renderItem = useCallback(
- ({ item, drag, isActive }: RenderItemParams- ) => {
- return (
-
-
-
-
- {item.text}
-
-
-
-
- );
- },
- []
- );
-
- return (
- setData(data)}
- keyExtractor={(item) => item.key}
- renderItem={renderItem}
- renderPlaceholder={() => (
-
- )}
- />
- );
-}
-
-const styles = StyleSheet.create({
- rowItem: {
- height: 100,
- alignItems: "center",
- justifyContent: "center",
- },
- text: {
- color: "white",
- fontSize: 24,
- fontWeight: "bold",
- textAlign: "center",
- },
-});
diff --git a/Example/screens/HorizontalScreen.tsx b/Example/screens/HorizontalScreen.tsx
deleted file mode 100644
index 973c98bf..00000000
--- a/Example/screens/HorizontalScreen.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { useCallback, useState } from "react";
-import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
-import DraggableFlatList, {
- ScaleDecorator,
- RenderItemParams,
-} from "react-native-draggable-flatlist";
-
-import { mapIndexToData, Item } from "../utils";
-
-const NUM_ITEMS = 100;
-
-const initialData: Item[] = [...Array(NUM_ITEMS)].map(mapIndexToData);
-
-export default function Horizontal() {
- const [data, setData] = useState(initialData);
-
- const renderItem = useCallback(
- ({ item, drag, isActive }: RenderItemParams
- ) => {
- return (
-
-
- {item.text}
-
-
- );
- },
- []
- );
-
- return (
- setData(data)}
- keyExtractor={(item) => {
- return item.key;
- }}
- renderItem={renderItem}
- renderPlaceholder={() => (
-
- )}
- />
- );
-}
-
-const styles = StyleSheet.create({
- rowItem: {
- height: 100,
- width: 100,
- alignItems: "center",
- justifyContent: "center",
- },
- text: {
- color: "white",
- fontSize: 24,
- fontWeight: "bold",
- textAlign: "center",
- },
-});
diff --git a/Example/screens/NestedScreen.tsx b/Example/screens/NestedScreen.tsx
deleted file mode 100644
index b23c46f4..00000000
--- a/Example/screens/NestedScreen.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, { useState, useCallback } from "react";
-import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
-
-import {
- RenderItemParams,
- ScaleDecorator,
- ShadowDecorator,
- NestableScrollContainer,
- NestableDraggableFlatList,
-} from "react-native-draggable-flatlist";
-
-import { mapIndexToData, Item } from "../utils";
-
-const NUM_ITEMS = 6;
-const initialData1 = [...Array(NUM_ITEMS)].fill(0).map(mapIndexToData);
-const initialData2 = [...Array(NUM_ITEMS)].fill(0).map(mapIndexToData);
-const initialData3 = [...Array(NUM_ITEMS)].fill(0).map(mapIndexToData);
-
-function NestedDraggableListScreen() {
- const [data1, setData1] = useState(initialData1);
- const [data2, setData2] = useState(initialData2);
- const [data3, setData3] = useState(initialData3);
-
- const renderItem = useCallback((params: RenderItemParams
- ) => {
- return (
-
-
-
-
-
- );
- }, []);
-
- const keyExtractor = (item) => item.key;
-
- return (
-
-
-
- setData1(data)}
- />
-
- setData2(data)}
- />
-
- setData3(data)}
- />
-
-
- );
-}
-
-function Header({ text }: { text: string }) {
- return (
-
-
- {text}
-
-
- );
-}
-
-type RowItemProps = {
- item: Item;
- drag: () => void;
-};
-
-function RowItem({ item, drag }: RowItemProps) {
- return (
-
- {item.text}
-
- );
-}
-
-export default NestedDraggableListScreen;
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: "seashell",
- paddingTop: 44,
- },
- row: {
- flexDirection: "row",
- flex: 1,
- alignItems: "center",
- justifyContent: "center",
- padding: 15,
- },
- text: {
- fontWeight: "bold",
- color: "white",
- fontSize: 32,
- },
-});
diff --git a/Example/screens/NotFoundScreen.tsx b/Example/screens/NotFoundScreen.tsx
deleted file mode 100644
index 13123ebb..00000000
--- a/Example/screens/NotFoundScreen.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { StyleSheet, TouchableOpacity } from "react-native";
-
-import { Text, View } from "../components/Themed";
-import { RootStackScreenProps } from "../types";
-
-export default function NotFoundScreen({
- navigation,
-}: RootStackScreenProps<"NotFound">) {
- return (
-
- This screen doesn't exist.
- navigation.replace("Root")}
- style={styles.link}
- >
- Go to home screen!
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: "center",
- justifyContent: "center",
- padding: 20,
- },
- title: {
- fontSize: 20,
- fontWeight: "bold",
- },
- link: {
- marginTop: 15,
- paddingVertical: 15,
- },
- linkText: {
- fontSize: 14,
- color: "#2e78b7",
- },
-});
diff --git a/Example/screens/SwipeableScreen.tsx b/Example/screens/SwipeableScreen.tsx
deleted file mode 100644
index dc807b4c..00000000
--- a/Example/screens/SwipeableScreen.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import React, { useState, useRef, useCallback } from "react";
-import {
- Text,
- View,
- StyleSheet,
- LayoutAnimation,
- TouchableOpacity,
-} from "react-native";
-import Animated, { useAnimatedStyle } from "react-native-reanimated";
-import DraggableFlatList, {
- RenderItemParams,
- ScaleDecorator,
-} from "react-native-draggable-flatlist";
-import SwipeableItem, {
- useSwipeableItemParams,
-} from "react-native-swipeable-item";
-import { mapIndexToData, Item } from "../utils";
-
-const OVERSWIPE_DIST = 20;
-const NUM_ITEMS = 20;
-
-const initialData: Item[] = [...Array(NUM_ITEMS)].fill(0).map(mapIndexToData);
-
-function App() {
- const [data, setData] = useState(initialData);
- const itemRefs = useRef(new Map());
-
- const renderItem = useCallback((params: RenderItemParams
- ) => {
- const onPressDelete = () => {
- LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
- setData((prev) => {
- return prev.filter((item) => item !== params.item);
- });
- };
-
- return (
-
- );
- }, []);
-
- return (
-
- item.key}
- data={data}
- renderItem={renderItem}
- onDragEnd={({ data }) => setData(data)}
- activationDistance={20}
- />
-
- );
-}
-
-export default App;
-
-type RowItemProps = {
- item: Item;
- drag: () => void;
- onPressDelete: () => void;
- itemRefs: React.MutableRefObject