feat: introduce ability to add theme for the gallery image thumbnail (#2216)

Author: khushal87

package/src/components/Attachment/Gallery.tsx

@@ -35,52 +35,6 @@ import { isVideoPackageAvailable } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getUrlWithoutParams } from '../../utils/utils';
 
-const styles = StyleSheet.create({
-  errorTextSize: { fontSize: 10 },
-  galleryContainer: {
-    borderTopLeftRadius: 13,
-    borderTopRightRadius: 13,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    overflow: 'hidden',
-  },
-  imageContainer: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    padding: 1,
-  },
-  imageContainerStyle: { alignItems: 'center', flex: 1, justifyContent: 'center' },
-  imageLoadingErrorIndicatorStyle: {
-    bottom: 4,
-    left: 4,
-    position: 'absolute',
-  },
-  imageLoadingIndicatorContainer: {
-    height: '100%',
-    justifyContent: 'center',
-    position: 'absolute',
-    width: '100%',
-  },
-  imageLoadingIndicatorStyle: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'absolute',
-  },
-  imageReloadContainerStyle: {
-    ...StyleSheet.absoluteFillObject,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  moreImagesContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    margin: 1,
-  },
-  moreImagesText: { color: '#FFFFFF', fontSize: 26, fontWeight: '700' },
-});
-
 export type GalleryPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setSelectedMessage' | 'setMessages'> &
@@ -468,18 +422,19 @@ const GalleryImageThumbnail = <
 
   const {
     theme: {
-      messageSimple: {
-        gallery: { image },
-      },
+      messageSimple: { gallery },
     },
   } = useTheme();
 
   return (
     <View
-      style={{
-        height: thumbnail.height - 1,
-        width: thumbnail.width - 1,
-      }}
+      style={[
+        {
+          height: thumbnail.height - 1,
+          width: thumbnail.width - 1,
+        },
+        gallery.thumbnail,
+      ]}
     >
       {isLoadingImageError ? (
         <>
@@ -502,7 +457,7 @@ const GalleryImageThumbnail = <
             resizeMode={thumbnail.resizeMode}
             style={[
               borderRadius,
-              image,
+              gallery.image,
               {
                 height: thumbnail.height - 1,
                 width: thumbnail.width - 1,
@@ -680,4 +635,50 @@ export const Gallery = <
   );
 };
 
+const styles = StyleSheet.create({
+  errorTextSize: { fontSize: 10 },
+  galleryContainer: {
+    borderTopLeftRadius: 13,
+    borderTopRightRadius: 13,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    overflow: 'hidden',
+  },
+  imageContainer: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: 1,
+  },
+  imageContainerStyle: { alignItems: 'center', flex: 1, justifyContent: 'center' },
+  imageLoadingErrorIndicatorStyle: {
+    bottom: 4,
+    left: 4,
+    position: 'absolute',
+  },
+  imageLoadingIndicatorContainer: {
+    height: '100%',
+    justifyContent: 'center',
+    position: 'absolute',
+    width: '100%',
+  },
+  imageLoadingIndicatorStyle: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+  },
+  imageReloadContainerStyle: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  moreImagesContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: 1,
+  },
+  moreImagesText: { color: '#FFFFFF', fontSize: 26, fontWeight: '700' },
+});
+
 Gallery.displayName = 'Gallery{messageSimple{gallery}}';

package/src/contexts/themeContext/utils/theme.ts

@@ -448,6 +448,7 @@ export type Theme = {
       minWidth: number;
       moreImagesContainer: ViewStyle;
       moreImagesText: TextStyle;
+      thumbnail: ViewStyle;
     };
     giphy: {
       buttonContainer: ViewStyle;
@@ -982,6 +983,7 @@ export const defaultTheme: Theme = {
       minWidth: 170,
       moreImagesContainer: {},
       moreImagesText: {},
+      thumbnail: {},
     },
     giphy: {
       buttonContainer: {},