react-native-reorderable-list 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Omar Mahili
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,138 @@
+# React Native Reorderable List
+
+A reorderable list for React Native applications, powered by Reanimated 2 🚀
+
+![Example](https://media.giphy.com/media/EVQOjtGx61QS8s9Y0z/giphy.gif)
+
+## Install
+
+### Npm
+
+ ```
+ npm install --save react-native-reorderable-list
+ ```
+
+### Yarn
+
+ ```
+ yarn add react-native-reorderable-list
+ ```
+
+Then you need to install these two peer dependencies:
+
+  - [**React Native Reanimated**](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation) >=2.2.0
+  - [**React Native Gesture Handler**](https://docs.swmansion.com/react-native-gesture-handler/docs/#installation) >=1.10.0
+
+So head down to their docs and follow their instructions.
+
+## API
+
+This component uses a [FlatList](https://reactnative.dev/docs/flatlist) and it extends its props. See [Known Limitations](#known-limitations) for unsupported props.
+
+Additional props:
+
+| Prop                      | Type                                  | Required   | Default   | Description                                           |
+|---------------------------|---------------------------------------|------------|-----------|-------------------------------------------------------|
+| renderItem                | `(info: {item: T, index: number, separators: ItemSeparators, drag?: () => void, isDragged?: boolean}) => ReactElement`  | yes        |           | Renders into the list an item from data. The function `drag` needs to be called when the drag gesture should be enabled, for example `onLongPress` event. The property `isDragged` becomes true for the dragged item. |
+| onReorder                 | `(event: {fromIndex: number, toIndex: number}) => void`  | yes        |           | Function called when an item is released and the list is reordered. |
+| containerStyle            | `StyleProp<ViewStyle>`                | no         |           | Style for the FlatList container.                     |
+| scrollAreaSize            | `number`                              | no         | `0.1`     | Portion at the extremeties of the list which triggers scrolling when dragging an item. Accepts a value between `0` and `0.5`. |
+| scrollSpeed               | `number`                              | no         | `2`       | Speed at which the list scrolls.                      |
+| dragScale                 | `number`                              | no         | `1`       | Size ratio to which an item scales when dragged.      |
+
+## Known Limitations
+
+At the moment it doesn't support these FlatList props:
+
+  - ```horizontal```
+  - ```onScroll```
+  - ```scrollEventThrottle```
+
+## Usage
+
+```typescript
+import React, {useState} from 'react';
+import {Pressable, StyleSheet, Text} from 'react-native';
+import ReorderableList, {
+  ReorderableListRenderItemInfo,
+  ReorderableListReorderEvent,
+} from 'react-native-reorderable-list';
+
+interface CardInfo {
+  id: string;
+  color: string;
+  height: number;
+}
+
+interface CardProps extends CardInfo {
+  drag?: () => void;
+  isDragged?: boolean;
+}
+
+const list: CardInfo[] = [
+  {id: '0', color: 'red', height: 100},
+  {id: '1', color: 'blue', height: 150},
+  {id: '2', color: 'green', height: 80},
+  {id: '3', color: 'violet', height: 100},
+  {id: '4', color: 'orange', height: 120},
+  {id: '5', color: 'coral', height: 100},
+  {id: '6', color: 'purple', height: 110},
+  {id: '7', color: 'chocolate', height: 80},
+  {id: '8', color: 'crimson', height: 90},
+  {id: '9', color: 'seagreen', height: 90},
+];
+
+const Card: React.FC<CardProps> = React.memo(
+  ({id, color, height, drag, isDragged}) => (
+    <Pressable
+      style={[styles.card, isDragged && styles.dragged, {height}]}
+      onLongPress={drag}>
+      <Text style={[styles.text, {color}]}>Card {id}</Text>
+    </Pressable>
+  ),
+);
+
+const App = () => {
+  const [data, setData] = useState(list);
+
+  const renderItem = (
+    {item, ...rest}: ReorderableListRenderItemInfo<CardInfo>,
+  ) => <Card {...item} {...rest} />;
+
+  const handleReorder = ({fromIndex, toIndex}: ReorderableListReorderEvent) => {
+    const newData = [...data];
+    newData.splice(toIndex, 0, newData.splice(fromIndex, 1)[0]);
+    setData(newData);
+  };
+
+  return (
+    <ReorderableList
+      data={data}
+      onReorder={handleReorder}
+      renderItem={renderItem}
+      keyExtractor={(item: CardInfo) => item.id}
+      dragScale={1.025}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 6,
+    borderRadius: 5,
+    backgroundColor: 'white',
+    borderWidth: 1,
+    borderColor: '#ddd',
+  },
+  dragged: {
+    opacity: 0.7,
+  },
+  text: {
+    fontSize: 20,
+  },
+});
+
+export default App;
+```

package/dist/components/ReorderableList.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FlatListProps } from 'react-native';
+import { ReorderableListProps } from '../types/props';
+declare const _default: <T>(props: ReorderableListProps<T> & {
+    ref?: React.ForwardedRef<FlatListProps<T>> | undefined;
+}) => React.ReactElement;
+export default _default;

package/dist/components/ReorderableList.js

@@ -0,0 +1,311 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { FlatList, StatusBar, unstable_batchedUpdates, } from 'react-native';
+import { NativeViewGestureHandler, PanGestureHandler, State, } from 'react-native-gesture-handler';
+import Animated, { useAnimatedGestureHandler, useSharedValue, useAnimatedReaction, runOnJS, useAnimatedStyle, useAnimatedRef, useAnimatedScrollHandler, scrollTo, withTiming, Easing, runOnUI, } from 'react-native-reanimated';
+import composeRefs from '@seznam/compose-react-refs';
+import memoize from 'fast-memoize';
+import ReorderableListItem from './ReorderableListItem';
+import useAnimatedSharedValues from '../hooks/useAnimatedSharedValues';
+import { ReorderableListState } from '../types/misc';
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
+const ReorderableList = (_a, ref) => {
+    var { data, containerStyle, scrollAreaSize = 0.1, scrollSpeed = 2, dragScale = 1, renderItem, onLayout, onReorder, keyExtractor } = _a, rest = __rest(_a, ["data", "containerStyle", "scrollAreaSize", "scrollSpeed", "dragScale", "renderItem", "onLayout", "onReorder", "keyExtractor"]);
+    const container = useAnimatedRef();
+    const flatList = useAnimatedRef();
+    const nativeHandler = useRef(null);
+    const itemSeparators = useRef([]);
+    const gestureState = useSharedValue(State.UNDETERMINED);
+    const currentY = useSharedValue(0);
+    const startY = useSharedValue(0);
+    const containerPositionX = useSharedValue(0);
+    const containerPositionY = useSharedValue(0);
+    const scrollOffset = useSharedValue(0);
+    const itemOffsets = useAnimatedSharedValues(() => ({ length: 0, offset: 0 }), data.length);
+    const topMoveThreshold = useSharedValue(0);
+    const bottomMoveThreshold = useSharedValue(0);
+    const flatListHeight = useSharedValue(0);
+    const offsetY = useSharedValue(0);
+    const draggedTranslateY = useSharedValue(null);
+    const currentIndex = useSharedValue(-1);
+    const draggedIndex = useSharedValue(-1);
+    const draggedInfoIndex = useSharedValue(-1);
+    const state = useSharedValue(ReorderableListState.IDLE);
+    const autoScrollOffset = useSharedValue(-1);
+    const autoScrollSpeed = useSharedValue(Math.max(0, scrollSpeed));
+    const enabledOpacity = useSharedValue(false);
+    const draggedItemScale = useSharedValue(1);
+    const [dragged, setDragged] = useState(false);
+    const relativeToContainer = (y, x) => {
+        'worklet';
+        return {
+            y: y - containerPositionY.value - (StatusBar.currentHeight || 0),
+            x: x - containerPositionX.value,
+        };
+    };
+    const handleGestureEvent = useAnimatedGestureHandler({
+        onStart: (e, ctx) => {
+            if (state.value !== ReorderableListState.RELEASING) {
+                const { y } = relativeToContainer(e.absoluteY, e.absoluteX);
+                ctx.startY = y;
+                startY.value = y;
+                currentY.value = y;
+                gestureState.value = e.state;
+            }
+        },
+        onActive: (e, ctx) => {
+            if (state.value !== ReorderableListState.RELEASING) {
+                currentY.value = ctx.startY + e.translationY;
+                gestureState.value = e.state;
+            }
+        },
+        onEnd: (e) => (gestureState.value = e.state),
+        onFinish: (e) => (gestureState.value = e.state),
+        onCancel: (e) => (gestureState.value = e.state),
+        onFail: (e) => (gestureState.value = e.state),
+    });
+    useEffect(() => {
+        if (!dragged) {
+            runOnUI(() => {
+                'worklet';
+                state.value = ReorderableListState.IDLE;
+            })();
+        }
+    }, [dragged, state, enabledOpacity]);
+    useEffect(() => {
+        runOnUI(() => {
+            'worklet';
+            enabledOpacity.value = dragged;
+            if (dragged) {
+                draggedItemScale.value = withTiming(dragScale, {
+                    duration: 100,
+                    easing: Easing.out(Easing.ease),
+                });
+            }
+        })();
+    }, [dragged, draggedItemScale, enabledOpacity, dragScale]);
+    const enableDragged = useCallback((enabled) => {
+        flatList.current.setNativeProps({ scrollEnabled: !enabled });
+        setDragged(enabled);
+    }, [setDragged, flatList]);
+    const reorder = (fromIndex, toIndex) => {
+        if (fromIndex !== toIndex) {
+            unstable_batchedUpdates(() => {
+                onReorder({ fromIndex, toIndex });
+                enableDragged(false);
+            });
+        }
+        else {
+            enableDragged(false);
+        }
+    };
+    const endDrag = () => {
+        'worklet';
+        const draggedIndexTemp = draggedIndex.value;
+        const currentIndexTemp = currentIndex.value;
+        draggedIndex.value = -1;
+        currentIndex.value = -1;
+        enabledOpacity.value = false;
+        draggedInfoIndex.value = currentIndexTemp;
+        runOnJS(reorder)(draggedIndexTemp, currentIndexTemp);
+    };
+    const getIndexFromY = (y, scrollY) => {
+        'worklet';
+        const maxOffset = itemOffsets[itemOffsets.length - 1].value;
+        const relativeY = Math.max(0, Math.min((scrollY || scrollOffset.value) + y, maxOffset.offset + maxOffset.length));
+        const index = itemOffsets.findIndex((x, i) => ((x === null || x === void 0 ? void 0 : x.value.offset) && i === 0 && relativeY < x.value.offset) ||
+            (i === itemOffsets.length - 1 && relativeY > x.value.offset) ||
+            (relativeY >= x.value.offset &&
+                relativeY <= x.value.offset + x.value.length));
+        return { index, relativeY };
+    };
+    useAnimatedReaction(() => gestureState.value, () => {
+        if (gestureState.value !== State.ACTIVE &&
+            gestureState.value !== State.BEGAN &&
+            (state.value === ReorderableListState.DRAGGING ||
+                state.value === ReorderableListState.AUTO_SCROLL)) {
+            state.value = ReorderableListState.RELEASING;
+            const offsetCorrection = currentIndex.value > draggedIndex.value
+                ? itemOffsets[currentIndex.value].value.length -
+                    itemOffsets[draggedIndex.value].value.length
+                : 0;
+            const newTopPosition = itemOffsets[currentIndex.value].value.offset +
+                offsetCorrection -
+                scrollOffset.value;
+            const duration = 100;
+            draggedItemScale.value = withTiming(1, {
+                duration,
+                easing: Easing.out(Easing.ease),
+            }, () => {
+                if (draggedTranslateY.value === newTopPosition) {
+                    endDrag();
+                }
+            });
+            if (draggedTranslateY.value !== newTopPosition) {
+                draggedTranslateY.value = withTiming(newTopPosition, {
+                    duration,
+                    easing: Easing.out(Easing.ease),
+                }, () => {
+                    endDrag();
+                });
+            }
+        }
+    });
+    useAnimatedReaction(() => currentY.value, (y) => {
+        if (state.value === ReorderableListState.DRAGGING ||
+            state.value === ReorderableListState.AUTO_SCROLL) {
+            draggedTranslateY.value = y - offsetY.value;
+            const { index } = getIndexFromY(y);
+            currentIndex.value = index;
+            if (y <= topMoveThreshold.value || y >= bottomMoveThreshold.value) {
+                state.value = ReorderableListState.AUTO_SCROLL;
+                autoScrollOffset.value = scrollOffset.value;
+            }
+            else {
+                state.value = ReorderableListState.DRAGGING;
+                autoScrollOffset.value = -1;
+            }
+        }
+    });
+    useAnimatedReaction(() => autoScrollOffset.value, () => {
+        if (state.value === ReorderableListState.AUTO_SCROLL) {
+            let speed = 0;
+            if (currentY.value <= topMoveThreshold.value) {
+                speed = -autoScrollSpeed.value;
+            }
+            else if (currentY.value >= bottomMoveThreshold.value) {
+                speed = autoScrollSpeed.value;
+            }
+            if (speed !== 0) {
+                scrollTo(flatList, 0, autoScrollOffset.value + speed, true);
+                autoScrollOffset.value += speed;
+            }
+            const { index } = getIndexFromY(currentY.value, autoScrollOffset.value);
+            currentIndex.value = index;
+        }
+    });
+    const scrollHandler = useAnimatedScrollHandler({
+        onScroll: (e) => {
+            scrollOffset.value = e.contentOffset.y;
+        },
+    });
+    const handleItemLayout = useCallback(memoize((index) => (e) => {
+        itemOffsets[index].value = {
+            offset: e.nativeEvent.layout.y,
+            length: e.nativeEvent.layout.height,
+        };
+    }), [itemOffsets]);
+    const drag = useCallback(memoize((index) => () => runOnUI(() => {
+        'worklet';
+        offsetY.value =
+            startY.value -
+                (itemOffsets[index].value.offset - scrollOffset.value);
+        draggedTranslateY.value = startY.value - offsetY.value;
+        draggedIndex.value = index;
+        draggedInfoIndex.value = index;
+        currentIndex.value = index;
+        state.value = ReorderableListState.DRAGGING;
+        runOnJS(enableDragged)(true);
+    })()), [
+        offsetY,
+        startY,
+        scrollOffset,
+        draggedTranslateY,
+        draggedIndex,
+        draggedInfoIndex,
+        currentIndex,
+        state,
+        itemOffsets,
+        enableDragged,
+    ]);
+    const renderAnimatedCell = useCallback((_a) => {
+        var { index, children } = _a, cellProps = __rest(_a, ["index", "children"]);
+        return (React.createElement(ReorderableListItem, { key: cellProps.keyExtractor
+                ? cellProps.keyExtractor(cellProps.data[index], index)
+                : index, index: index, currentIndex: currentIndex, draggedIndex: draggedIndex, itemOffsets: itemOffsets, enabledOpacity: enabledOpacity, onLayout: handleItemLayout(index) }, children));
+    }, [currentIndex, draggedIndex, itemOffsets, enabledOpacity, handleItemLayout]);
+    const renderDraggableItem = useCallback((info) => {
+        itemSeparators.current[info.index] = info.separators;
+        return renderItem(Object.assign(Object.assign({}, info), { drag: drag(info.index) }));
+    }, [renderItem, drag]);
+    const handleContainerLayout = () => {
+        container.current.measureInWindow((x, y) => {
+            containerPositionX.value = x;
+            containerPositionY.value = y;
+        });
+    };
+    const handleFlatListLayout = useCallback((e) => {
+        const { height } = e.nativeEvent.layout;
+        const portion = height * Math.max(0, Math.min(scrollAreaSize, 0.5));
+        topMoveThreshold.value = portion;
+        bottomMoveThreshold.value = height - portion;
+        flatListHeight.value = height;
+        if (onLayout) {
+            onLayout(e);
+        }
+    }, [
+        bottomMoveThreshold,
+        topMoveThreshold,
+        flatListHeight,
+        onLayout,
+        scrollAreaSize,
+    ]);
+    const draggedItemStyle = useAnimatedStyle(() => {
+        if (draggedTranslateY.value !== null) {
+            return {
+                transform: [
+                    { translateY: draggedTranslateY.value },
+                    { scale: draggedItemScale.value },
+                ],
+            };
+        }
+        return {};
+    });
+    const draggedItemInfo = {
+        index: draggedInfoIndex.value,
+        item: data[draggedInfoIndex.value],
+        separators: itemSeparators.current[draggedInfoIndex.value],
+        isDragged: true,
+    };
+    const draggedItemFallbackStyle = {
+        transform: itemOffsets[draggedInfoIndex.value]
+            ? [
+                {
+                    translateY: itemOffsets[draggedInfoIndex.value].value.offset -
+                        scrollOffset.value,
+                },
+            ]
+            : undefined,
+    };
+    return (React.createElement(PanGestureHandler, { maxPointers: 1, onGestureEvent: handleGestureEvent, onHandlerStateChange: handleGestureEvent, simultaneousHandlers: nativeHandler },
+        React.createElement(Animated.View, { ref: container, style: containerStyle, onLayout: handleContainerLayout },
+            React.createElement(NativeViewGestureHandler, { ref: nativeHandler },
+                React.createElement(AnimatedFlatList, Object.assign({}, rest, { ref: composeRefs(flatList, ref), data: data, CellRendererComponent: renderAnimatedCell, renderItem: renderDraggableItem, onLayout: handleFlatListLayout, onScroll: scrollHandler, keyExtractor: keyExtractor, scrollEventThrottle: 1, horizontal: false }))),
+            dragged && (React.createElement(Animated.View, { style: [
+                    styles.draggedItem,
+                    draggedItemFallbackStyle,
+                    draggedItemStyle,
+                ] }, renderItem(draggedItemInfo))))));
+};
+const styles = {
+    draggedItem: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+    },
+    dragged: {
+        opacity: 0,
+    },
+};
+export default React.memo(React.forwardRef(ReorderableList));

package/dist/components/ReorderableListItem.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { ItemOffset } from '../types/misc';
+interface ReorderableListItemProps extends Animated.AnimateProps<ViewProps> {
+    index: number;
+    itemOffsets: Animated.SharedValue<ItemOffset>[];
+    draggedIndex: Animated.SharedValue<number>;
+    currentIndex: Animated.SharedValue<number>;
+    enabledOpacity: Animated.SharedValue<boolean>;
+    children: React.ReactNode;
+}
+declare const ReorderableListItem: React.FC<ReorderableListItemProps>;
+export default ReorderableListItem;

package/dist/components/ReorderableListItem.js

@@ -0,0 +1,57 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import Animated, { useAnimatedStyle, withTiming, Easing, useSharedValue, useAnimatedReaction, } from 'react-native-reanimated';
+const ReorderableListItem = (_a) => {
+    var { index, itemOffsets, draggedIndex, currentIndex, enabledOpacity, children } = _a, rest = __rest(_a, ["index", "itemOffsets", "draggedIndex", "currentIndex", "enabledOpacity", "children"]);
+    const translateY = useSharedValue(0);
+    const opacity = useSharedValue(1);
+    useAnimatedReaction(() => currentIndex.value, () => {
+        if (currentIndex.value >= 0 && draggedIndex.value >= 0) {
+            const moveDown = currentIndex.value > draggedIndex.value;
+            const startMove = Math.min(draggedIndex.value, currentIndex.value);
+            const endMove = Math.max(draggedIndex.value, currentIndex.value);
+            let newValue = 0;
+            if (index === draggedIndex.value) {
+                for (let i = startMove; i < endMove; i++) {
+                    newValue = moveDown
+                        ? newValue + itemOffsets[i].value.length
+                        : newValue - itemOffsets[i].value.length;
+                }
+                const offsetCorrection = moveDown
+                    ? itemOffsets[currentIndex.value].value.length -
+                        itemOffsets[draggedIndex.value].value.length
+                    : 0;
+                newValue += offsetCorrection;
+            }
+            else if (index >= startMove && index <= endMove) {
+                const draggedHeight = itemOffsets[draggedIndex.value].value.length;
+                newValue = moveDown ? -draggedHeight : draggedHeight;
+            }
+            if (newValue !== translateY.value) {
+                translateY.value = withTiming(newValue, {
+                    duration: 100,
+                    easing: Easing.out(Easing.ease),
+                });
+            }
+        }
+    });
+    useAnimatedReaction(() => enabledOpacity.value, (enabled) => {
+        opacity.value = enabled && index === draggedIndex.value ? 0 : 1;
+    }, [index]);
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: translateY.value }],
+        opacity: opacity.value,
+    }));
+    return (React.createElement(Animated.View, Object.assign({}, rest, { style: [rest.style, animatedStyle] }), children));
+};
+export default ReorderableListItem;

