stream-chat-react-native-core 8.13.7 → 9.0.0-beta.2

package/src/components/UIComponents/PortalWhileClosingView.tsx

@@ -0,0 +1,139 @@
+import React, { ReactNode, useEffect, useRef } from 'react';
+import { Platform, View } from 'react-native';
+
+import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Portal } from 'react-native-teleport';
+
+import { useStableCallback } from '../../hooks';
+import {
+  clearClosingPortalLayout,
+  createClosingPortalLayoutRegistrationId,
+  setClosingPortalLayout,
+  useShouldTeleportToClosingPortal,
+} from '../../state-store';
+
+type PortalWhileClosingViewProps = {
+  /**
+   * Content that should render in place normally and teleport to a closing portal host
+   * while the message overlay is closing.
+   */
+  children: ReactNode;
+  /**
+   * Name of the closing `PortalHost` in `MessageOverlayHostLayer`.
+   * This key is also used in the closing layout registry.
+   */
+  portalHostName: string;
+  /**
+   * Stable portal instance name used by `react-native-teleport` to move this content
+   * between the in-place tree and the closing host.
+   */
+  portalName: string;
+};
+
+/**
+ * Keeps wrapped UI above the message overlay during close animation by teleporting it to a closing portal host.
+ *
+ * Why this is needed:
+ *
+ * When the overlay closes, the animated message can visually pass over fixed UI (for example composer/header).
+ * This wrapper moves that UI into the overlay host layer for the closing phase, so stacking stays correct.
+ *
+ * To use it, simply wrap any view that should remain on top while the overlay is closing, and pass a `portalHostName`
+ * and a `portalName`. Once the wrapped view has a valid measured layout, it can participate in the closing host layer.
+ *
+ * Behavior:
+ * - renders children in place during normal operation
+ * - registers absolute layout for `portalHostName` once a valid measurement exists
+ * - while overlay state is `closing`, teleports children to the matching closing host
+ * - renders a local placeholder while closing to preserve original layout space
+ *
+ * Stack presence only starts after first valid measurement. That prevents unmeasured entries from taking over a host
+ * slot and rendering with incomplete geometry.
+ *
+ * Note: As the `PortalWhileClosingView` relies heavily on being able to calculate the layout and positioning
+ * properties of its children automatically, make sure that you do not wrap absolutely positioned views with
+ * it as positioning parameters specifically will not be calculated correctly as the absolute position of
+ * the immediate child will be towards its immediate parent (which is our `Portal` view). Instead, wrap its
+ * children directly (the non-absolutely positioned ones). Since we use `measureInWindow` to get a hold of
+ * the initial measurements, we'll always have the correct position of the relevant content.
+ *
+ * @param props.children content to render and teleport while closing
+ * @param props.portalHostName closing host slot name used for layout registration and portal target
+ * @param props.portalName stable portal instance name for `react-native-teleport`
+ */
+export const PortalWhileClosingView = ({
+  children,
+  portalHostName,
+  portalName,
+}: PortalWhileClosingViewProps) => {
+  const containerRef = useRef<View | null>(null);
+  const registrationIdRef = useRef<string | null>(null);
+  const placeholderLayout = useSharedValue({ h: 0, w: 0 });
+  const insets = useSafeAreaInsets();
+
+  if (!registrationIdRef.current) {
+    registrationIdRef.current = createClosingPortalLayoutRegistrationId();
+  }
+
+  const registrationId = registrationIdRef.current;
+  const shouldTeleport = useShouldTeleportToClosingPortal(portalHostName, registrationId);
+
+  const syncPortalLayout = useStableCallback(() => {
+    containerRef.current?.measureInWindow((x, y, width, height) => {
+      const absolute = {
+        x,
+        y: y + (Platform.OS === 'android' ? insets.top : 0),
+      };
+
+      if (!width || !height) {
+        return;
+      }
+
+      placeholderLayout.value = { h: height, w: width };
+
+      setClosingPortalLayout(portalHostName, registrationId, {
+        ...absolute,
+        h: height,
+        w: width,
+      });
+    });
+  });
+
+  useEffect(() => {
+    return () => {
+      clearClosingPortalLayout(portalHostName, registrationId);
+    };
+  }, [portalHostName, registrationId]);
+
+  useEffect(() => {
+    // Measure once after mount and layout settle.
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        syncPortalLayout();
+      });
+    });
+  }, [insets.top, portalHostName, syncPortalLayout]);
+
+  const placeholderStyle = useAnimatedStyle(() => ({
+    height: placeholderLayout.value.h,
+    width: placeholderLayout.value.w > 0 ? placeholderLayout.value.w : '100%',
+  }));
+
+  return (
+    <>
+      <Portal hostName={shouldTeleport ? portalHostName : undefined} name={portalName}>
+        <View collapsable={false} ref={containerRef} onLayout={syncPortalLayout}>
+          {children}
+        </View>
+      </Portal>
+      {shouldTeleport ? (
+        <Animated.View
+          pointerEvents='none'
+          style={placeholderStyle}
+          testID={`portal-while-closing-placeholder-${portalName}`}
+        />
+      ) : null}
+    </>
+  );
+};

