react-native-reorderable-list 0.15.0 → 0.16.1

package/src/components/ScrollViewContainer.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, useCallback, useMemo} from 'react';
+import React, {forwardRef, useCallback, useMemo, useState} from 'react';
 import {LayoutChangeEvent, ScrollView} from 'react-native';
 
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
@@ -21,8 +21,9 @@ const ScrollViewContainerWithRef = (
 ) => {
   const scrollEnabled = rest.scrollEnabled ?? true;
 
+  const [scrollViewForceDisableScroll, setScrollViewForceDisableScroll] =
+    useState(false);
   const scrollViewScrollEnabledProp = usePropAsSharedValue(scrollEnabled);
-  const scrollViewCurrentScrollEnabled = useSharedValue(scrollEnabled);
   const scrollViewContainerRef = useAnimatedRef<Animated.ScrollView>();
   const scrollViewScrollOffsetY = useSharedValue(0);
   const scrollViewPageY = useSharedValue(0);
@@ -62,8 +63,8 @@ const ScrollViewContainerWithRef = (
       scrollViewHeightY,
       scrollViewScrollOffsetY,
       scrollViewScrollEnabledProp,
-      scrollViewCurrentScrollEnabled,
       outerScrollGesture,
+      setScrollViewForceDisableScroll,
     }),
     [
       scrollViewContainerRef,
@@ -71,8 +72,8 @@ const ScrollViewContainerWithRef = (
       scrollViewHeightY,
       scrollViewScrollOffsetY,
       scrollViewScrollEnabledProp,
-      scrollViewCurrentScrollEnabled,
       outerScrollGesture,
+      setScrollViewForceDisableScroll,
     ],
   );
 
@@ -103,6 +104,8 @@ const ScrollViewContainerWithRef = (
           ref={handleRef}
           onScroll={composedScrollHandler}
           onLayout={handleLayout}
+          // We force disable scroll or let the component prop control it.
+          scrollEnabled={scrollViewForceDisableScroll ? false : scrollEnabled}
         />
       </GestureDetector>
     </ScrollViewContainerContext.Provider>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Dispatch, SetStateAction} from 'react';
 import {ScrollView} from 'react-native';
 
 import {NativeGesture} from 'react-native-gesture-handler';
@@ -10,8 +10,8 @@ interface ScrollViewContainerContextData {
   scrollViewHeightY: SharedValue<number>;
   scrollViewScrollOffsetY: SharedValue<number>;
   scrollViewScrollEnabledProp: SharedValue<boolean>;
-  scrollViewCurrentScrollEnabled: SharedValue<boolean>;
   outerScrollGesture: NativeGesture;
+  setScrollViewForceDisableScroll: Dispatch<SetStateAction<boolean>>;
 }
 
 export const ScrollViewContainerContext = React.createContext<

package/src/hooks/index.ts

@@ -4,3 +4,4 @@ export * from './useIsActive';
 export * from './useReorderableDrag';
 export * from './useReorderableDragEnd';
 export * from './useReorderableDragStart';
+export * from './useStableCallback';

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 {
   /**
@@ -131,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.
    */