fix: Multiple minor improvements (#439)

## Description

Before release improvements

Author: MatiPl01

example/app/src/examples/SortableGrid/tests/InputFocusExample.tsx

@@ -39,8 +39,8 @@ export default function InputFocusExample() {
 
   return (
     <KeyboardAvoidingView
-      behavior={IS_IOS ? 'height' : undefined}
-      keyboardVerticalOffset={100}
+      behavior={IS_IOS ? 'height' : 'padding'}
+      keyboardVerticalOffset={IS_IOS ? 100 : 80}
       style={styles.flex}>
       <ScrollScreen
         contentContainerStyle={styles.container}

packages/react-native-sortables/src/components/SortableGrid.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
+import type { DimensionValue } from 'react-native';
 import { StyleSheet } from 'react-native';
-import type { AnimatedStyle, SharedValue } from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 import { runOnUI, useAnimatedStyle } from 'react-native-reanimated';
 
 import { DEFAULT_SORTABLE_GRID_PROPS, IS_WEB } from '../constants';
@@ -11,7 +12,6 @@ import {
   GridLayoutProvider,
   OrderUpdaterComponent,
   SharedProvider,
-  useGridLayoutContext,
   useMeasurementsContext,
   useStrategyKey
 } from '../providers';
@@ -175,67 +175,47 @@ function SortableGridInner<I>({
   rowHeight,
   ...containerProps
 }: SortableGridInnerProps<I>) {
-  const { mainGroupSize } = useGridLayoutContext();
   const { handleContainerMeasurement } = useMeasurementsContext();
 
-  const animatedInnerStyle = useAnimatedStyle(() => ({
-    flexDirection: isVertical ? 'row' : 'column',
-    height: isVertical
-      ? undefined
-      : groups * (rowHeight + rowGap.value) - rowGap.value,
-    ...(IS_WEB || mainGroupSize.value
+  const animatedInnerStyle = useAnimatedStyle(() =>
+    isVertical
       ? {
-          columnGap: columnGap.value,
-          marginHorizontal: 0,
-          marginVertical: 0,
+          columnGap: IS_WEB ? columnGap.value : 0,
+          flexDirection: 'row',
+          marginHorizontal: IS_WEB ? 0 : -columnGap.value / 2,
           rowGap: rowGap.value
         }
       : {
-          marginHorizontal: -columnGap.value / 2,
-          marginVertical: -rowGap.value / 2
-        })
-  }));
-
-  let animatedItemStyle: AnimatedStyle;
-  if (IS_WEB) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    animatedItemStyle = useAnimatedStyle(() => ({
-      [isVertical ? 'width' : 'height']:
-        `calc((100% - ${columnGap.value * (groups - 1)}px) / ${groups})`
-    }));
-  } else {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    animatedItemStyle = useAnimatedStyle(() => {
-      if (!mainGroupSize.value) {
-        return {
-          flexBasis: `${100 / groups}%`,
-          paddingHorizontal: columnGap.value / 2,
-          paddingVertical: rowGap.value / 2
-        };
-      }
+          columnGap: columnGap.value,
+          flexDirection: 'column',
+          height: groups * (rowHeight + rowGap.value) - rowGap.value,
+          rowGap: rowGap.value
+        }
+  );
 
-      return {
-        flexBasis: 'auto',
-        [isVertical ? 'width' : 'height']: mainGroupSize.value,
-        paddingHorizontal: 0,
-        paddingVertical: 0
-      };
-    });
-  }
+  const animatedItemStyle = useAnimatedStyle(() =>
+    isVertical
+      ? IS_WEB
+        ? {
+            width:
+              `calc((100% - ${columnGap.value * (groups - 1)}px) / ${groups})` as DimensionValue
+          }
+        : {
+            flexBasis: `${100 / groups}%`,
+            paddingHorizontal: columnGap.value / 2
+          }
+      : { height: rowHeight }
+  );
 
   return (
     <SortableContainer
       {...containerProps}
       style={[styles.gridContainer, animatedInnerStyle]}
       onLayout={runOnUI((width, height) => {
-        if (IS_WEB || mainGroupSize.value) {
-          handleContainerMeasurement(width, height);
-        } else {
-          handleContainerMeasurement(
-            width - columnGap.value,
-            height - rowGap.value
-          );
-        }
+        handleContainerMeasurement(
+          width - (isVertical && !IS_WEB ? columnGap.value : 0),
+          height
+        );
       })}>
       {zipArrays(data, itemKeys).map(([item, key], index) => (
         <SortableGridItem

packages/react-native-sortables/src/components/shared/DraggableView/DraggableView.tsx

@@ -39,10 +39,9 @@ export type DraggableViewProps = PropsWithChildren<{
 
 function DraggableView({
   children,
-  entering: entering_,
-  exiting,
   itemKey: key,
-  style
+  style,
+  ...layoutAnimations
 }: DraggableViewProps) {
   const portalContext = usePortalContext();
   const commonValuesContext = useCommonValuesContext();
@@ -51,10 +50,7 @@ function DraggableView({
   const { handleDragEnd } = useDragContext();
   const { activeItemKey, containerId, customHandle } = commonValuesContext;
 
-  const [{ entering, isTeleported }, setState] = useState<{
-    entering?: LayoutAnimation;
-    isTeleported: boolean;
-  }>({ entering: entering_, isTeleported: false });
+  const [isTeleported, setIsTeleported] = useState(false);
   const activationAnimationProgress = useMutableValue(0);
   const isActive = useDerivedValue(() => activeItemKey.value === key);
   const itemStyles = useItemStyles(key, isActive, activationAnimationProgress);
@@ -71,14 +67,14 @@ function DraggableView({
 
   useEffect(() => {
     if (!portalContext) {
-      setState(prev => (prev.isTeleported ? { isTeleported: false } : prev));
+      setIsTeleported(false);
       return;
     }
 
     const teleportedItemId = `${containerId}-${key}`;
     const unsubscribe = portalContext?.subscribe?.(
       teleportedItemId,
-      teleported => setState({ isTeleported: teleported })
+      setIsTeleported
     );
 
     return () => {
@@ -116,10 +112,9 @@ function DraggableView({
   const renderItemCell = (hidden = false) => {
     const innerComponent = (
       <ItemCell
+        {...layoutAnimations}
         {...sharedCellProps}
         cellStyle={[style, itemStyles]}
-        entering={entering}
-        exiting={exiting}
         hidden={hidden}>
         <LayoutAnimationConfig skipEntering={false} skipExiting={false}>
           {children}

packages/react-native-sortables/src/components/shared/DraggableView/ItemCell.tsx

@@ -6,13 +6,19 @@ import {
   type ViewStyle
 } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
-import Animated from 'react-native-reanimated';
+import Animated, {
+  useAnimatedStyle,
+  useDerivedValue
+} from 'react-native-reanimated';
 
+import { HIDDEN_X_OFFSET } from '../../../constants';
 import type {
   AnimatedStyleProp,
   LayoutAnimation
 } from '../../../integrations/reanimated';
-import { useItemDecorationStyle } from '../../../providers';
+import { useCommonValuesContext, useItemDecoration } from '../../../providers';
+import type { Dimensions } from '../../../types';
+import { resolveDimension } from '../../../utils';
 import AnimatedOnLayoutView from '../AnimatedOnLayoutView';
 
 export type ItemCellProps = PropsWithChildren<{
@@ -37,18 +43,40 @@ export default function ItemCell({
   itemKey,
   onLayout
 }: ItemCellProps) {
-  const decorationStyle = useItemDecorationStyle(
+  const { controlledItemDimensions, itemHeights, itemWidths } =
+    useCommonValuesContext();
+
+  const decoration = useItemDecoration(
     itemKey,
     isActive,
     activationAnimationProgress
   );
 
+  const controlledDimensions = useDerivedValue(() => {
+    const result: Partial<Dimensions> = {};
+    if (controlledItemDimensions.width) {
+      result.width = resolveDimension(itemWidths.value, itemKey) ?? undefined;
+    }
+    if (controlledItemDimensions.height) {
+      result.height = resolveDimension(itemHeights.value, itemKey) ?? undefined;
+    }
+    return result;
+  });
+
+  const decorationStyle = useAnimatedStyle(() => decoration.value);
+  const dimensionsStyle = useAnimatedStyle(() => controlledDimensions.value);
+
   return (
     <Animated.View style={cellStyle}>
       <AnimatedOnLayoutView
         entering={entering}
         exiting={exiting}
-        style={[styles.decoration, decorationStyle, hidden && styles.hidden]}
+        style={[
+          styles.decoration,
+          decorationStyle,
+          dimensionsStyle,
+          hidden && styles.hidden
+        ]}
         onLayout={hidden ? undefined : onLayout}>
         {children}
       </AnimatedOnLayoutView>
@@ -75,6 +103,11 @@ const styles = StyleSheet.create({
     }
   }),
   hidden: {
-    display: 'none'
+    // We change the x position to hide items when teleported (we can't use
+    // non-layout props like opacity as they are sometimes not updated via
+    // Reanimated on the Old Architecture; we also can't use any props that
+    // affect item dimensions, etc., so the safest way is to put the item
+    // far away from the viewport to hide it)
+    left: HIDDEN_X_OFFSET
   }
 });

packages/react-native-sortables/src/constants/values.ts

@@ -1,2 +1,4 @@
 export const EMPTY_OBJECT = {};
 export const EMPTY_ARRAY = [];
+
+export const HIDDEN_X_OFFSET = 9999;

packages/react-native-sortables/src/providers/layout/flex/updates/insert/index.ts

@@ -3,6 +3,7 @@ import { useAnimatedReaction, useDerivedValue } from 'react-native-reanimated';
 
 import { useMutableValue } from '../../../../../integrations/reanimated';
 import type {
+  ControlledSizes,
   Coordinate,
   Dimension,
   FlexLayout,
@@ -53,7 +54,7 @@ const useInsertStrategy: SortStrategyFactory = () => {
   let mainDimension: Dimension;
   let crossDimension: Dimension;
   let mainGap: SharedValue<number>;
-  let mainItemSizes: SharedValue<number | Record<string, number>>;
+  let mainItemSizes: SharedValue<ControlledSizes>;
 
   if (isRow) {
     mainCoordinate = 'x';
@@ -306,7 +307,7 @@ const useInsertStrategy: SortStrategyFactory = () => {
         mainItemSizes.value,
         currentItemKey
       );
-      if (!currentItemPosition || itemMainSize === undefined) return;
+      if (!currentItemPosition || itemMainSize === null) return;
 
       swapItemAfterOffset =
         currentItemPosition[mainCoordinate] + (isReverse ? 0 : itemMainSize);
@@ -322,7 +323,7 @@ const useInsertStrategy: SortStrategyFactory = () => {
         mainItemSizes.value,
         nextItemKey
       );
-      if (!nextItemPosition || nextItemMainSize === undefined) break;
+      if (!nextItemPosition || nextItemMainSize === null) break;
 
       const currentItemMainAxisPosition = currentItemPosition[mainCoordinate];
       const nextItemMainAxisPosition = nextItemPosition[mainCoordinate];
@@ -375,7 +376,7 @@ const useInsertStrategy: SortStrategyFactory = () => {
         mainItemSizes.value,
         currentItemKey
       );
-      if (!currentItemPosition || currentItemMainSize === undefined) return;
+      if (!currentItemPosition || currentItemMainSize === null) return;
 
       swapItemBeforeOffset =
         currentItemPosition[mainCoordinate] +
@@ -392,7 +393,7 @@ const useInsertStrategy: SortStrategyFactory = () => {
         mainItemSizes.value,
         prevItemKey
       );
-      if (!prevItemPosition || prevItemMainSize === undefined) return;
+      if (!prevItemPosition || prevItemMainSize === null) return;
 
       const currentItemMainAxisPosition = currentItemPosition[mainCoordinate];
       const prevItemMainAxisPosition = prevItemPosition[mainCoordinate];

packages/react-native-sortables/src/providers/layout/flex/updates/insert/utils.ts

@@ -1,3 +1,4 @@
+import type { ControlledSizes } from '../../../../../types';
 import { reorderInsert, resolveDimension } from '../../../../../utils';
 
 export type ItemGroupSwapProps = {
@@ -7,7 +8,7 @@ export type ItemGroupSwapProps = {
   groupSizeLimit: number;
   indexToKey: Array<string>;
   keyToIndex: Record<string, number>;
-  mainItemSizes: number | Record<string, number>;
+  mainItemSizes: ControlledSizes;
   itemGroups: Array<Array<string>>;
   mainGap: number;
   fixedKeys: Record<string, boolean> | undefined;
@@ -34,7 +35,7 @@ const getGroupItemIndex = (
 
 export const getTotalGroupSize = (
   group: Array<string>,
-  mainItemSizes: number | Record<string, number>,
+  mainItemSizes: ControlledSizes,
   gap: number
 ) => {
   'worklet';

packages/react-native-sortables/src/providers/layout/flex/utils/debug.ts

@@ -1,5 +1,10 @@
 import type { DebugRectUpdater } from '../../../../debug';
-import type { FlexDirection, FlexLayout, Vector } from '../../../../types';
+import type {
+  ControlledSizes,
+  FlexDirection,
+  FlexLayout,
+  Vector
+} from '../../../../types';
 import { resolveDimension } from '../../../../utils';
 
 const DEBUG_COLORS = {
@@ -12,8 +17,8 @@ export const updateLayoutDebugRects = (
   layout: FlexLayout,
   debugCrossAxisGapRects: Array<DebugRectUpdater>,
   debugMainAxisGapRects: Array<DebugRectUpdater>,
-  itemWidths: number | Record<string, number>,
-  itemHeights: number | Record<string, number>
+  itemWidths: ControlledSizes,
+  itemHeights: ControlledSizes
 ) => {
   'worklet';
   const isRow = flexDirection.startsWith('row');