package/src/components/UIComponents/Spinner.tsx

@@ -11,15 +11,6 @@ import Animated, {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Loading } from '../../icons/Loading';
 
-const styles = StyleSheet.create({
-  spinner: {
-    height: 16,
-    justifyContent: 'center',
-    margin: 5,
-    width: 16,
-  },
-});
-
 export type SpinnerProps = {
   height?: number;
   style?: StyleProp<ViewStyle>;
@@ -31,10 +22,7 @@ export const Spinner = (props: SpinnerProps) => {
   const { height, style, width } = props;
 
   const {
-    theme: {
-      colors: { accent_blue },
-      spinner,
-    },
+    theme: { spinner, semantics },
   } = useTheme();
 
   const animatedStyle = useAnimatedStyle<ViewStyle>(() => ({
@@ -58,9 +46,18 @@ export const Spinner = (props: SpinnerProps) => {
 
   return (
     <Animated.View style={[style, styles.spinner, animatedStyle, spinner, { height, width }]}>
-      <Loading height={height} stopColor={accent_blue} width={width} />
+      <Loading height={height} stopColor={semantics.accentPrimary} width={width} />
     </Animated.View>
   );
 };
 
 Spinner.displayName = 'Spinner{spinner}';
+
+const styles = StyleSheet.create({
+  spinner: {
+    height: 16,
+    justifyContent: 'center',
+    margin: 5,
+    width: 16,
+  },
+});

package/src/components/UIComponents/StreamBottomSheetModalFlatList.tsx

@@ -0,0 +1,34 @@
+import React, { useRef } from 'react';
+import { FlatListProps } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
+import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
+
+import { useBottomSheetContext } from '../../contexts/bottomSheetContext/BottomSheetContext';
+import { useStableCallback } from '../../hooks';
+
+type StreamBottomSheetModalFlatListProps<ItemT> = FlatListProps<ItemT>;
+
+export const StreamBottomSheetModalFlatList = <ItemT,>({
+  scrollEnabled: scrollEnabledProp,
+  ...props
+}: StreamBottomSheetModalFlatListProps<ItemT>) => {
+  const { currentSnapIndex } = useBottomSheetContext();
+  const listRef = useRef<FlatList<ItemT>>(null);
+
+  const setNativeScrollEnabled = useStableCallback((value: boolean) =>
+    listRef.current?.setNativeProps({ scrollEnabled: value }),
+  );
+
+  useAnimatedReaction(
+    () => currentSnapIndex.value,
+    (value, prev) => {
+      if (value === prev || scrollEnabledProp !== undefined) {
+        return;
+      }
+      runOnJS(setNativeScrollEnabled)(value === 1);
+    },
+    [currentSnapIndex],
+  );
+
+  return <FlatList ref={listRef} {...props} scrollEnabled={false} />;
+};

package/src/components/UIComponents/SwipableWrapper.tsx

@@ -0,0 +1,169 @@
+import React, { PropsWithChildren, useEffect, useMemo, useRef } from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { Pressable } from 'react-native-gesture-handler';
+import Animated, {
+  Extrapolation,
+  SharedValue,
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+
+import ReanimatedSwipeable, {
+  SwipeDirection,
+  SwipeableMethods,
+  SwipeableProps,
+} from 'react-native-gesture-handler/ReanimatedSwipeable';
+
+import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
+import { useStableCallback } from '../../hooks';
+
+const ACTION_WIDTH = 80;
+const MAX_RIGHT_ACTIONS_WIDTH = 240;
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+const animationOptions = {
+  damping: 24,
+  mass: 1,
+  overshootClamping: false,
+  stiffness: 180,
+};
+
+export type SwipableActionItem = {
+  action: () => void | Promise<void>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  Content: React.ComponentType<Record<string, unknown>>;
+  id: string;
+};
+
+export type SwipableWrapperProps = PropsWithChildren<{
+  items?: SwipableActionItem[];
+  swipeableId?: string;
+  swipableProps?: SwipeableProps;
+}>;
+
+export const getRightActionsLayout = (itemCount: number) => {
+  if (!itemCount) {
+    return { containerWidth: 0, itemWidth: 0 };
+  }
+
+  const containerWidth = Math.min(itemCount * ACTION_WIDTH, MAX_RIGHT_ACTIONS_WIDTH);
+  const itemWidth = containerWidth / itemCount;
+
+  return { containerWidth, itemWidth };
+};
+
+export const RightActions = ({
+  items,
+  translation,
+}: {
+  items: SwipableActionItem[];
+  translation: SharedValue<number>;
+}) => {
+  const { containerWidth, itemWidth } = useMemo(
+    () => getRightActionsLayout(items.length),
+    [items.length],
+  );
+
+  const animatedActionWidthStyle = useAnimatedStyle(() => ({
+    width: interpolate(
+      -translation.value,
+      [0, containerWidth, containerWidth + 40],
+      [0, itemWidth, itemWidth + 8],
+      Extrapolation.CLAMP,
+    ),
+  }));
+
+  const animatedIconScaleStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        scale: interpolate(
+          -translation.value,
+          [0, containerWidth, containerWidth + 40],
+          [0, 1, 1],
+          Extrapolation.CLAMP,
+        ),
+      },
+    ],
+  }));
+
+  return (
+    <Animated.View style={[styles.rightActionsContainer, { width: containerWidth }]}>
+      {items.map((item) => {
+        const Content = item.Content;
+        return (
+          <AnimatedPressable
+            key={item.id}
+            onPress={item.action}
+            style={[styles.action, animatedActionWidthStyle]}
+          >
+            <View style={item.contentContainerStyle}>
+              <Animated.View style={animatedIconScaleStyle}>
+                <Content />
+              </Animated.View>
+            </View>
+          </AnimatedPressable>
+        );
+      })}
+    </Animated.View>
+  );
+};
+
+export const SwipableWrapper = ({ children, swipeableId, swipableProps }: SwipableWrapperProps) => {
+  const swipeRegistry = useSwipeRegistryContext();
+  const swipeableRef = useRef<SwipeableMethods | null>(null);
+
+  useEffect(() => {
+    if (!swipeRegistry || !swipeableId) {
+      return;
+    }
+
+    return swipeRegistry.registerSwipeable(swipeableId, () => {
+      swipeableRef.current?.close();
+    });
+  }, [swipeRegistry, swipeableId]);
+
+  const onSwipeableOpenStartDrag = useStableCallback(
+    (direction: SwipeDirection.LEFT | SwipeDirection.RIGHT) => {
+      if (swipeRegistry && swipeableId) {
+        swipeRegistry.notifyWillOpen(swipeableId);
+      }
+      swipableProps?.onSwipeableWillOpen?.(direction);
+    },
+  );
+
+  const onSwipeableWillClose = useStableCallback(() => {
+    if (swipeableId) {
+      swipeRegistry?.updateOpenTracker(swipeableId, false);
+    }
+  });
+
+  return (
+    <ReanimatedSwipeable
+      ref={swipeableRef}
+      onSwipeableOpenStartDrag={onSwipeableOpenStartDrag}
+      animationOptions={animationOptions}
+      friction={1.5}
+      onSwipeableWillClose={onSwipeableWillClose}
+      overshootLeft={false}
+      overshootRight={true}
+      overshootFriction={16}
+      renderLeftActions={undefined}
+      {...swipableProps}
+    >
+      {children}
+    </ReanimatedSwipeable>
+  );
+};
+
+const styles = StyleSheet.create({
+  rightActionsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    overflow: 'visible',
+  },
+  action: {
+    overflow: 'hidden',
+    width: 0,
+  },
+});

