diff --git a/native/chat/swipeable-thread.react.js b/native/chat/swipeable-thread.react.js
index f08d7bda2..94df83a3c 100644
--- a/native/chat/swipeable-thread.react.js
+++ b/native/chat/swipeable-thread.react.js
@@ -1,94 +1,98 @@
// @flow
import MaterialIcon from '@expo/vector-icons/MaterialCommunityIcons.js';
import { useNavigation } from '@react-navigation/native';
import * as React from 'react';
import useToggleUnreadStatus from 'lib/hooks/toggle-unread-status.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
import Swipeable from '../components/swipeable.js';
import { useColors } from '../themes/colors.js';
type Props = {
+threadInfo: ThreadInfo,
+mostRecentNonLocalMessage: ?string,
+onSwipeableWillOpen: (threadInfo: ThreadInfo) => void,
+currentlyOpenedSwipeableId?: string,
+iconSize: number,
+children: React.Node,
};
function SwipeableThread(props: Props): React.Node {
const swipeable = React.useRef();
const navigation = useNavigation();
React.useEffect(() => {
return navigation.addListener('blur', () => {
if (swipeable.current) {
swipeable.current.close();
}
});
}, [navigation, swipeable]);
const { threadInfo, currentlyOpenedSwipeableId } = props;
React.useEffect(() => {
if (swipeable.current && threadInfo.id !== currentlyOpenedSwipeableId) {
swipeable.current.close();
}
}, [currentlyOpenedSwipeableId, swipeable, threadInfo.id]);
const { onSwipeableWillOpen } = props;
const onSwipeableRightWillOpen = React.useCallback(() => {
onSwipeableWillOpen(threadInfo);
}, [onSwipeableWillOpen, threadInfo]);
const colors = useColors();
const { mostRecentNonLocalMessage, iconSize } = props;
const swipeableClose = React.useCallback(() => {
if (swipeable.current) {
swipeable.current.close();
}
}, []);
const toggleUnreadStatus = useToggleUnreadStatus(
threadInfo,
mostRecentNonLocalMessage,
swipeableClose,
);
const swipeableActions = React.useMemo(() => {
const isUnread = threadInfo.currentUser.unread;
return [
{
key: 'action1',
onPress: toggleUnreadStatus,
color: isUnread ? colors.vibrantRedButton : colors.vibrantGreenButton,
content: (
),
},
];
}, [
threadInfo.currentUser.unread,
toggleUnreadStatus,
colors.vibrantRedButton,
colors.vibrantGreenButton,
iconSize,
]);
- return (
-
- {props.children}
-
+ const swipeableThread = React.useMemo(
+ () => (
+
+ {props.children}
+
+ ),
+ [onSwipeableRightWillOpen, props.children, swipeableActions],
);
+ return swipeableThread;
}
export default SwipeableThread;