react-native-reorderable-list 0.3.0 → 0.4.0

package/README.md

@@ -44,9 +44,10 @@ Additional props:
 
 At the moment it doesn't support these FlatList props:
 
-  - ```horizontal```
-  - ```onScroll```
-  - ```scrollEventThrottle```
+  - `horizontal`
+  - `onScroll`
+  - `scrollEventThrottle`
+  - `numColumns`
 
 ## Usage
 

package/dist/components/ReorderableList.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useEffect, useRef, useState, useCallback } from 'react';
-import { FlatList, StatusBar, unstable_batchedUpdates, } from 'react-native';
+import { FlatList, StatusBar, unstable_batchedUpdates, Platform, } 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';
@@ -187,7 +187,7 @@ const ReorderableList = (_a, ref) => {
                 speed = autoScrollSpeed.value;
             }
             if (speed !== 0) {
-                scrollTo(flatList, 0, autoScrollOffset.value + speed, true);
+                scrollTo(flatList, 0, autoScrollOffset.value + speed, Platform.OS === 'android');
                 autoScrollOffset.value += speed;
             }
             const { index } = getIndexFromY(currentY.value, autoScrollOffset.value);
@@ -199,11 +199,14 @@ const ReorderableList = (_a, ref) => {
             scrollOffset.value = e.contentOffset.y;
         },
     });
-    const handleItemLayout = useCallback(memoize((index) => (e) => {
+    const handleItemLayout = useCallback(memoize((index, onLayoutCell) => (e) => {
         itemOffsets[index].value = {
             offset: e.nativeEvent.layout.y,
             length: e.nativeEvent.layout.height,
         };
+        if (onLayoutCell) {
+            onLayoutCell(e);
+        }
     }), [itemOffsets]);
     const drag = useCallback(memoize((index) => () => runOnUI(() => {
         'worklet';
@@ -232,7 +235,7 @@ const ReorderableList = (_a, ref) => {
         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));
+                : index, index: index, currentIndex: currentIndex, draggedIndex: draggedIndex, itemOffsets: itemOffsets, enabledOpacity: enabledOpacity, onLayout: handleItemLayout(index, cellProps.onLayout), children: children }));
     }, [currentIndex, draggedIndex, itemOffsets, enabledOpacity, handleItemLayout]);
     const renderDraggableItem = useCallback((info) => {
         itemSeparators.current[info.index] = info.separators;
@@ -290,7 +293,7 @@ const ReorderableList = (_a, ref) => {
     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 }))),
+                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, numColumns: 1 }))),
             dragged && (React.createElement(Animated.View, { style: [
                     styles.draggedItem,
                     draggedItemFallbackStyle,

package/dist/types/props.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
-import { FlatListProps, ListRenderItemInfo, StyleProp, ViewStyle } from 'react-native';
+import { FlatListProps, ListRenderItemInfo, StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';
 import Animated from 'react-native-reanimated';
-export interface CellProps<T> extends FlatListProps<T> {
+export interface CellProps<T> {
     index: number;
     children?: React.ReactElement;
     data: T[];
+    onLayout?: (e: LayoutChangeEvent) => void;
+    keyExtractor?: (item: T, index: number) => string;
 }
 export interface ReorderableListRenderItemInfo<T> extends ListRenderItemInfo<T> {
     drag?: () => void;
@@ -14,7 +16,7 @@ export interface ReorderableListReorderEvent {
     fromIndex: number;
     toIndex: number;
 }
-declare type UnsupportedProps = 'horizontal' | 'onScroll' | 'scrollEventThrottle';
+declare type UnsupportedProps = 'horizontal' | 'onScroll' | 'scrollEventThrottle' | 'numColumns';
 export interface ReorderableListProps<T> extends Omit<FlatListProps<T>, UnsupportedProps> {
     data: T[];
     containerStyle?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reorderable-list",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Reorderable list for React Native applications, powered by Reanimated 2",
   "scripts": {
     "lint": "eslint ./src --ext .ts,.tsx",