stream-chat-react-native-core 9.12.1 → 9.13.0

package/src/ai-components/conversation/list/AIChatList.tsx

@@ -0,0 +1,227 @@
+import React, { type ReactNode, useMemo, useRef } from 'react';
+import { ActivityIndicator, Pressable, StyleSheet, View } from 'react-native';
+import Animated, { Easing, Keyframe, useAnimatedStyle } from 'react-native-reanimated';
+
+import { KeyboardAwareLegendList } from '@legendapp/list/keyboard';
+import type { LegendListRef, LegendListRenderItemProps } from '@legendapp/list/react-native';
+
+import { useChatListController } from './useChatListController';
+import { keyboardOverlapOf } from './useKeyboardOverlap';
+
+import { useAITranslation, useTheme } from '../../contexts';
+import { useAIIcons } from '../../icons';
+import { useBottomSafeArea } from '../../internal/hooks/useBottomSafeArea';
+import { primitives } from '../../internal/tokens';
+
+export type AIChatListProps<T> = {
+  /** The key of the row to pin to the top of what is visible, such as the latest question's. */
+  anchorKey: string | undefined;
+  data: T[];
+  getItemType: (item: T) => string;
+  keyExtractor: (item: T) => string;
+  renderItem: (props: LegendListRenderItemProps<T>) => ReactNode;
+  /** The room for a composer floating over the bottom of the list. */
+  bottomInset?: number;
+  /** What shows while there are no rows, centered. */
+  emptyContent?: ReactNode;
+  /**
+   * How far above the bottom of the screen the composer sits, such as above a tab bar: the
+   * keyboard covers the list only as far as it rises past that. Defaults to the bottom safe area.
+   */
+  keyboardOffset?: number;
+  /** Loads the rows before the first one. `undefined` once there are none left. */
+  loadOlderMessages?: () => Promise<void> | void;
+  testID?: string;
+};
+
+const LoadingOlder = () => {
+  const { t } = useAITranslation();
+  const {
+    theme: { colors, conversation },
+  } = useTheme();
+  return (
+    <View
+      accessibilityLabel={t('Loading older messages')}
+      accessibilityRole='progressbar'
+      accessible
+      style={[styles.loadingOlder, conversation?.loadingOlder]}
+    >
+      <ActivityIndicator color={conversation?.loadingIndicator ?? colors.grey} />
+    </View>
+  );
+};
+
+// How far past what is visible rows are laid out, each way. Replies run from a line to several
+// screens, so a row the list reuses for another is placed by an estimate until it is measured: far
+// enough out, that happens off screen even in a fast fling, rather than as rows briefly showing
+// what they held before or overlapping. LegendList's default is 250.
+const DRAW_DISTANCE = 1000;
+
+const SCROLL_BUTTON_IN = new Keyframe({
+  0: { opacity: 0, transform: [{ scale: 0.8 }] },
+  100: { easing: Easing.inOut(Easing.ease), opacity: 1, transform: [{ scale: 1 }] },
+}).duration(200);
+const SCROLL_BUTTON_OUT = new Keyframe({
+  0: { opacity: 1, transform: [{ scale: 1 }] },
+  100: { easing: Easing.inOut(Easing.ease), opacity: 0, transform: [{ scale: 0.8 }] },
+}).duration(200);
+
+const ScrollToLatestButton = ({ onPress }: { onPress: () => void }) => {
+  const { t } = useAITranslation();
+  const {
+    theme: { colors, conversation },
+  } = useTheme();
+  const { ArrowDown } = useAIIcons();
+  return (
+    <Pressable
+      accessibilityLabel={t('Scroll to latest')}
+      accessibilityRole='button'
+      hitSlop={4}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.scrollButton,
+        {
+          backgroundColor: conversation?.scrollButtonBackground ?? colors.white,
+          borderColor: conversation?.scrollButtonBorder ?? colors.grey_gainsboro,
+          opacity: pressed ? 0.7 : 1,
+        },
+        conversation?.scrollButton,
+      ]}
+    >
+      <ArrowDown color={conversation?.scrollButtonIcon ?? colors.black} size={20} />
+    </Pressable>
+  );
+};
+
+/**
+ * The list of a chat with an agent: virtualised on Reanimated LegendList, reusing the views of
+ * rows scrolled out of sight. It pins `anchorKey`'s row to the top of what is visible, opens at the
+ * end, loads older rows as the person scrolls to the start, and offers a button back to the latest
+ * row when the end is out of view. What the rows are is the caller's.
+ */
+export const AIChatList = <T,>({
+  anchorKey,
+  bottomInset = 0,
+  data,
+  emptyContent,
+  getItemType,
+  keyboardOffset: keyboardOffsetProp,
+  keyExtractor,
+  loadOlderMessages,
+  renderItem,
+  testID,
+}: AIChatListProps<T>) => {
+  const {
+    theme: { conversation },
+  } = useTheme();
+  const listRef = useRef<LegendListRef>(null);
+  const isEmpty = data.length === 0;
+  const { isEndInView, keyboard, keyboardOffset, listProps, loadsOlder, scrollToEnd } =
+    useChatListController({
+      anchorKey,
+      bottomInset,
+      data,
+      keyExtractor,
+      listRef,
+      loadOlderMessages: isEmpty ? undefined : loadOlderMessages,
+    });
+
+  const contentContainerStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        { paddingBottom: primitives.spacingMd + bottomInset },
+        conversation?.content,
+      ]),
+    [bottomInset, conversation?.content],
+  );
+
+  const bottomSafeArea = useBottomSafeArea();
+  const offset = keyboardOffsetProp ?? bottomSafeArea;
+  keyboardOffset.current = offset;
+
+  // The button rides the keyboard, so it stays in sight above it.
+  const buttonLift = useAnimatedStyle(() => ({
+    transform: [{ translateY: -keyboardOverlapOf(keyboard.value, offset) }],
+  }));
+  // What shows while there are no rows stays centered in what the keyboard leaves of the list.
+  const emptyLift = useAnimatedStyle(() => ({
+    paddingBottom: bottomInset + keyboardOverlapOf(keyboard.value, offset),
+  }));
+
+  return (
+    <View style={[styles.container, conversation?.container]} testID={testID}>
+      {/* Mounted even while there are no rows: the list follows the keyboard only from its next
+          move, so one mounted while the keyboard is up would leave the first turn under it. The
+          keyboard comes up over the list, which makes room for it below the latest turn: the room
+          the pinned question leaves takes it first. */}
+      <KeyboardAwareLegendList
+        {...listProps}
+        contentContainerStyle={contentContainerStyle}
+        data={data}
+        drawDistance={DRAW_DISTANCE}
+        getItemType={getItemType}
+        initialScrollAtEnd
+        keyboardOffset={offset}
+        keyboardShouldPersistTaps='handled'
+        keyExtractor={keyExtractor}
+        ListHeaderComponent={loadsOlder ? LoadingOlder : null}
+        maintainVisibleContentPosition
+        recycleItems
+        ref={listRef}
+        renderItem={renderItem}
+        testID={testID && `${testID}-list`}
+      />
+      {isEmpty ? (
+        <Animated.View
+          pointerEvents='box-none'
+          style={[styles.empty, emptyLift, conversation?.empty]}
+          testID={testID && `${testID}-empty`}
+        >
+          {emptyContent}
+        </Animated.View>
+      ) : null}
+      {!isEndInView && !isEmpty ? (
+        <Animated.View
+          pointerEvents='box-none'
+          style={[
+            styles.scrollButtonContainer,
+            { bottom: bottomInset + primitives.spacingXs },
+            buttonLift,
+          ]}
+        >
+          <Animated.View entering={SCROLL_BUTTON_IN} exiting={SCROLL_BUTTON_OUT}>
+            <ScrollToLatestButton onPress={scrollToEnd} />
+          </Animated.View>
+        </Animated.View>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  empty: {
+    alignItems: 'center',
+    bottom: 0,
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+  loadingOlder: { alignItems: 'center', paddingTop: primitives.spacingMd },
+  scrollButton: {
+    alignItems: 'center',
+    borderRadius: 20,
+    borderWidth: 1,
+    elevation: 2,
+    height: 40,
+    justifyContent: 'center',
+    shadowColor: '#000000',
+    shadowOffset: { height: 2, width: 0 },
+    shadowOpacity: 0.14,
+    shadowRadius: 3,
+    width: 40,
+  },
+  scrollButtonContainer: { alignItems: 'center', left: 0, position: 'absolute', right: 0 },
+});

package/src/ai-components/conversation/list/useChatListController.ts

@@ -0,0 +1,91 @@
+import { type RefObject, useCallback, useRef } from 'react';
+
+import { useKeyboardScrollToEnd } from '@legendapp/list/keyboard';
+import type { LegendListRef } from '@legendapp/list/react-native';
+
+import { useEndInView } from './useEndInView';
+import { useKeyboardFrame } from './useKeyboardOverlap';
+import { useLoadOlder } from './useLoadOlder';
+import { usePinnedAnchor } from './usePinnedAnchor';
+
+import { useReduceMotion } from '../../voice-visualization/useReduceMotion';
+
+export type ChatListControllerOptions<T> = {
+  /** The key of the row to pin to the top, such as the latest question's. */
+  anchorKey: string | undefined;
+  /** The room for a composer floating over the bottom of the list. */
+  bottomInset: number;
+  data: readonly T[];
+  keyExtractor: (item: T) => string;
+  listRef: RefObject<LegendListRef | null>;
+  /** Loads the rows before the first one. `undefined` once there are none left. */
+  loadOlderMessages?: () => Promise<void> | void;
+};
+
+/**
+ * How a chat list behaves, apart from how it looks: the row to pin, whether the end is in view,
+ * and loading older rows. Renders nothing: `listProps` go on a LegendList given `listRef`, and
+ * the rest is for the views around it. Any LegendList that keeps `anchoredEndSpace` works.
+ */
+export const useChatListController = <T>({
+  anchorKey,
+  bottomInset,
+  data,
+  keyExtractor,
+  listRef,
+  loadOlderMessages,
+}: ChatListControllerOptions<T>) => {
+  const reduceMotion = useReduceMotion();
+  // The list's positions leave its header out: the spinner while older messages load.
+  const headerSize = useRef(0);
+
+  // How far above the bottom of the screen the list ends, which the keyboard reaches past.
+  const keyboardOffset = useRef(0);
+  const checkEnd = useRef<() => void>(undefined);
+  const keyboard = useKeyboardFrame(() => checkEnd.current?.());
+  const { isEndInView, scheduleCheckEnd } = useEndInView({
+    bottomInset,
+    headerSize,
+    keyboard,
+    keyboardOffset,
+    listRef,
+  });
+  checkEnd.current = scheduleCheckEnd;
+  const { anchoredEndSpace, onMetricsChange } = usePinnedAnchor({
+    anchorKey,
+    data,
+    headerSize,
+    keyExtractor,
+    listRef,
+    onAnchorLayout: scheduleCheckEnd,
+  });
+  const loadOlder = useLoadOlder({ listRef, loadOlderMessages });
+
+  // Holds the keyboard's own adjustments of the list still while it scrolls, so they don't stop it
+  // short of the end above the keyboard.
+  const { freeze, scrollMessageToEnd } = useKeyboardScrollToEnd({ listRef });
+  const scrollToEnd = useCallback(() => {
+    void scrollMessageToEnd({ animated: !reduceMotion, closeKeyboard: false });
+  }, [reduceMotion, scrollMessageToEnd]);
+
+  return {
+    isEndInView,
+    /** The keyboard, for views that ride it, such as the button back to the latest row. */
+    keyboard,
+    /** How far above the bottom of the screen the list ends; the list's view sets it. */
+    keyboardOffset,
+    /** Whether older rows load as the list nears its start, so it shows that they are loading. */
+    loadsOlder: !!loadOlder,
+    listProps: {
+      anchoredEndSpace,
+      freeze,
+      // The list growing or shrinking, such as under a taller composer, can bring its end in or out of view.
+      onLayout: scheduleCheckEnd,
+      onItemSizeChanged: scheduleCheckEnd,
+      onMetricsChange,
+      onScroll: scheduleCheckEnd,
+      ...loadOlder,
+    },
+    scrollToEnd,
+  };
+};

package/src/ai-components/conversation/list/useEndInView.ts

@@ -0,0 +1,61 @@
+import { type RefObject, useCallback, useEffect, useRef, useState } from 'react';
+
+import type { SharedValue } from 'react-native-reanimated';
+
+import type { LegendListRef } from '@legendapp/list/react-native';
+
+import { type KeyboardFrame, keyboardOverlapOf } from './useKeyboardOverlap';
+
+// How far from the end still counts as at the end.
+const END_SLACK = 32;
+
+export type UseEndInViewOptions = {
+  /** The room for a composer floating over the bottom of the list, which is not in view. */
+  bottomInset: number;
+  /** The height of the list's header, which its positions leave out. */
+  headerSize: RefObject<number>;
+  /** The keyboard, which covers the bottom of the list by as much as it reaches over it. */
+  keyboard: SharedValue<KeyboardFrame>;
+  /** How far above the bottom of the screen the list ends. */
+  keyboardOffset: RefObject<number>;
+  listRef: RefObject<LegendListRef | null>;
+};
+
+/**
+ * Whether the end of the last row's content is in view: not the room the anchored latest turn
+ * leaves under a short reply, nor the room for the floating composer. Call `scheduleCheckEnd`
+ * whenever that may have changed: a scroll, or a row changing size without one, such as an answer
+ * typing out, or the keyboard moving. It checks once a frame at most.
+ */
+export const useEndInView = ({
+  bottomInset,
+  headerSize,
+  keyboard,
+  keyboardOffset,
+  listRef,
+}: UseEndInViewOptions) => {
+  const [isEndInView, setIsEndInView] = useState(true);
+  const bottomInsetRef = useRef(bottomInset);
+  bottomInsetRef.current = bottomInset;
+  const checkEnd = useCallback(() => {
+    const state = listRef.current?.getState();
+    const last = (state?.data.length ?? 0) - 1;
+    if (!state || last < 0) return;
+    const end = headerSize.current + state.positionAtIndex(last) + state.sizeAtIndex(last);
+    const covered = keyboardOverlapOf(keyboard.value, keyboardOffset.current);
+    const visibleEnd = state.scroll + state.scrollLength - bottomInsetRef.current - covered;
+    setIsEndInView(end <= visibleEnd + END_SLACK);
+  }, [headerSize, keyboard, keyboardOffset, listRef]);
+
+  const checkFrame = useRef<number | undefined>(undefined);
+  const scheduleCheckEnd = useCallback(() => {
+    if (checkFrame.current !== undefined) return;
+    checkFrame.current = requestAnimationFrame(() => {
+      checkFrame.current = undefined;
+      checkEnd();
+    });
+  }, [checkEnd]);
+  useEffect(() => () => cancelAnimationFrame(checkFrame.current ?? 0), []);
+
+  return { isEndInView, scheduleCheckEnd };
+};

package/src/ai-components/conversation/list/useKeyboardOverlap.ts

@@ -0,0 +1,51 @@
+import { useRef } from 'react';
+import { KeyboardController, useKeyboardHandler } from 'react-native-keyboard-controller';
+import { runOnJS, type SharedValue, useSharedValue } from 'react-native-reanimated';
+
+export type KeyboardFrame = { height: number; progress: number };
+
+/**
+ * How far the keyboard reaches over a view that ends `offset` above the bottom of the screen, as
+ * `KeyboardAwareLegendList` reckons it: the keyboard's height less the offset, scaled by how far
+ * the keyboard is open. In a worklet or on the JS thread.
+ */
+export const keyboardOverlapOf = (keyboard: KeyboardFrame, offset: number) => {
+  'worklet';
+  return Math.max(0, keyboard.height - offset * keyboard.progress);
+};
+
+/**
+ * The keyboard's height and how far it is open, as it moves. `onSettled` runs on the JS thread
+ * once it has finished moving.
+ */
+export const useKeyboardFrame = (onSettled?: () => void): SharedValue<KeyboardFrame> => {
+  const initial = KeyboardController.state()?.height ?? 0;
+  const keyboard = useSharedValue<KeyboardFrame>({
+    height: initial,
+    progress: initial > 0 ? 1 : 0,
+  });
+  const settled = useRef(onSettled);
+  settled.current = onSettled;
+  const reportSettled = () => settled.current?.();
+
+  useKeyboardHandler(
+    {
+      onEnd: (event) => {
+        'worklet';
+        keyboard.value = { height: event.height, progress: event.progress };
+        runOnJS(reportSettled)();
+      },
+      onInteractive: (event) => {
+        'worklet';
+        keyboard.value = { height: event.height, progress: event.progress };
+      },
+      onMove: (event) => {
+        'worklet';
+        keyboard.value = { height: event.height, progress: event.progress };
+      },
+    },
+    [],
+  );
+
+  return keyboard;
+};

package/src/ai-components/conversation/list/useLoadOlder.ts

@@ -0,0 +1,97 @@
+import { type RefObject, useCallback, useEffect, useRef } from 'react';
+
+import type { LegendListRef } from '@legendapp/list/react-native';
+
+// How long the spinner above the turns stays in view before older messages load, so a list that
+// opens at its end does not load for the frame its start shows.
+const LOAD_OLDER_DELAY_MS = 300;
+// How long to wait before asking again after loading older messages failed.
+const LOAD_OLDER_RETRY_MS = 3000;
+// How close to the start, as a share of the list's height, the spinner counts as in view.
+const START_THRESHOLD = 0.1;
+
+export type UseLoadOlderOptions = {
+  listRef: RefObject<LegendListRef | null>;
+  /** Loads the rows before the first one. `undefined` once there are none left. */
+  loadOlderMessages?: () => Promise<void> | void;
+};
+
+/**
+ * Loads older messages once the spinner above the turns has been in view a moment, and again
+ * while it stays in view after a load that failed, or brought nothing while there is more. Only
+ * while the list is at rest: on iOS, what arrives above while a finger holds the list, or while
+ * it glides or bounces, pushes what is in view down rather than staying out of sight.
+ *
+ * Returns the list's handlers for it, or none while there is nothing to load.
+ */
+export const useLoadOlder = ({ listRef, loadOlderMessages }: UseLoadOlderOptions) => {
+  const dragging = useRef(false);
+  const gliding = useRef(false);
+  const loadOlderRef = useRef(loadOlderMessages);
+  loadOlderRef.current = loadOlderMessages;
+  const loading = useRef(false);
+  const loadTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const mounted = useRef(true);
+  const scheduleLoadOlder = useCallback(
+    (delay: number) => {
+      clearTimeout(loadTimer.current);
+      loadTimer.current = setTimeout(async () => {
+        const load = loadOlderRef.current;
+        if (dragging.current || gliding.current) return;
+        if (loading.current || !load || !listRef.current?.getState().isNearStart) return;
+        loading.current = true;
+        let failed = false;
+        try {
+          await load();
+        } catch {
+          failed = true;
+        }
+        loading.current = false;
+        if (mounted.current) {
+          scheduleLoadOlder(failed ? LOAD_OLDER_RETRY_MS : LOAD_OLDER_DELAY_MS);
+        }
+      }, delay);
+    },
+    [listRef],
+  );
+  const onStartReached = useCallback(
+    () => scheduleLoadOlder(LOAD_OLDER_DELAY_MS),
+    [scheduleLoadOlder],
+  );
+  // When the list comes to rest, a load the spinner asked for while it moved goes ahead. A glide
+  // that follows the drag starts before the delay is up, and asks again when it ends.
+  // A drag that stops a glide ends it, which may not say so itself.
+  const onScrollBeginDrag = useCallback(() => {
+    dragging.current = true;
+    gliding.current = false;
+  }, []);
+  const onScrollEndDrag = useCallback(() => {
+    dragging.current = false;
+    scheduleLoadOlder(LOAD_OLDER_DELAY_MS);
+  }, [scheduleLoadOlder]);
+  const onMomentumScrollBegin = useCallback(() => {
+    gliding.current = true;
+  }, []);
+  const onMomentumScrollEnd = useCallback(() => {
+    gliding.current = false;
+    scheduleLoadOlder(LOAD_OLDER_DELAY_MS);
+  }, [scheduleLoadOlder]);
+
+  useEffect(
+    () => () => {
+      mounted.current = false;
+      clearTimeout(loadTimer.current);
+    },
+    [],
+  );
+
+  if (!loadOlderMessages) return undefined;
+  return {
+    onMomentumScrollBegin,
+    onMomentumScrollEnd,
+    onScrollBeginDrag,
+    onScrollEndDrag,
+    onStartReached,
+    onStartReachedThreshold: START_THRESHOLD,
+  };
+};

package/src/ai-components/conversation/list/usePinnedAnchor.ts

@@ -0,0 +1,113 @@
+import { type RefObject, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+
+import type { AnchoredEndSpaceConfig, LegendListRef } from '@legendapp/list/react-native';
+
+import { useReduceMotion } from '../../voice-visualization/useReduceMotion';
+
+export type UsePinnedAnchorOptions<T> = {
+  /** The key of the row to pin to the top, such as the latest question's. */
+  anchorKey: string | undefined;
+  data: readonly T[];
+  /** The height of the list's header, which its positions leave out. */
+  headerSize: RefObject<number>;
+  keyExtractor: (item: T) => string;
+  listRef: RefObject<LegendListRef | null>;
+  /** Called once the anchor is laid out, and whenever the room the list leaves under it changes. */
+  onAnchorLayout?: () => void;
+};
+
+/**
+ * Pins a row to the top of what is visible: the list leaves room under it (`anchoredEndSpace`),
+ * and a new anchor is scrolled to once it is laid out. The keyboard-aware list keeps that room as
+ * the scroll view's inset, which follows what is below the row shrinking, and which the keyboard
+ * takes before it lifts anything.
+ */
+export const usePinnedAnchor = <T>({
+  anchorKey,
+  data,
+  headerSize,
+  keyExtractor,
+  listRef,
+  onAnchorLayout,
+}: UsePinnedAnchorOptions<T>) => {
+  const reduceMotion = useReduceMotion();
+  const onAnchorLayoutRef = useRef(onAnchorLayout);
+  onAnchorLayoutRef.current = onAnchorLayout;
+
+  // Where to scroll once the anchor is laid out: a new question pins to the top, and a
+  // conversation replaced as a whole opens at its end.
+  const pendingScroll = useRef<{ animated: boolean; key: string; toEnd: boolean } | undefined>(
+    undefined,
+  );
+  const shown = useRef<{ anchorKey?: string; mounted: boolean }>({ mounted: false });
+  useLayoutEffect(() => {
+    const previous = shown.current;
+    shown.current = { anchorKey, mounted: true };
+    if (!previous.mounted || anchorKey === undefined || anchorKey === previous.anchorKey) {
+      return;
+    }
+    const continues =
+      previous.anchorKey !== undefined &&
+      data.some((item) => keyExtractor(item) === previous.anchorKey);
+    pendingScroll.current = continues
+      ? { animated: !reduceMotion, key: anchorKey, toEnd: false }
+      : { animated: false, key: anchorKey, toEnd: true };
+  }, [anchorKey, data, keyExtractor, reduceMotion]);
+
+  const scrollToPending = useCallback(
+    (key: string | undefined) => {
+      const target = pendingScroll.current;
+      const list = listRef.current;
+      if (!target || !list || key !== target.key) return;
+      pendingScroll.current = undefined;
+      // The keyboard-aware list keeps the room under the anchor as the scroll view's inset, which
+      // it sets on the UI thread a frame or two after the room changes. iOS stops a scroll at the
+      // inset it has when the scroll starts, so a scroll started now stops short of the top.
+      requestAnimationFrame(() =>
+        requestAnimationFrame(() => {
+          const current = listRef.current;
+          if (target.toEnd) {
+            void current?.scrollToEnd({ animated: false });
+            return;
+          }
+          void current?.scrollToKey({
+            animated: target.animated,
+            key: target.key,
+            viewPosition: 0,
+          });
+        }),
+      );
+    },
+    [listRef],
+  );
+
+  // The spinner above the turns: the list's positions leave it out.
+  const onMetricsChange = useCallback(
+    ({ headerSize: size }: { headerSize: number }) => {
+      headerSize.current = size;
+    },
+    [headerSize],
+  );
+
+  const anchorIndex = useMemo(
+    () =>
+      anchorKey === undefined ? -1 : data.findIndex((item) => keyExtractor(item) === anchorKey),
+    [anchorKey, data, keyExtractor],
+  );
+  const anchoredEndSpace = useMemo<AnchoredEndSpaceConfig | undefined>(
+    () =>
+      anchorIndex >= 0
+        ? {
+            anchorIndex,
+            onReady: ({ anchorKey: readyKey }) => {
+              scrollToPending(readyKey);
+              onAnchorLayoutRef.current?.();
+            },
+            onSizeChanged: () => onAnchorLayoutRef.current?.(),
+          }
+        : undefined,
+    [anchorIndex, scrollToPending],
+  );
+
+  return { anchoredEndSpace, onMetricsChange };
+};