dismiss carousel with swipe

app/mobile/ios/Podfile.lock

@@ -246,7 +246,7 @@ PODS:
     - RCTTypeSafety
     - React-Core
     - ReactCommon/turbomodule/core
-  - react-native-slider (4.3.1):
+  - react-native-slider (4.3.2):
     - React-Core
   - react-native-sqlite-storage (6.0.1):
     - React-Core
@@ -547,7 +547,7 @@ SPEC CHECKSUMS:
   React-logger: 15c734997c06fe9c9b88e528fb7757601e7a56df
   react-native-document-picker: f68191637788994baed5f57d12994aa32cf8bf88
   react-native-safe-area-context: b456e1c40ec86f5593d58b275bd0e9603169daca
-  react-native-slider: d3ae4270cf8a8cc45a69912db0cc42b151560d5a
+  react-native-slider: e540525ea731783850802b7af457d8551edb0711
   react-native-sqlite-storage: f6d515e1c446d1e6d026aa5352908a25d4de3261
   react-native-video: c26780b224543c62d5e1b2a7244a5cd1b50e8253
   React-perflogger: 367418425c5e4a9f0f80385ee1eaacd2a7348f8e

app/mobile/package.json

@@ -32,6 +32,7 @@
     "react-native-safe-area-view": "^1.1.1",
     "react-native-snap-carousel": "4.0.0-beta.6",
     "react-native-sqlite-storage": "^6.0.1",
+    "react-native-swipe-gestures": "^1.0.5",
     "react-native-video": "^5.2.1",
     "react-native-web": "~0.18.7",
     "react-router-dom": "6",

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

@@ -11,6 +11,7 @@ import { AudioAsset } from './audioAsset/AudioAsset';
 import { VideoAsset } from './videoAsset/VideoAsset';
 import AntIcons from '@expo/vector-icons/AntDesign';
 import Carousel from 'react-native-snap-carousel';
+import GestureRecognizer from 'react-native-swipe-gestures';
 
 export function TopicItem({ item }) {
 
@@ -20,13 +21,13 @@ export function TopicItem({ item }) {
     return (
       <View style={styles.frame}>
         { asset.item.image && (
-          <ImageAsset topicId={item.topicId} asset={asset.item.image} onClearCarousel={() => actions.hideCarousel()} />
+          <ImageAsset topicId={item.topicId} asset={asset.item.image} />
         )}
         { asset.item.video && (
-          <VideoAsset topicId={item.topicId} asset={asset.item.video} onClearCarousel={() => actions.hideCarousel()} />
+          <VideoAsset topicId={item.topicId} asset={asset.item.video} />
         )}
         { asset.item.audio && (
-          <AudioAsset topicId={item.topicId} asset={asset.item.audio} onClearCarousel={() => actions.hideCarousel()} />
+          <AudioAsset topicId={item.topicId} asset={asset.item.audio} />
         )}
       </View>
     )
@@ -86,13 +87,15 @@ export function TopicItem({ item }) {
         onRequestClose={actions.hideCarousel}
       >
         <View style={styles.modal}>
-          <Carousel
-            data={state.assets}
-            firstItem={state.carouselIndex}
-            renderItem={renderAsset}
-            sliderWidth={state.width}
-            itemWidth={state.width}
-          />
+          <GestureRecognizer onSwipeUp={actions.hideCarousel} onSwipeDown={actions.hideCarousel}>
+            <Carousel
+              data={state.assets}
+              firstItem={state.carouselIndex}
+              renderItem={renderAsset}
+              sliderWidth={state.width}
+              itemWidth={state.width}
+            />
+          </GestureRecognizer>
         </View>
       </Modal> 
     </View>

app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx

@@ -3,11 +3,11 @@ import { useImageAsset } from './useImageAsset.hook';
 import { styles } from './ImageAsset.styled';
 import Colors from 'constants/Colors';
 
-export function ImageAsset({ topicId, asset, onClearCarousel }) {
+export function ImageAsset({ topicId, asset }) {
   const { state, actions } = useImageAsset(topicId, asset);
 
   return (
-    <TouchableOpacity onPress={onClearCarousel} activeOpacity={1}>
+    <TouchableOpacity activeOpacity={1}>
       <Image source={{ uri: state.url }} style={{ borderRadius: 4, width: state.imageWidth, height: state.imageHeight }} resizeMode={'cover'} />
     </TouchableOpacity>
   );