fix: image gallery component theme arrangment

GetStream · Aug 8, 2024 · 3926168 · 3926168
1 parent cfb9d81
commit 3926168
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/package/src/components/ImageGallery/components/AnimatedGalleryImage.tsx b/package/src/components/ImageGallery/components/AnimatedGalleryImage.tsx
@@ -51,7 +51,7 @@ export const AnimatedGalleryImage = React.memo(
      * image as it is scaled. If the scale is less than one they stay in
      * place as to not come into the screen when the image shrinks.
      */
-    const AnimatedGalleryImageStyle = useAnimatedStyle<ImageStyle>(() => {
+    const animatedGalleryImageStyle = useAnimatedStyle<ImageStyle>(() => {
       const xScaleOffset = -7 * screenWidth * (0.5 + index);
       const yScaleOffset = -screenHeight * 3.5;
       return {
@@ -91,8 +91,7 @@ export const AnimatedGalleryImage = React.memo(
         resizeMode={'contain'}
         source={{ uri: photo.uri }}
         style={[
-          style,
-          AnimatedGalleryImageStyle,
+          animatedGalleryImageStyle,
           {
             transform: [
               { scaleX: -1 },
@@ -103,6 +102,7 @@ export const AnimatedGalleryImage = React.memo(
               { scale: oneEighth },
             ],
           },
+          style,
         ]}
       />
     );

diff --git a/package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx b/package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx
@@ -173,7 +173,6 @@ export const AnimatedGalleryVideo = React.memo(
       <Animated.View
         accessibilityLabel='Image Gallery Video'
         style={[
-          style,
           animatedViewStyles,
           {
             transform: [
@@ -185,6 +184,7 @@ export const AnimatedGalleryVideo = React.memo(
               { scale: oneEighth },
             ],
           },
+          style,
         ]}
       >
         {isVideoPackageAvailable() && (

diff --git a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx
@@ -181,7 +181,7 @@ export const ImageGalleryFooterWithContext = <
       pointerEvents={'box-none'}
       style={styles.wrapper}
     >
-      <ReanimatedSafeAreaView style={[container, footerStyle, { backgroundColor: white }]}>
+      <ReanimatedSafeAreaView style={[container, { backgroundColor: white }, footerStyle]}>
         {photo.type === 'video' ? (
           videoControlElement ? (
             videoControlElement({ duration, onPlayPause, paused, progress, videoRef })
@@ -195,7 +195,7 @@ export const ImageGalleryFooterWithContext = <
             />
           )
         ) : null}
-        <View style={[styles.innerContainer, innerContainer, { backgroundColor: white }]}>
+        <View style={[styles.innerContainer, { backgroundColor: white }, innerContainer]}>
           {leftElement ? (
             leftElement({ openGridView, photo, share, shareMenuOpen })
           ) : (

diff --git a/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx b/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx
@@ -73,7 +73,7 @@ export const ImageGalleryVideoControl = React.memo(
     return (
       <View style={[styles.videoContainer, videoContainer]}>
         <TouchableOpacity accessibilityLabel='Play Pause Button' onPress={handlePlayPause}>
-          <View style={[styles.roundedView, roundedView, { backgroundColor: static_white }]}>
+          <View style={[styles.roundedView, { backgroundColor: static_white }, roundedView]}>
             {paused ? (
               <Play accessibilityLabel='Play Icon' fill={static_black} height={32} width={32} />
             ) : (
@@ -83,7 +83,7 @@ export const ImageGalleryVideoControl = React.memo(
         </TouchableOpacity>
         <Text
           accessibilityLabel='Progress Duration'
-          style={[styles.durationTextStyle, durationTextStyle, { color: black }]}
+          style={[styles.durationTextStyle, { color: black }, durationTextStyle]}
         >
           {progressDuration ? progressDuration : '00:00'}
         </Text>
@@ -97,7 +97,7 @@ export const ImageGalleryVideoControl = React.memo(
         />
         <Text
           accessibilityLabel='Video Duration'
-          style={[styles.durationTextStyle, durationTextStyle, { color: black }]}
+          style={[styles.durationTextStyle, { color: black }, durationTextStyle]}
         >
           {videoDuration ? videoDuration : '00:00'}
         </Text>