diff --git a/package/src/components/ImageGallery/ImageGallery.tsx b/package/src/components/ImageGallery/ImageGallery.tsx
index 15049596d1..da0b338c1f 100644
--- a/package/src/components/ImageGallery/ImageGallery.tsx
+++ b/package/src/components/ImageGallery/ImageGallery.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Image, ImageStyle, Keyboard, StyleSheet, ViewStyle } from 'react-native';
 
-import { GestureDetector } from 'react-native-gesture-handler';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import Animated, {
   Easing,
@@ -500,77 +500,71 @@ export const ImageGallery = <
       style={[StyleSheet.absoluteFillObject, showScreenStyle]}
     >
       <Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
-      <GestureDetector gesture={singleTap}>
+      <GestureDetector gesture={Gesture.Simultaneous(singleTap, doubleTap, pinch, pan)}>
         <Animated.View style={StyleSheet.absoluteFillObject}>
-          <GestureDetector gesture={doubleTap}>
-            <Animated.View style={StyleSheet.absoluteFillObject}>
-              <GestureDetector gesture={pinch}>
-                <Animated.View style={StyleSheet.absoluteFill}>
-                  <GestureDetector gesture={pan}>
-                    <Animated.View style={StyleSheet.absoluteFill}>
-                      <Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
-                        {imageGalleryAttachments.map((photo, i) =>
-                          photo.type === FileTypes.Video ? (
-                            <AnimatedGalleryVideo
-                              attachmentId={photo.id}
-                              handleEnd={handleEnd}
-                              handleLoad={handleLoad}
-                              handleProgress={handleProgress}
-                              index={i}
-                              key={`${photo.uri}-${i}`}
-                              offsetScale={offsetScale}
-                              paused={photo.paused || false}
-                              previous={selectedIndex > i}
-                              repeat={true}
-                              scale={scale}
-                              screenHeight={fullWindowHeight}
-                              selected={selectedIndex === i}
-                              shouldRender={Math.abs(selectedIndex - i) < 4}
-                              source={{ uri: photo.uri }}
-                              style={[
-                                {
-                                  height: fullWindowHeight * 8,
-                                  marginRight: MARGIN,
-                                  width: fullWindowWidth * 8,
-                                },
-                                slide,
-                              ]}
-                              translateX={translateX}
-                              translateY={translateY}
-                              videoRef={videoRef}
-                            />
-                          ) : (
-                            <AnimatedGalleryImage
-                              accessibilityLabel={'Image Item'}
-                              index={i}
-                              key={`${photo.uri}-${i}`}
-                              offsetScale={offsetScale}
-                              photo={photo}
-                              previous={selectedIndex > i}
-                              scale={scale}
-                              screenHeight={fullWindowHeight}
-                              selected={selectedIndex === i}
-                              shouldRender={Math.abs(selectedIndex - i) < 4}
-                              style={[
-                                {
-                                  height: fullWindowHeight * 8,
-                                  marginRight: MARGIN,
-                                  width: fullWindowWidth * 8,
-                                },
-                                slide,
-                              ]}
-                              translateX={translateX}
-                              translateY={translateY}
-                            />
-                          ),
-                        )}
-                      </Animated.View>
-                    </Animated.View>
-                  </GestureDetector>
+          <Animated.View style={StyleSheet.absoluteFillObject}>
+            <Animated.View style={StyleSheet.absoluteFill}>
+              <Animated.View style={StyleSheet.absoluteFill}>
+                <Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
+                  {imageGalleryAttachments.map((photo, i) =>
+                    photo.type === FileTypes.Video ? (
+                      <AnimatedGalleryVideo
+                        attachmentId={photo.id}
+                        handleEnd={handleEnd}
+                        handleLoad={handleLoad}
+                        handleProgress={handleProgress}
+                        index={i}
+                        key={`${photo.uri}-${i}`}
+                        offsetScale={offsetScale}
+                        paused={photo.paused || false}
+                        previous={selectedIndex > i}
+                        repeat={true}
+                        scale={scale}
+                        screenHeight={fullWindowHeight}
+                        selected={selectedIndex === i}
+                        shouldRender={Math.abs(selectedIndex - i) < 4}
+                        source={{ uri: photo.uri }}
+                        style={[
+                          {
+                            height: fullWindowHeight * 8,
+                            marginRight: MARGIN,
+                            width: fullWindowWidth * 8,
+                          },
+                          slide,
+                        ]}
+                        translateX={translateX}
+                        translateY={translateY}
+                        videoRef={videoRef}
+                      />
+                    ) : (
+                      <AnimatedGalleryImage
+                        accessibilityLabel={'Image Item'}
+                        index={i}
+                        key={`${photo.uri}-${i}`}
+                        offsetScale={offsetScale}
+                        photo={photo}
+                        previous={selectedIndex > i}
+                        scale={scale}
+                        screenHeight={fullWindowHeight}
+                        selected={selectedIndex === i}
+                        shouldRender={Math.abs(selectedIndex - i) < 4}
+                        style={[
+                          {
+                            height: fullWindowHeight * 8,
+                            marginRight: MARGIN,
+                            width: fullWindowWidth * 8,
+                          },
+                          slide,
+                        ]}
+                        translateX={translateX}
+                        translateY={translateY}
+                      />
+                    ),
+                  )}
                 </Animated.View>
-              </GestureDetector>
+              </Animated.View>
             </Animated.View>
-          </GestureDetector>
+          </Animated.View>
         </Animated.View>
       </GestureDetector>
       <ImageGalleryHeader<StreamChatGenerics>
diff --git a/package/src/components/ImageGallery/hooks/useImageGalleryGestures.tsx b/package/src/components/ImageGallery/hooks/useImageGalleryGestures.tsx
index 14358a257b..b7c6156792 100644
--- a/package/src/components/ImageGallery/hooks/useImageGalleryGestures.tsx
+++ b/package/src/components/ImageGallery/hooks/useImageGalleryGestures.tsx
@@ -11,6 +11,7 @@ import {
   withTiming,
 } from 'react-native-reanimated';
 
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { triggerHaptic } from '../../../native';
 
@@ -60,6 +61,7 @@ export const useImageGalleryGestures = ({
   translateY: SharedValue<number>;
   translationX: SharedValue<number>;
 }) => {
+  const { setMessages, setSelectedMessage } = useImageGalleryContext();
   /**
    * Gesture handler refs
    */
@@ -403,6 +405,7 @@ export const useImageGalleryGestures = ({
           cancelAnimation(translateX);
           cancelAnimation(translateY);
           cancelAnimation(scale);
+
           overlayOpacity.value = withTiming(
             0,
             {
@@ -410,6 +413,8 @@ export const useImageGalleryGestures = ({
               easing: Easing.out(Easing.ease),
             },
             () => {
+              runOnJS(setSelectedMessage)(undefined);
+              runOnJS(setMessages)([]);
               runOnJS(setOverlay)('none');
             },
           );
@@ -662,6 +667,7 @@ export const useImageGalleryGestures = ({
     .minPointers(1)
     .numberOfTaps(1)
     .onEnd(() => {
+      console.log('single tap');
       cancelAnimation(headerFooterVisible);
       headerFooterVisible.value = headerFooterVisible.value > 0 ? withTiming(0) : withTiming(1);
     })
diff --git a/package/src/components/ProgressControl/ProgressControl.tsx b/package/src/components/ProgressControl/ProgressControl.tsx
index b869d74b0a..e590bd7d0b 100644
--- a/package/src/components/ProgressControl/ProgressControl.tsx
+++ b/package/src/components/ProgressControl/ProgressControl.tsx
@@ -49,6 +49,8 @@ export const ProgressControl = React.memo(
       testID,
       width,
     } = props;
+    const state = useSharedValue(0);
+    const translateX = useSharedValue(0);
     const { width: windowWidth } = Dimensions.get('screen');
     const widthInNumbers = width
       ? typeof width === 'string'
@@ -81,8 +83,6 @@ export const ProgressControl = React.memo(
       })
       .withTestId(testID);
 
-    const state = useSharedValue(0);
-    const translateX = useSharedValue(0);
     const filledColor = filledColorFromProp || filledColorFromTheme;
 
     useEffect(() => {
@@ -127,7 +127,6 @@ export const ProgressControl = React.memo(
 
 const styles = StyleSheet.create({
   container: {
-    borderRadius: 50,
     height,
   },
   filledStyle: {
@@ -137,15 +136,15 @@ const styles = StyleSheet.create({
     borderRadius: 5,
     borderWidth: 0.2,
     elevation: 6,
-    height: 20,
+    height: 30,
     shadowOffset: {
       height: 3,
       width: 0,
     },
     shadowOpacity: 0.27,
     shadowRadius: 4.65,
-    top: -11,
-    width: 5,
+    top: -15,
+    width: 6,
   },
 });
 ProgressControl.displayName = 'ProgressControl';