react-native-reorderable-list 0.14.1 → 0.16.0

package/src/contexts/ReorderableListContext.ts

@@ -2,13 +2,14 @@ import React from 'react';
 
 import type {SharedValue} from 'react-native-reanimated';
 
-import {ReorderableListCellAnimations} from '../types';
+import {ItemLayoutAnimation, ReorderableListCellAnimations} from '../types';
 
 interface ReorderableListContextData {
   currentIndex: SharedValue<number>;
   draggedHeight: SharedValue<number>;
   dragEndHandlers: SharedValue<((from: number, to: number) => void)[][]>;
   activeIndex: number;
+  itemLayoutAnimation: React.MutableRefObject<ItemLayoutAnimation | undefined>;
   cellAnimations: ReorderableListCellAnimations;
 }
 

package/src/contexts/ScrollViewContainerContext.ts

@@ -9,9 +9,9 @@ interface ScrollViewContainerContextData {
   scrollViewPageY: SharedValue<number>;
   scrollViewHeightY: SharedValue<number>;
   scrollViewScrollOffsetY: SharedValue<number>;
-  scrollViewScrollEnabled: SharedValue<boolean>;
+  scrollViewScrollEnabledProp: SharedValue<boolean>;
+  scrollViewCurrentScrollEnabled: SharedValue<boolean>;
   outerScrollGesture: NativeGesture;
-  initialScrollViewScrollEnabled: boolean;
 }
 
 export const ScrollViewContainerContext = React.createContext<

package/src/hooks/index.ts

@@ -1,5 +1,7 @@
+export * from './useContext';
+export * from './usePropAsSharedValue';
 export * from './useIsActive';
 export * from './useReorderableDrag';
-export * from './useReorderableDragStart';
 export * from './useReorderableDragEnd';
-export * from './useContext';
+export * from './useReorderableDragStart';
+export * from './useStableCallback';

package/src/hooks/usePropAsSharedValue.ts

@@ -0,0 +1,13 @@
+import {useEffect} from 'react';
+
+import {SharedValue, useSharedValue} from 'react-native-reanimated';
+
+export const usePropAsSharedValue = <T>(value: T): SharedValue<T> => {
+  const sv = useSharedValue(value);
+
+  useEffect(() => {
+    sv.value = value;
+  }, [sv, value]);
+
+  return sv;
+};

package/src/hooks/useStableCallback.ts

@@ -0,0 +1,16 @@
+import {useCallback, useLayoutEffect, useRef} from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Fn = (...args: any[]) => any;
+
+export const useStableCallback = <T extends Fn>(value: T) => {
+  const callback = useRef<T>(value);
+
+  useLayoutEffect(() => {
+    callback.current = value;
+  });
+
+  return useCallback((...args: Parameters<T>): ReturnType<T> => {
+    return callback.current?.(...args);
+  }, []);
+};

package/src/types/misc.ts

@@ -1,4 +1,6 @@
-import {SharedValue} from 'react-native-reanimated';
+import {ComponentProps} from 'react';
+
+import Animated, {SharedValue} from 'react-native-reanimated';
 
 export enum ReorderableListState {
   IDLE = 0,
@@ -7,6 +9,11 @@ export enum ReorderableListState {
   AUTOSCROLL,
 }
 
+export type ItemLayoutAnimation = Exclude<
+  ComponentProps<typeof Animated.View>['layout'],
+  undefined
+>;
+
 export type SharedValueOrType<T> = {
   [TKey in keyof T]?: SharedValue<T[TKey]> | T[TKey];
 };

package/src/types/props.ts

@@ -20,7 +20,7 @@ import type {
 import {PanGesture} from 'react-native-gesture-handler';
 import {SharedValue, useAnimatedScrollHandler} from 'react-native-reanimated';
 
-import {MaximumOneOf, SharedValueOrType} from './misc';
+import {ItemLayoutAnimation, MaximumOneOf, SharedValueOrType} from './misc';
 
 export interface ReorderableListReorderEvent {
   /**
@@ -107,6 +107,10 @@ export interface ReorderableListProps<T>
    * Allows passing an object with values and/or shared values that can animate a cell, for example by using the `onDragStart` and `onDragEnd` events. Supports view style properties. Override opacity and/or transform to disable the default animation, e.g. `{opacity: 1, transform: []}`.
    */
   cellAnimations?: ReorderableListCellAnimations;
+  /**
+   * Whether dragging items is enabled. Default: `true`.
+   */
+  dragEnabled?: boolean;
   /**
    * Whether the active item should be updated. Enables usage of `useIsActive` hook. Default: `false`.
    */
@@ -116,7 +120,7 @@ export interface ReorderableListProps<T>
    */
   panGesture?: PanGesture;
   /**
-   * Wether the pan gestures necessary for dragging are enabled. Default: `true`.
+   * Whether the pan gestures necessary for dragging are enabled. Default: `true`.
    *
    * @deprecated In favor of `panGesture` prop.
    */
@@ -127,6 +131,10 @@ export interface ReorderableListProps<T>
    * @deprecated In favor of `panGesture` prop.
    */
   panActivateAfterLongPress?: number;
+  /**
+   * Layout animation when the item is added to and/or removed from the view hierarchy. To skip entering or exiting animations use the LayoutAnimationConfig component from [Reanimated](https://docs.swmansion.com/react-native-reanimated).
+   */
+  itemLayoutAnimation?: ItemLayoutAnimation;
   /**
    * Event fired after an item is released and the list is reordered.
    */