@legendapp/list 2.0.17 → 2.0.18

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## 2.0.18
+- Improvement: KeyboardAvoidingLegendList now supports KeyboardGestureArea with improved interactive behavior
+
 ## 2.0.17
 - Feat: Add stickyHeaderOffset property to control sticky header positioning
 - Feat: Add sticky header backdrop component support

package/index.js

@@ -2441,7 +2441,6 @@ function onScroll(ctx, state, event) {
   }
   let newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
   state.scrollPending = newScroll;
-  console.log("newScroll", newScroll);
   const maxOffset = Math.max(0, getContentSize(ctx) - state.scrollLength);
   if (state.initialScroll && newScroll > maxOffset) {
     newScroll = maxOffset;

package/index.mjs

@@ -2420,7 +2420,6 @@ function onScroll(ctx, state, event) {
   }
   let newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
   state.scrollPending = newScroll;
-  console.log("newScroll", newScroll);
   const maxOffset = Math.max(0, getContentSize(ctx) - state.scrollLength);
   if (state.initialScroll && newScroll > maxOffset) {
     newScroll = maxOffset;

package/keyboard.d.mts

@@ -6,7 +6,7 @@ import { AnimatedLegendListProps } from '@legendapp/list/reanimated';
 
 declare const KeyboardAvoidingLegendList: <ItemT>(props: Omit<AnimatedLegendListProps<ItemT>, "contentInset" | "onScroll"> & {
     onScroll?: (event: ReanimatedScrollEvent) => void;
-    contentInset?: Insets;
+    contentInset?: Insets | undefined;
     safeAreaInsetBottom?: number;
 } & React.RefAttributes<LegendListRef>) => React.ReactNode;
 

package/keyboard.d.ts

@@ -6,7 +6,7 @@ import { AnimatedLegendListProps } from '@legendapp/list/reanimated';
 
 declare const KeyboardAvoidingLegendList: <ItemT>(props: Omit<AnimatedLegendListProps<ItemT>, "contentInset" | "onScroll"> & {
     onScroll?: (event: ReanimatedScrollEvent) => void;
-    contentInset?: Insets;
+    contentInset?: Insets | undefined;
     safeAreaInsetBottom?: number;
 } & React.RefAttributes<LegendListRef>) => React.ReactNode;
 

package/keyboard.js

@@ -57,20 +57,27 @@ var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegen
     horizontal,
     onScroll: onScrollProp,
     safeAreaInsetBottom = 0,
+    style: styleProp,
     ...rest
   } = props;
+  const styleFlattened = reactNative.StyleSheet.flatten(styleProp);
   const refLegendList = React.useRef(null);
   const combinedRef = useCombinedRef(forwardedRef, refLegendList);
+  const isIos = reactNative.Platform.OS === "ios";
+  const isAndroid = reactNative.Platform.OS === "android";
   const scrollViewRef = reactNativeReanimated.useAnimatedRef();
   const scrollOffsetY = reactNativeReanimated.useSharedValue(0);
   const animatedOffsetY = reactNativeReanimated.useSharedValue(null);
   const scrollOffsetAtKeyboardStart = reactNativeReanimated.useSharedValue(0);
+  const mode = reactNativeReanimated.useSharedValue("idle");
   const keyboardInset = reactNativeReanimated.useSharedValue(0);
   const keyboardHeight = reactNativeReanimated.useSharedValue(0);
   const isOpening = reactNativeReanimated.useSharedValue(false);
+  const didInteractive = reactNativeReanimated.useSharedValue(false);
+  const isKeyboardOpen = reactNativeReanimated.useSharedValue(false);
   const scrollHandler = reactNativeReanimated.useAnimatedScrollHandler(
     (event) => {
-      scrollOffsetY.value = event.contentOffset[horizontal ? "x" : "y"];
+      scrollOffsetY.set(event.contentOffset[horizontal ? "x" : "y"]);
       if (onScrollProp) {
         reactNativeReanimated.runOnJS(onScrollProp)(event);
       }
@@ -89,37 +96,79 @@ var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegen
     {
       onStart: (event) => {
         "worklet";
-        if (event.height > 0) {
-          keyboardHeight.set(event.height - safeAreaInsetBottom);
+        mode.set("running");
+        if (isKeyboardOpen.get() && event.progress === 1 && event.height > 0) {
+          return;
+        }
+        if (!didInteractive.get()) {
+          if (event.height > 0) {
+            keyboardHeight.set(event.height - safeAreaInsetBottom);
+          }
+          isOpening.set(event.progress > 0);
+          scrollOffsetAtKeyboardStart.set(scrollOffsetY.get());
+          animatedOffsetY.set(scrollOffsetY.get());
+          reactNativeReanimated.runOnJS(setScrollProcessingEnabled)(false);
+        }
+      },
+      onInteractive: (event) => {
+        "worklet";
+        if (mode.get() !== "running") {
+          reactNativeReanimated.runOnJS(setScrollProcessingEnabled)(false);
+        }
+        mode.set("running");
+        if (!didInteractive.get()) {
+          didInteractive.set(true);
+        }
+        if (isAndroid && !horizontal) {
+          keyboardInset.set(Math.max(0, event.height - safeAreaInsetBottom));
         }
-        isOpening.set(event.progress > 0);
-        scrollOffsetAtKeyboardStart.value = scrollOffsetY.value;
-        animatedOffsetY.set(scrollOffsetY.value);
-        reactNativeReanimated.runOnJS(setScrollProcessingEnabled)(false);
       },
       onMove: (event) => {
         "worklet";
-        const vIsOpening = isOpening.get();
-        const vKeyboardHeight = keyboardHeight.get();
-        const vProgress = vIsOpening ? event.progress : 1 - event.progress;
-        const targetOffset = scrollOffsetAtKeyboardStart.value + (vIsOpening ? vKeyboardHeight : -vKeyboardHeight) * vProgress;
-        scrollOffsetY.value = targetOffset;
-        animatedOffsetY.set(targetOffset);
-        if (!horizontal) {
-          keyboardInset.value = Math.max(0, event.height - safeAreaInsetBottom);
+        if (!didInteractive.get()) {
+          const vIsOpening = isOpening.get();
+          const vKeyboardHeight = keyboardHeight.get();
+          const vProgress = vIsOpening ? event.progress : 1 - event.progress;
+          const targetOffset = Math.max(
+            0,
+            scrollOffsetAtKeyboardStart.get() + (vIsOpening ? vKeyboardHeight : -vKeyboardHeight) * vProgress
+          );
+          scrollOffsetY.set(targetOffset);
+          animatedOffsetY.set(targetOffset);
+          if (!horizontal) {
+            keyboardInset.set(Math.max(0, event.height - safeAreaInsetBottom));
+          }
         }
       },
       onEnd: (event) => {
         "worklet";
-        const vIsOpening = isOpening.get();
-        const vKeyboardHeight = keyboardHeight.get();
-        const targetOffset = scrollOffsetAtKeyboardStart.value + (vIsOpening ? vKeyboardHeight : -vKeyboardHeight) * (vIsOpening ? event.progress : 1 - event.progress);
-        scrollOffsetY.value = targetOffset;
-        animatedOffsetY.set(targetOffset);
-        if (!horizontal) {
-          keyboardInset.value = Math.max(0, event.height - safeAreaInsetBottom);
+        const wasInteractive = didInteractive.get();
+        const vMode = mode.get();
+        mode.set("idle");
+        if (vMode === "running") {
+          if (!wasInteractive) {
+            const vIsOpening = isOpening.get();
+            const vKeyboardHeight = keyboardHeight.get();
+            const targetOffset = Math.max(
+              0,
+              scrollOffsetAtKeyboardStart.get() + (vIsOpening ? vKeyboardHeight : -vKeyboardHeight) * (vIsOpening ? event.progress : 1 - event.progress)
+            );
+            scrollOffsetY.set(targetOffset);
+            animatedOffsetY.set(targetOffset);
+          }
+          reactNativeReanimated.runOnJS(setScrollProcessingEnabled)(true);
+          didInteractive.set(false);
+          isKeyboardOpen.set(event.height > 0);
+          if (!horizontal) {
+            const newInset = Math.max(0, event.height - safeAreaInsetBottom);
+            if (newInset > 0) {
+              keyboardInset.set(newInset);
+            } else {
+              keyboardInset.set(newInset);
+              animatedOffsetY.set(scrollOffsetY.get());
+            }
+          }
         }
-        reactNativeReanimated.runOnJS(setScrollProcessingEnabled)(true);
       }
     },
     [scrollViewRef, safeAreaInsetBottom]
@@ -127,24 +176,32 @@ var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegen
   const animatedProps = reactNativeReanimated.useAnimatedProps(() => {
     "worklet";
     var _a, _b, _c, _d;
+    const vAnimatedOffsetY = animatedOffsetY.get();
     const baseProps = {
-      contentOffset: animatedOffsetY.value === null ? void 0 : {
+      contentOffset: vAnimatedOffsetY === null ? void 0 : {
         x: 0,
-        y: animatedOffsetY.value
+        y: vAnimatedOffsetY
       }
     };
-    return reactNative.Platform.OS === "ios" ? Object.assign(baseProps, {
+    return isIos ? Object.assign(baseProps, {
       contentInset: {
-        bottom: ((_a = contentInsetProp == null ? void 0 : contentInsetProp.bottom) != null ? _a : 0) + (horizontal ? 0 : keyboardInset.value),
+        bottom: ((_a = contentInsetProp == null ? void 0 : contentInsetProp.bottom) != null ? _a : 0) + (horizontal ? 0 : keyboardInset.get()),
         left: (_b = contentInsetProp == null ? void 0 : contentInsetProp.left) != null ? _b : 0,
         right: (_c = contentInsetProp == null ? void 0 : contentInsetProp.right) != null ? _c : 0,
         top: (_d = contentInsetProp == null ? void 0 : contentInsetProp.top) != null ? _d : 0
       }
     }) : baseProps;
   });
-  const style = reactNative.Platform.OS !== "ios" ? reactNativeReanimated.useAnimatedStyle(() => ({
-    marginBottom: keyboardInset.value
-  })) : void 0;
+  const style = isAndroid ? reactNativeReanimated.useAnimatedStyle(
+    () => {
+      var _a;
+      return {
+        ...styleFlattened || {},
+        marginBottom: (_a = keyboardInset.get()) != null ? _a : 0
+      };
+    },
+    [styleProp, keyboardInset]
+  ) : void 0;
   return /* @__PURE__ */ React__namespace.createElement(
     reanimated.AnimatedLegendList,
     {

package/keyboard.mjs

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { forwardRef, useRef, useCallback } from 'react';
-import { Platform } from 'react-native';
+import { StyleSheet, Platform } from 'react-native';
 import { useKeyboardHandler } from 'react-native-keyboard-controller';
 import { useAnimatedRef, useSharedValue, useAnimatedScrollHandler, runOnJS, useAnimatedProps, useAnimatedStyle } from 'react-native-reanimated';
 import { AnimatedLegendList } from '@legendapp/list/reanimated';
@@ -36,20 +36,27 @@ var KeyboardAvoidingLegendList = forwardRef(function KeyboardAvoidingLegendList2
     horizontal,
     onScroll: onScrollProp,
     safeAreaInsetBottom = 0,
+    style: styleProp,
     ...rest
   } = props;
+  const styleFlattened = StyleSheet.flatten(styleProp);
   const refLegendList = useRef(null);
   const combinedRef = useCombinedRef(forwardedRef, refLegendList);
+  const isIos = Platform.OS === "ios";
+  const isAndroid = Platform.OS === "android";
   const scrollViewRef = useAnimatedRef();
   const scrollOffsetY = useSharedValue(0);
   const animatedOffsetY = useSharedValue(null);
   const scrollOffsetAtKeyboardStart = useSharedValue(0);
+  const mode = useSharedValue("idle");
   const keyboardInset = useSharedValue(0);
   const keyboardHeight = useSharedValue(0);
   const isOpening = useSharedValue(false);
+  const didInteractive = useSharedValue(false);
+  const isKeyboardOpen = useSharedValue(false);
   const scrollHandler = useAnimatedScrollHandler(
     (event) => {
-      scrollOffsetY.value = event.contentOffset[horizontal ? "x" : "y"];
+      scrollOffsetY.set(event.contentOffset[horizontal ? "x" : "y"]);
       if (onScrollProp) {
         runOnJS(onScrollProp)(event);
       }
@@ -68,37 +75,79 @@ var KeyboardAvoidingLegendList = forwardRef(function KeyboardAvoidingLegendList2
     {
       onStart: (event) => {
         "worklet";
-        if (event.height > 0) {
-          keyboardHeight.set(event.height - safeAreaInsetBottom);
+        mode.set("running");
+        if (isKeyboardOpen.get() && event.progress === 1 && event.height > 0) {
+          return;
+        }
+        if (!didInteractive.get()) {
+          if (event.height > 0) {
+            keyboardHeight.set(event.height - safeAreaInsetBottom);
+          }
+          isOpening.set(event.progress > 0);
+          scrollOffsetAtKeyboardStart.set(scrollOffsetY.get());
+          animatedOffsetY.set(scrollOffsetY.get());
+          runOnJS(setScrollProcessingEnabled)(false);
+        }
+      },
+      onInteractive: (event) => {
+        "worklet";
+        if (mode.get() !== "running") {
+          runOnJS(setScrollProcessingEnabled)(false);
+        }
+        mode.set("running");
+        if (!didInteractive.get()) {
+          didInteractive.set(true);
+        }
+        if (isAndroid && !horizontal) {
+          keyboardInset.set(Math.max(0, event.height - safeAreaInsetBottom));
         }
-        isOpening.set(event.progress > 0);
-        scrollOffsetAtKeyboardStart.value = scrollOffsetY.value;
-        animatedOffsetY.set(scrollOffsetY.value);
-        runOnJS(setScrollProcessingEnabled)(false);
       },
       onMove: (event) => {
         "worklet";
-        const vIsOpening = isOpening.get();
-        const vKeyboardHeight = keyboardHeight.get();
-        const vProgress = vIsOpening ? event.progress : 1 - event.progress;
-        const targetOffset = scrollOffsetAtKeyboardStart.value + (vIsOpening ? vKeyboardHeight : -vKeyboardHeight) * vProgress;
-        scrollOffsetY.value = targetOffset;
-        animatedOffsetY.set(targetOffset);
-        if (!horizontal) {
-          keyboardInset.value = Math.max(0, event.height - safeAreaInsetBottom);
+        if (!didInteractive.get()) {
+          const vIsOpening = isOpening.get();
+          const vKeyboardHeight = keyboardHeight.get();
+          const vProgress = vIsOpening ? event.progress : 1 - event.progress;
+          const targetOffset = Math.max(
+            0,
+            scrollOffsetAtKeyboardStart.get() + (vIsOpening ? vKeyboardHeight : -vKeyboardHeight) * vProgress
+          );
+          scrollOffsetY.set(targetOffset);
+          animatedOffsetY.set(targetOffset);
+          if (!horizontal) {
+            keyboardInset.set(Math.max(0, event.height - safeAreaInsetBottom));
+          }
         }
       },
       onEnd: (event) => {
         "worklet";
-        const vIsOpening = isOpening.get();
-        const vKeyboardHeight = keyboardHeight.get();
-        const targetOffset = scrollOffsetAtKeyboardStart.value + (vIsOpening ? vKeyboardHeight : -vKeyboardHeight) * (vIsOpening ? event.progress : 1 - event.progress);
-        scrollOffsetY.value = targetOffset;
-        animatedOffsetY.set(targetOffset);
-        if (!horizontal) {
-          keyboardInset.value = Math.max(0, event.height - safeAreaInsetBottom);
+        const wasInteractive = didInteractive.get();
+        const vMode = mode.get();
+        mode.set("idle");
+        if (vMode === "running") {
+          if (!wasInteractive) {
+            const vIsOpening = isOpening.get();
+            const vKeyboardHeight = keyboardHeight.get();
+            const targetOffset = Math.max(
+              0,
+              scrollOffsetAtKeyboardStart.get() + (vIsOpening ? vKeyboardHeight : -vKeyboardHeight) * (vIsOpening ? event.progress : 1 - event.progress)
+            );
+            scrollOffsetY.set(targetOffset);
+            animatedOffsetY.set(targetOffset);
+          }
+          runOnJS(setScrollProcessingEnabled)(true);
+          didInteractive.set(false);
+          isKeyboardOpen.set(event.height > 0);
+          if (!horizontal) {
+            const newInset = Math.max(0, event.height - safeAreaInsetBottom);
+            if (newInset > 0) {
+              keyboardInset.set(newInset);
+            } else {
+              keyboardInset.set(newInset);
+              animatedOffsetY.set(scrollOffsetY.get());
+            }
+          }
         }
-        runOnJS(setScrollProcessingEnabled)(true);
       }
     },
     [scrollViewRef, safeAreaInsetBottom]
@@ -106,24 +155,32 @@ var KeyboardAvoidingLegendList = forwardRef(function KeyboardAvoidingLegendList2
   const animatedProps = useAnimatedProps(() => {
     "worklet";
     var _a, _b, _c, _d;
+    const vAnimatedOffsetY = animatedOffsetY.get();
     const baseProps = {
-      contentOffset: animatedOffsetY.value === null ? void 0 : {
+      contentOffset: vAnimatedOffsetY === null ? void 0 : {
         x: 0,
-        y: animatedOffsetY.value
+        y: vAnimatedOffsetY
       }
     };
-    return Platform.OS === "ios" ? Object.assign(baseProps, {
+    return isIos ? Object.assign(baseProps, {
       contentInset: {
-        bottom: ((_a = contentInsetProp == null ? void 0 : contentInsetProp.bottom) != null ? _a : 0) + (horizontal ? 0 : keyboardInset.value),
+        bottom: ((_a = contentInsetProp == null ? void 0 : contentInsetProp.bottom) != null ? _a : 0) + (horizontal ? 0 : keyboardInset.get()),
         left: (_b = contentInsetProp == null ? void 0 : contentInsetProp.left) != null ? _b : 0,
         right: (_c = contentInsetProp == null ? void 0 : contentInsetProp.right) != null ? _c : 0,
         top: (_d = contentInsetProp == null ? void 0 : contentInsetProp.top) != null ? _d : 0
       }
     }) : baseProps;
   });
-  const style = Platform.OS !== "ios" ? useAnimatedStyle(() => ({
-    marginBottom: keyboardInset.value
-  })) : void 0;
+  const style = isAndroid ? useAnimatedStyle(
+    () => {
+      var _a;
+      return {
+        ...styleFlattened || {},
+        marginBottom: (_a = keyboardInset.get()) != null ? _a : 0
+      };
+    },
+    [styleProp, keyboardInset]
+  ) : void 0;
   return /* @__PURE__ */ React.createElement(
     AnimatedLegendList,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,