package/dist/hooks/useAnimatedSharedValues.d.ts

@@ -0,0 +1,3 @@
+import Animated from 'react-native-reanimated';
+declare function useAnimatedSharedValues<T>(initFunc: (index: number) => T, size: number, shrink?: boolean): Animated.SharedValue<T>[];
+export default useAnimatedSharedValues;

package/dist/hooks/useAnimatedSharedValues.js

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from 'react';
+import { cancelAnimation, makeMutable } from 'react-native-reanimated';
+function useAnimatedSharedValues(initFunc, size, shrink = true) {
+    const ref = useRef([]);
+    if (size !== 0 && ref.current.length === 0) {
+        ref.current = [];
+        for (let i = 0; i < size; i++) {
+            ref.current[i] = makeMutable(initFunc(i));
+        }
+    }
+    useEffect(() => {
+        if (size > ref.current.length) {
+            for (let i = ref.current.length; i < size; i++) {
+                ref.current[i] = makeMutable(initFunc(i));
+            }
+        }
+        else if (shrink && size < ref.current.length) {
+            for (let i = size; i < ref.current.length; i++) {
+                cancelAnimation(ref.current[i]);
+            }
+            ref.current.splice(size, ref.current.length - size);
+        }
+    }, [size, initFunc, shrink]);
+    useEffect(() => {
+        return () => {
+            for (let i = 0; i < ref.current.length; i++) {
+                cancelAnimation(ref.current[i]);
+            }
+        };
+    }, []);
+    return ref.current;
+}
+export default useAnimatedSharedValues;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import ReorderableList from './components/ReorderableList';
+import { ReorderableListProps, ReorderableListRenderItemInfo, ReorderableListReorderEvent } from './types/props';
+export { ReorderableListProps, ReorderableListRenderItemInfo, ReorderableListReorderEvent, };
+export default ReorderableList;

