Close swipeable on recycle

app/containers/RoomItem/RoomItem.tsx

@@ -51,9 +51,11 @@ const RoomItem = ({
 	showAvatar,
 	displayMode,
 	sourceType,
-	hideMentionStatus
+	hideMentionStatus,
+	touchableRef
 }: IRoomItemProps) => (
 	<Touchable
+		ref={touchableRef}
 		onPress={onPress}
 		onLongPress={onLongPress}
 		favorite={favorite}

app/containers/RoomItem/Touchable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import Animated, {
 	useAnimatedGestureHandler,
 	useSharedValue,
@@ -18,13 +18,15 @@ import { useWindowDimensions } from 'react-native';
 import Touch from '../Touch';
 import { ACTION_WIDTH, LONG_SWIPE, SMALL_SWIPE } from './styles';
 import { LeftActions, RightActions } from './Actions';
-import { ITouchableProps } from './interfaces';
+import { ITouchableProps, ITouchableRef } from './interfaces';
 import { useTheme } from '../../theme';
 import I18n from '../../i18n';
 import { MAX_SIDEBAR_WIDTH } from '../../lib/constants';
 import { useAppSelector } from '../../lib/hooks';
 
-const Touchable = ({
+const Touchable = forwardRef<ITouchableRef, ITouchableProps>(
+	(
+		{
 			children,
 			type,
 			onPress,
@@ -39,7 +41,9 @@ const Touchable = ({
 			isFocused,
 			swipeEnabled,
 			displayMode
-}: ITouchableProps): React.ReactElement => {
+		},
+		ref
+	): React.ReactElement => {
 		const { colors } = useTheme();
 		const { width: deviceWidth } = useWindowDimensions();
 		const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
@@ -51,11 +55,16 @@ const Touchable = ({
 		let _value = 0;
 
 		const close = () => {
+			console.log(`${rid} close`);
 			rowState.value = 0;
 			transX.value = withSpring(0, { overshootClamping: true });
 			rowOffSet.value = 0;
 		};
 
+		useImperativeHandle(ref, () => ({
+			close
+		}));
+
 		const handleToggleFav = () => {
 			if (toggleFav) {
 				toggleFav(rid, favorite);
@@ -239,6 +248,7 @@ const Touchable = ({
 				</Animated.View>
 			</LongPressGestureHandler>
 		);
-};
+	}
+);
 
 export default Touchable;

app/containers/RoomItem/index.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import I18n from '../../i18n';
 import { useAppSelector } from '../../lib/hooks';
 import { getUserPresence } from '../../lib/methods';
 import { isGroupChat } from '../../lib/methods/helpers';
 import { formatDate } from '../../lib/methods/helpers/room';
-import { IRoomItemContainerProps } from './interfaces';
+import { IRoomItemContainerProps, ITouchableRef } from './interfaces';
 import RoomItem from './RoomItem';
 import { ROW_HEIGHT, ROW_HEIGHT_CONDENSED } from './styles';
 
@@ -40,6 +40,7 @@ const RoomItemContainer = ({
 	const connected = useAppSelector(state => state.meteor.connected);
 	const userStatus = useAppSelector(state => state.activeUsers[id || '']?.status);
 	const isDirect = !!(item.t === 'd' && id && !isGroupChat(item));
+	const touchableRef = useRef<ITouchableRef>(null);
 
 	// When app reconnects, we need to fetch the rendered user's presence
 	useEffect(() => {
@@ -56,6 +57,9 @@ const RoomItemContainer = ({
 		if (!userStatus && isDirect) {
 			getUserPresence(id);
 		}
+
+		// TODO: Remove this when we have a better way to close the swipeable
+		touchableRef?.current?.close();
 	}, [item.rid]);
 
 	const handleOnPress = () => onPress(item);
@@ -79,6 +83,7 @@ const RoomItemContainer = ({
 
 	return (
 		<RoomItem
+			touchableRef={touchableRef}
 			name={name}
 			avatar={avatar}
 			isGroupChat={isGroupChat(item)}

app/containers/RoomItem/interfaces.ts

@@ -115,6 +115,7 @@ export interface IRoomItemProps extends IBaseRoomItem {
 	size?: number;
 	sourceType: IOmnichannelSource;
 	hideMentionStatus?: boolean;
+	touchableRef: React.RefObject<ITouchableRef>;
 }
 
 export interface ILastMessageProps {
@@ -126,6 +127,10 @@ export interface ILastMessageProps {
 	alert: boolean;
 }
 
+export interface ITouchableRef {
+	close: () => void;
+}
+
 export interface ITouchableProps extends IRoomItemTouchables {
 	children: JSX.Element;
 	type: SubscriptionType;