using alternate touchableopacity due to leaking callback warning

app/mobile/ios/Podfile.lock

@@ -321,7 +321,7 @@ PODS:
     - React-jsi (= 0.69.5)
     - React-logger (= 0.69.5)
     - React-perflogger (= 0.69.5)
-  - RNGestureHandler (2.6.1):
+  - RNGestureHandler (2.7.0):
     - React-Core
   - RNImageCropPicker (0.38.0):
     - React-Core
@@ -562,7 +562,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: 42b34fde72e42446d9b08d2b9a3ddc2fa9ac6189
   React-runtimeexecutor: c778439c3c430a5719d027d3c67423b390a221fe
   ReactCommon: ab1003b81be740fecd82509c370a45b1a7dda0c1
-  RNGestureHandler: 28ad20bf02257791f7f137b31beef34b9549f54b
+  RNGestureHandler: 7673697e7c0e9391adefae4faa087442bc04af33
   RNImageCropPicker: ffbba608264885c241cbf3a8f78eb7aeeb978241
   RNReanimated: 7faa787e8d4493fbc95fab2ad331fa7625828cfa
   TOCropViewController: 3105367e808b7d3d886a74ff59bf4804e7d3ab38

app/mobile/package.json

@@ -25,7 +25,7 @@
     "react-native-base64": "^0.2.1",
     "react-native-color-picker": "^0.6.0",
     "react-native-document-picker": "^8.1.1",
-    "react-native-gesture-handler": "^2.6.1",
+    "react-native-gesture-handler": "^2.7.0",
     "react-native-image-crop-picker": "^0.38.0",
     "react-native-reanimated": "^2.10.0",
     "react-native-safe-area-context": "^4.3.3",

app/mobile/src/session/channels/channelItem/ChannelItem.jsx

@@ -1,4 +1,5 @@
-import { Text, TouchableOpacity, View } from 'react-native';
+import { Text, View } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
 import { Logo } from 'utils/Logo';
 import { styles } from './ChannelItem.styled';
 import { useChannelItem } from './useChannelItem.hook';

app/mobile/src/session/conversation/Conversation.jsx

@@ -1,6 +1,6 @@
 import { Platform, TextInput, View, TouchableOpacity, Text, } from 'react-native';
 import { FlatList, ScrollView } from '@stream-io/flat-list-mvcp';
-import { useState, useRef, useEffect } from 'react';
+import { memo, useState, useRef, useEffect } from 'react';
 import { useConversation } from './useConversation.hook';
 import { styles } from './Conversation.styled';
 import { useNavigation } from '@react-navigation/native';
@@ -33,6 +33,14 @@ export function ConversationHeader({ closeConversation, openDetails }) {
   );
 }
 
+const RenderItem = memo((props: { item: number }) => {
+  return (<TopicItem item={props.item} />)
+});
+
+const renderItemHandler = ({ item }: { item: number }) => {
+  return <RenderItem item={item} />
+}
+
 export function ConversationBody() {
   const { state, actions } = useConversation();
 
@@ -56,7 +64,7 @@ export function ConversationBody() {
         onScrollBeginDrag={ Platform.OS !== 'ios' ? noop : actions.unlatch }
         maintainVisibleContentPosition={ state.latched ? null : { minIndexForVisibile: 2, } }
         inverted={true}
-        renderItem={({item}) => (<TopicItem item={item} />)}
+        renderItem={renderItemHandler}
         keyExtractor={item => item.topicId}
       />
       <View>

app/mobile/src/session/conversation/topicItem/TopicItem.jsx

@@ -1,4 +1,4 @@
-import { FlatList, ActivityIndicator, View, Text, TouchableOpacity } from 'react-native';
+import { FlatList, View, Text, TouchableOpacity } from 'react-native';
 import { useTopicItem } from './useTopicItem.hook';
 import { styles } from './TopicItem.styled';
 import { Logo } from 'utils/Logo';
@@ -6,6 +6,7 @@ import Colors from 'constants/Colors';
 import { VideoThumb } from './videoThumb/VideoThumb';
 import { AudioThumb } from './audioThumb/AudioThumb';
 import { ImageThumb } from './imageThumb/ImageThumb';
+import AntIcons from '@expo/vector-icons/AntDesign';
 
 export function TopicItem({ item }) {
 
@@ -41,10 +42,10 @@ export function TopicItem({ item }) {
             />
           )}
           { state.transform === 'incomplete' && (
-            <ActivityIndicator size="large" color={Colors.background} />
+            <AntIcons name="cloudo" size={32} color={Colors.background} />
           )}
           { state.transform === 'error' && (
-            <ActivityIndicator size="large" color={Colors.alert} />
+            <AntIcons name="cloudo" size={32} color={Colors.alert} />
           )}
           { state.message && (
             <Text style={styles.message}>{ state.message }</Text>
@@ -52,7 +53,7 @@ export function TopicItem({ item }) {
         </>
       )}
       { state.status !== 'confirmed' && (
-        <ActivityIndicator size="large" color={Colors.divider} />
+        <AntIcons name="cloudo" size={32} color={Colors.divider} />
       )}
     </View>
   );