package/dist/index.js

@@ -0,0 +1,2 @@
+import ReorderableList from './components/ReorderableList';
+export default ReorderableList;

package/dist/types/misc.d.ts

@@ -0,0 +1,15 @@
+export interface ItemOffset {
+    length: number;
+    offset: number;
+}
+export interface ItemSeparators {
+    highlight: () => void;
+    unhighlight: () => void;
+    updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
+}
+export declare enum ReorderableListState {
+    IDLE = 0,
+    DRAGGING = 1,
+    RELEASING = 2,
+    AUTO_SCROLL = 3
+}

package/dist/types/misc.js

@@ -0,0 +1,7 @@
+export var ReorderableListState;
+(function (ReorderableListState) {
+    ReorderableListState[ReorderableListState["IDLE"] = 0] = "IDLE";
+    ReorderableListState[ReorderableListState["DRAGGING"] = 1] = "DRAGGING";
+    ReorderableListState[ReorderableListState["RELEASING"] = 2] = "RELEASING";
+    ReorderableListState[ReorderableListState["AUTO_SCROLL"] = 3] = "AUTO_SCROLL";
+})(ReorderableListState || (ReorderableListState = {}));

package/dist/types/props.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { FlatListProps, ListRenderItemInfo, StyleProp, ViewStyle } from 'react-native';
+import Animated from 'react-native-reanimated';
+export interface CellProps<T> extends FlatListProps<T> {
+    index: number;
+    children?: React.ReactElement;
+    data: T[];
+}
+export interface ReorderableListRenderItemInfo<T> extends ListRenderItemInfo<T> {
+    drag?: () => void;
+    isDragged?: boolean;
+}
+export interface ReorderableListReorderEvent {
+    fromIndex: number;
+    toIndex: number;
+}
+declare type UnsupportedProps = 'horizontal' | 'onScroll' | 'scrollEventThrottle';
+export interface ReorderableListProps<T> extends Omit<FlatListProps<T>, UnsupportedProps> {
+    data: T[];
+    containerStyle?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
+    scrollAreaSize?: number;
+    scrollSpeed?: number;
+    dragScale?: number;
+    renderItem: (info: ReorderableListRenderItemInfo<T>) => React.ReactElement;
+    onReorder: (event: ReorderableListReorderEvent) => void;
+}
+export {};

