From 72a502204e3233690c491bd2ae4011c59695ad7a Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Fri, 5 May 2023 14:49:17 -0700
Subject: [PATCH] fixing media carousel scroll in android

---
 .../conversation/topicItem/TopicItem.jsx      | 46 ++++++++++---------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
index d164a18f..416a79e3 100644
--- a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
+++ b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
@@ -13,7 +13,7 @@ import { ImageAsset } from './imageAsset/ImageAsset';
 import { AudioAsset } from './audioAsset/AudioAsset';
 import { VideoAsset } from './videoAsset/VideoAsset';
 import Carousel from 'react-native-reanimated-carousel';
-
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 export function TopicItem({ item, focused, focus, hosting, remove, update, block, report, contentKey }) {
 
   const { state, actions } = useTopicItem(item, hosting, remove, contentKey);
@@ -212,27 +212,29 @@ export function TopicItem({ item, focused, focus, hosting, remove, update, block
         onRequestClose={actions.hideCarousel}
       >
         <View style={styles.modal}>
-          <Carousel
-            loop
-            width={state.width}
-            autoPlay={false}
-            data={state.assets}
-            defaultIndex={state.carouselIndex}
-            scrollAnimationDuration={1000}
-            onSnapToItem={(index) => console.log('current index:', index)}
-            renderItem={({ index }) => (
-              <View style={styles.frame}>
-                { state.assets[index].type === 'image' && (
-                  <ImageAsset asset={state.assets[index]} dismiss={actions.hideCarousel} />
-                )}
-                { state.assets[index].type === 'video' && (
-                  <VideoAsset asset={state.assets[index]} dismiss={actions.hideCarousel} />
-                )}
-                { state.assets[index].type === 'audio' && (
-                  <AudioAsset asset={state.assets[index]} dismiss={actions.hideCarousel} />
-                )}
-              </View>
-            )} />
+          <GestureHandlerRootView>
+            <Carousel
+              loop
+              width={state.width}
+              autoPlay={false}
+              data={state.assets}
+              defaultIndex={state.carouselIndex}
+              scrollAnimationDuration={1000}
+              onSnapToItem={(index) => console.log('current index:', index)}
+              renderItem={({ index }) => (
+                <View style={styles.frame}>
+                  { state.assets[index].type === 'image' && (
+                    <ImageAsset asset={state.assets[index]} dismiss={actions.hideCarousel} />
+                  )}
+                  { state.assets[index].type === 'video' && (
+                    <VideoAsset asset={state.assets[index]} dismiss={actions.hideCarousel} />
+                  )}
+                  { state.assets[index].type === 'audio' && (
+                    <AudioAsset asset={state.assets[index]} dismiss={actions.hideCarousel} />
+                  )}
+                </View>
+              )} />
+            </GestureHandlerRootView>
         </View>
       </Modal> 
     </View>