feat: implement swipable registry

Author: isekovanic

package/src/components/ChannelList/ChannelList.tsx

@@ -26,6 +26,7 @@ import {
   ChannelsProvider,
 } from '../../contexts/channelsContext/ChannelsContext';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { SwipeRegistryProvider } from '../../contexts/swipeableContext/SwipeRegistryContext';
 import type { ChannelListEventListenerOptions } from '../../types/types';
 import { ChannelPreview } from '../ChannelPreview/ChannelPreview';
 import { EmptyStateIndicator as EmptyStateIndicatorDefault } from '../Indicators/EmptyStateIndicator';
@@ -423,7 +424,9 @@ export const ChannelList = (props: ChannelListProps) => {
 
   return (
     <ChannelsProvider value={channelsContext}>
-      <List />
+      <SwipeRegistryProvider>
+        <List />
+      </SwipeRegistryProvider>
     </ChannelsProvider>
   );
 };

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -36,7 +36,7 @@ export const ChannelPreview = (props: ChannelPreviewProps) => {
   const message = translatedLastMessage ? translatedLastMessage : lastMessage;
 
   return (
-    <SwipableWrapper>
+    <SwipableWrapper swipeableId={channel.id}>
       <Preview channel={channel} muted={muted} unread={unread} lastMessage={message} />
     </SwipableWrapper>
   );

package/src/components/UIComponents/SwipableWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useCallback } from 'react';
+import React, { PropsWithChildren, useCallback, useEffect, useRef } from 'react';
 import { StyleSheet } from 'react-native';
 
 import Animated, {
@@ -9,9 +9,13 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import ReanimatedSwipeable, {
+  SwipeDirection,
+  SwipeableMethods,
   SwipeableProps,
 } from 'react-native-gesture-handler/ReanimatedSwipeable';
 
+import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
+
 const ACTION_WIDTH = 50;
 const DEFAULT_RIGHT_ACTIONS_WIDTH = ACTION_WIDTH * 2;
 
@@ -23,6 +27,7 @@ const animationOptions = {
 };
 
 type SwipableWrapperProps = PropsWithChildren<{
+  swipeableId?: string;
   swipableProps?: SwipeableProps;
 }>;
 
@@ -44,24 +49,55 @@ const DefaultRightActions = ({ translation }: { translation: SharedValue<number>
   );
 };
 
-export const SwipableWrapper = ({ children, swipableProps }: SwipableWrapperProps) => {
+export const SwipableWrapper = ({ children, swipeableId, swipableProps }: SwipableWrapperProps) => {
+  const swipeRegistry = useSwipeRegistryContext();
+  const swipeableRef = useRef<SwipeableMethods | null>(null);
+
+  const {
+    onSwipeableWillOpen: onSwipeableWillOpenFromProps,
+    renderRightActions: renderRightActionsFromProps,
+    ...restSwipableProps
+  } = swipableProps ?? {};
+
   const defaultRenderRightActions = useCallback(
     (_progress: SharedValue<number>, translation: SharedValue<number>) => (
       <DefaultRightActions translation={translation} />
     ),
     [],
   );
 
+  useEffect(() => {
+    if (!swipeRegistry || !swipeableId) {
+      return;
+    }
+
+    return swipeRegistry.registerSwipeable(swipeableId, () => {
+      swipeableRef.current?.close();
+    });
+  }, [swipeRegistry, swipeableId]);
+
+  const onSwipeableWillOpen = useCallback(
+    (direction: SwipeDirection.LEFT | SwipeDirection.RIGHT) => {
+      if (swipeRegistry && swipeableId) {
+        swipeRegistry.notifyWillOpen(swipeableId);
+      }
+      onSwipeableWillOpenFromProps?.(direction);
+    },
+    [onSwipeableWillOpenFromProps, swipeRegistry, swipeableId],
+  );
+
   return (
     <ReanimatedSwipeable
+      ref={swipeableRef}
       animationOptions={animationOptions}
+      friction={2}
+      onSwipeableWillOpen={onSwipeableWillOpen}
       overshootLeft={false}
       overshootRight={true}
       overshootFriction={16}
-      friction={2}
       renderLeftActions={undefined}
-      renderRightActions={defaultRenderRightActions}
-      {...swipableProps}
+      renderRightActions={renderRightActionsFromProps ?? defaultRenderRightActions}
+      {...restSwipableProps}
     >
       {children}
     </ReanimatedSwipeable>

package/src/contexts/swipeableContext/SwipeRegistryContext.tsx

@@ -0,0 +1,52 @@
+import React, {
+  PropsWithChildren,
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+} from 'react';
+
+type CloseSwipeable = () => void;
+
+type SwipeRegistryContextValue = {
+  notifyWillOpen: (id: string) => void;
+  registerSwipeable: (id: string, close: CloseSwipeable) => () => void;
+};
+
+const SwipeRegistryContext = createContext<SwipeRegistryContextValue | undefined>(undefined);
+
+export const SwipeRegistryProvider = ({ children }: PropsWithChildren) => {
+  const swipeablesRef = useRef<Map<string, CloseSwipeable>>(new Map());
+
+  const registerSwipeable = useCallback((id: string, close: CloseSwipeable) => {
+    swipeablesRef.current.set(id, close);
+
+    return () => {
+      const registered = swipeablesRef.current.get(id);
+      if (registered === close) {
+        swipeablesRef.current.delete(id);
+      }
+    };
+  }, []);
+
+  const notifyWillOpen = useCallback((id: string) => {
+    for (const [registeredId, close] of swipeablesRef.current.entries()) {
+      if (registeredId !== id) {
+        close();
+      }
+    }
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      notifyWillOpen,
+      registerSwipeable,
+    }),
+    [notifyWillOpen, registerSwipeable],
+  );
+
+  return <SwipeRegistryContext.Provider value={value}>{children}</SwipeRegistryContext.Provider>;
+};
+
+export const useSwipeRegistryContext = () => useContext(SwipeRegistryContext);