package/dist/types/props.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "react-native-reorderable-list",
+  "version": "0.3.0",
+  "description": "Reorderable list for React Native applications, powered by Reanimated 2",
+  "scripts": {
+    "lint": "eslint ./src --ext .ts,.tsx",
+    "build": "tsc && tsc-alias"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/*"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/omahili/react-native-reorderable-list.git"
+  },
+  "author": "Omar Mahili",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/omahili/react-native-reorderable-list/issues"
+  },
+  "homepage": "https://github.com/omahili/react-native-reorderable-list#readme",
+  "dependencies": {
+    "@seznam/compose-react-refs": "^1.0.6",
+    "fast-memoize": "^2.5.2"
+  },
+  "devDependencies": {
+    "@react-native-community/eslint-config": "^3.0.1",
+    "@types/react": "^17.0.34",
+    "@types/react-native": "^0.66.2",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-eslint-comments": "^3.1.2",
+    "eslint-plugin-flowtype": "2.50.3",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-jest": "22.4.1",
+    "eslint-plugin-prettier": "3.1.2",
+    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react-hooks": "^4.0.7",
+    "eslint-plugin-react-native": "^3.10.0",
+    "prettier": "^2.4.1",
+    "react": "^17.0.2",
+    "react-native": "^0.66.1",
+    "react-native-gesture-handler": "^1.10.3",
+    "react-native-reanimated": "^2.2.3",
+    "tsc-alias": "^1.4.0",
+    "typescript": "^4.4.4"
+  },
+  "peerDependencies": {
+    "react-native": ">=0.62.0",
+    "react-native-gesture-handler": ">=1.10.0",
+    "react-native-reanimated": ">=2.2.0"
+  }
+}