Help with layout shift on variable content modal

[Dosbodoke]

I'm building a modal with multiple state. It has some action at the bottom represented by CartSummary and, when I add a item to the cart it should show it above the summary.

The problem is that when AnimatedCardItem either mounts or unmounts, the CartSummary has a layout shift. The expected behavior is to always keep in place and the modal to resize.

WhatsApp.Video.2025-07-17.at.15.39.45.mp4

import {
  BottomSheetModal,
  BottomSheetModalProvider,
  BottomSheetView,
  useBottomSheetSpringConfigs,
} from "@gorhom/bottom-sheet";
import { Text } from "@meza/ui/components/text";
import React, { RefObject, useEffect, useRef } from "react";
import { TouchableOpacity, View } from "react-native";
import Animated, { FadeInDown, FadeOutUp } from "react-native-reanimated";
import { useSafeAreaInsets } from "react-native-safe-area-context";

import { useCartStore } from "@/store/cart-store";

import { CartItem } from "./cart-item";

const _entering = FadeInDown.duration(3000).damping(80).stiffness(200);
const _exiting = FadeOutUp.duration(3000).damping(80).stiffness(200);

const AnimatedBottomSheetView =
  Animated.createAnimatedComponent(BottomSheetView);

export type Item = {
  id: string;
  name: string;
  price: number;
  image?: string;
  quantity: number;
  notes?: string;
};

interface CartSummaryProps {
  onShowAllItems: () => void;
  onConfirmOrder: () => void;
}

const CartSummary: React.FC<CartSummaryProps> = React.memo(
  ({ onShowAllItems, onConfirmOrder }) => {
    const { getTotalItems, getTotalPrice } = useCartStore();

    const totalItems = getTotalItems();
    const totalPrice = getTotalPrice();

    return (
      <View className="p-4 flex-row items-center justify-between">
        <View className="flex-1">
          <Text className="text-sm text-gray-600">
            {totalItems} items • R${totalPrice.toFixed(2)}
          </Text>
        </View>

        <View className="flex-row gap-3">
          <TouchableOpacity
            onPress={onShowAllItems}
            className="size-10 bg-gray-100 rounded-full items-center justify-center shadow"
          >
            <Text className="text-gray-700">📋</Text>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={onConfirmOrder}
            className="size-10 bg-green-500 rounded-full items-center justify-center shadow"
          >
            <Text className="text-white">✓</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  },
);
CartSummary.displayName = "CartSummary";

const AnimatedLatestItem: React.FC<{
  onEdit: (item: Item) => void;
}> = React.memo(({ onEdit }) => {
  const item = useCartStore((state) => state.latestAddedItem);

  return (
    <Animated.View
      entering={_entering}
      exiting={_exiting}
      key={`latest-item-${item?.id || "empty"}`}
      className="border-b border-gray-200"
    >
      {item ? <CartItem item={item} onEdit={onEdit} /> : null}
    </Animated.View>
  );
});
AnimatedLatestItem.displayName = "AnimatedLatestItem";

interface ItemContextContentProps {
  ref: RefObject<BottomSheetModal | null>;
}
const ItemContextContent: React.FC<ItemContextContentProps> = React.memo(
  ({ ref }) => {
    const insets = useSafeAreaInsets();

    useEffect(() => {
      ref.current?.present();
    }, [ref]);

    const animationConfigs = useBottomSheetSpringConfigs({
      damping: 80,
      overshootClamping: true,
      restDisplacementThreshold: 0.1,
      restSpeedThreshold: 0.1,
      stiffness: 200,
      duration: 3000,
    });

    return (
      <BottomSheetModal
        name="idle-modal"
        ref={ref}
        animateOnMount={false}
        enablePanDownToClose={false}
        handleComponent={null}
        backdropComponent={() => null}
        backgroundStyle={{
          backgroundColor: "#0000FF",
        }}
        animationConfigs={animationConfigs}
      >
        <AnimatedBottomSheetView
          style={{
            paddingBottom: insets.bottom,
            backgroundColor: "#00ff00",
            alignSelf: "flex-end",
          }}
          className="px-4"
        >
          <AnimatedLatestItem onEdit={() => {}} />

          <CartSummary onShowAllItems={() => {}} onConfirmOrder={() => {}} />
        </AnimatedBottomSheetView>
      </BottomSheetModal>
    );
  },
);
ItemContextContent.displayName = "ItemContextContent";

export const FloatingCart = () => {
  const idleModalRef = useRef<BottomSheetModal>(null);

  return (
    <BottomSheetModalProvider>
      <ItemContextContent ref={idleModalRef} />
    </BottomSheetModalProvider>
  );
};

Thx in advance :D