package/src/components/UIComponents/__tests__/PortalWhileClosingView.test.tsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { act, cleanup, render, screen } from '@testing-library/react-native';
+
+import * as stateStore from '../../../state-store';
+import { PortalWhileClosingView } from '../PortalWhileClosingView';
+
+jest.mock('../../../state-store', () => {
+  const actual = jest.requireActual('../../../state-store');
+  const createClosingPortalLayoutRegistrationId = jest.fn(() => 'registration-1');
+
+  return new Proxy(actual, {
+    get(target, prop, receiver) {
+      if (prop === 'createClosingPortalLayoutRegistrationId') {
+        return createClosingPortalLayoutRegistrationId;
+      }
+
+      return Reflect.get(target, prop, receiver);
+    },
+  });
+});
+
+const BASE_RECT = { h: 48, w: 120, x: 12, y: 24 };
+
+const flushAnimationFrameQueue = () => {
+  act(() => {
+    jest.runAllTimers();
+  });
+};
+
+const TeleportStateProbe = ({
+  hostName,
+  id,
+  testID,
+}: {
+  hostName: string;
+  id: string;
+  testID: string;
+}) => {
+  const shouldTeleport = stateStore.useShouldTeleportToClosingPortal(hostName, id);
+
+  return <Text testID={testID}>{shouldTeleport ? 'true' : 'false'}</Text>;
+};
+
+const BlacklistRegistrar = ({ hostNames }: { hostNames: string[] }) => {
+  stateStore.useClosingPortalHostBlacklist(hostNames);
+  return null;
+};
+
+describe('PortalWhileClosingView', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+
+    act(() => {
+      stateStore.finalizeCloseOverlay();
+      stateStore.overlayStore.next({
+        closing: false,
+        closingPortalHostBlacklist: [],
+        id: undefined,
+        messageId: undefined,
+      });
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+
+    act(() => {
+      stateStore.clearClosingPortalLayout('overlay-composer', 'registration-1');
+      stateStore.finalizeCloseOverlay();
+      stateStore.overlayStore.next({
+        closing: false,
+        closingPortalHostBlacklist: [],
+        id: undefined,
+        messageId: undefined,
+      });
+    });
+
+    jest.clearAllMocks();
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  it('uses the real store to teleport once the overlay is closing and this host is active', () => {
+    render(
+      <>
+        <PortalWhileClosingView portalHostName='overlay-composer' portalName='composer-portal'>
+          <Text>Composer</Text>
+        </PortalWhileClosingView>
+        <TeleportStateProbe
+          hostName='overlay-composer'
+          id='registration-1'
+          testID='teleport-state'
+        />
+      </>,
+    );
+
+    act(() => {
+      stateStore.setClosingPortalLayout('overlay-composer', 'registration-1', BASE_RECT);
+    });
+
+    expect(screen.getByTestId('teleport-state')).toHaveTextContent('false');
+    expect(screen.queryByTestId('portal-while-closing-placeholder-composer-portal')).toBeNull();
+
+    act(() => {
+      stateStore.openOverlay('message-1');
+      stateStore.closeOverlay();
+    });
+    flushAnimationFrameQueue();
+
+    expect(screen.getByTestId('teleport-state')).toHaveTextContent('true');
+    expect(screen.getByTestId('portal-while-closing-placeholder-composer-portal')).toBeTruthy();
+  });
+
+  it('keeps the portal local when the host is blacklisted', () => {
+    render(
+      <>
+        <BlacklistRegistrar hostNames={['overlay-composer']} />
+        <PortalWhileClosingView portalHostName='overlay-composer' portalName='composer-portal'>
+          <Text>Composer</Text>
+        </PortalWhileClosingView>
+        <TeleportStateProbe
+          hostName='overlay-composer'
+          id='registration-1'
+          testID='teleport-state'
+        />
+      </>,
+    );
+
+    act(() => {
+      stateStore.setClosingPortalLayout('overlay-composer', 'registration-1', BASE_RECT);
+      stateStore.openOverlay('message-1');
+      stateStore.closeOverlay();
+    });
+    flushAnimationFrameQueue();
+
+    expect(screen.getByTestId('teleport-state')).toHaveTextContent('false');
+    expect(screen.queryByTestId('portal-while-closing-placeholder-composer-portal')).toBeNull();
+  });
+
+  it('clears its registration from the real store when it unmounts', () => {
+    const { rerender } = render(
+      <>
+        <PortalWhileClosingView portalHostName='overlay-composer' portalName='composer-portal'>
+          <Text>Composer</Text>
+        </PortalWhileClosingView>
+        <TeleportStateProbe
+          hostName='overlay-composer'
+          id='registration-1'
+          testID='teleport-state'
+        />
+      </>,
+    );
+
+    act(() => {
+      stateStore.setClosingPortalLayout('overlay-composer', 'registration-1', BASE_RECT);
+      stateStore.openOverlay('message-1');
+      stateStore.closeOverlay();
+    });
+    flushAnimationFrameQueue();
+
+    expect(screen.getByTestId('teleport-state')).toHaveTextContent('true');
+
+    rerender(
+      <TeleportStateProbe
+        hostName='overlay-composer'
+        id='registration-1'
+        testID='teleport-state'
+      />,
+    );
+
+    expect(screen.getByTestId('teleport-state')).toHaveTextContent('false');
+  });
+});

package/src/components/UIComponents/index.ts

@@ -1,3 +1,6 @@
 export * from './BottomSheetModal';
+export * from './StreamBottomSheetModalFlatList';
 export * from './ImageBackground';
 export * from './Spinner';
+export * from './SwipableWrapper';
+export * from './PortalWhileClosingView';