feat: Image bubble improvements (#928)

muhsin-k · iamsivin · web-flow · commit a3def2829b7f · 2025-05-16T23:11:38.000+05:30
* chore: image scaling issues

* chore: remove lightbox

* Update pnpm-lock.yaml

* chore: Update version

---------

Co-authored-by: iamsivin &lt;iamsivin@gmail.com&gt;
diff --git a/app.config.ts b/app.config.ts
@@ -4,7 +4,7 @@ export default ({ config }: ConfigContext): ExpoConfig => {
   return {
     name: 'Chatwoot',
     slug: process.env.EXPO_PUBLIC_APP_SLUG || 'chatwoot-mobile',
-    version: '4.0.17',
+    version: '4.0.18',
     orientation: 'portrait',
     icon: './assets/icon.png',
     userInterfaceStyle: 'light',
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/mobile-app",
-  "version": "4.0.17",
+  "version": "4.0.18",
   "scripts": {
     "start": "expo start --dev-client",
     "start:production": "expo start --no-dev --minify",
@@ -33,12 +33,12 @@
     "adb:connect": "adb reverse tcp:9090 tcp:9090"
   },
   "dependencies": {
-    "@alantoa/lightbox": "0.3.1",
     "@chatwoot/markdown-to-txt": "^2.0.4",
     "@chatwoot/react-native-widget": "^0.0.21",
     "@chatwoot/utils": "^0.0.33",
     "@gorhom/bottom-sheet": "^5.1.2",
     "@kesha-antonov/react-native-action-cable": "^1.1.5",
+    "@nandorojo/galeria": "^1.2.0",
     "@notifee/react-native": "^9.1.1",
     "@react-native-async-storage/async-storage": "^1.23.1",
     "@react-native-clipboard/clipboard": "^1.6.1",
@@ -154,7 +154,6 @@
           "react-native-autoheight-webview",
           "redux-persist",
           "rn-fetch-blob",
-          "@alantoa/lightbox",
           "ffmpeg-kit-react-native",
           "@chatwoot/markdown-to-txt",
           "@chatwoot/react-native-widget",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/screens/chat-screen/ChatScreen.tsx b/src/screens/chat-screen/ChatScreen.tsx
@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 import PagerView, { PagerViewOnPageSelectedEvent } from 'react-native-pager-view';
 import Animated from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { LightBoxProvider } from '@alantoa/lightbox';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 
 import { ChatHeaderContainer } from './components';
@@ -86,12 +85,7 @@ const ChatScreenWrapper = (props: ChatScreenProps) => {
 
   return (
     <React.Fragment>
-      <ChatHeaderContainer
-        name={name || ''}
-        imageSrc={{
-          uri: thumbnail || '',
-        }}
-      />
+      <ChatHeaderContainer name={name || ''} imageSrc={{ uri: thumbnail || '' }} />
       <ConversationPagerView {...props} />
     </React.Fragment>
   );
@@ -143,11 +137,9 @@ const ChatScreen = (props: ChatScreenProps) => {
   if (conversation) {
     return (
       <SafeAreaView edges={['top']} style={tailwind.style('flex-1 bg-white')}>
-        <LightBoxProvider>
-          <ChatWindowProvider conversationId={conversationId}>
-            <ChatScreenWrapper {...props} />
-          </ChatWindowProvider>
-        </LightBoxProvider>
+        <ChatWindowProvider conversationId={conversationId}>
+          <ChatScreenWrapper {...props} />
+        </ChatWindowProvider>
         <ActionBottomSheet />
       </SafeAreaView>
     );
diff --git a/src/screens/chat-screen/components/message-components/ImageBubble.tsx b/src/screens/chat-screen/components/message-components/ImageBubble.tsx
@@ -1,33 +1,33 @@
 import React from 'react';
-import Animated from 'react-native-reanimated';
-import { LightBox, LightBoxProps } from '@alantoa/lightbox';
 import { Image } from 'expo-image';
+import { Galeria } from '@nandorojo/galeria';
 import { tailwind } from '@/theme';
 
-const AnimatedExpoImage = Animated.createAnimatedComponent(Image);
-
 type ImageCellProps = {
   imageSrc: string;
 };
 
-type ImageContainerProps = Pick<ImageCellProps, 'imageSrc'> &
-  Pick<LightBoxProps, 'width' | 'height'>;
+type ImageContainerProps = Pick<ImageCellProps, 'imageSrc'> & {
+  width?: number;
+  height?: number;
+};
 
 export const ImageBubbleContainer = (props: ImageContainerProps) => {
-  const { imageSrc, height: lightboxH, width: lightboxW } = props;
+  const { imageSrc, height = 215, width = 400 } = props;
 
   return (
-    <LightBox
-      width={lightboxW}
-      height={lightboxH}
-      imgLayout={{ width: lightboxW, height: lightboxH }}
-      tapToClose={true}>
-      <AnimatedExpoImage
-        source={{ uri: imageSrc }}
-        contentFit="cover"
-        style={[tailwind.style('h-full w-full bg-gray-100 overflow-hidden')]}
-      />
-    </LightBox>
+    <Galeria urls={[imageSrc]}>
+      <Galeria.Image>
+        <Image
+          source={{ uri: imageSrc }}
+          contentFit="cover"
+          style={[
+            tailwind.style('h-full w-full bg-gray-100 overflow-hidden'),
+            { width: width, height: height },
+          ]}
+        />
+      </Galeria.Image>
+    </Galeria>
   );
 };
 
@@ -36,7 +36,7 @@ export const ImageBubble = (props: ImageCellProps) => {
 
   return (
     <React.Fragment>
-      <ImageBubbleContainer {...{ imageSrc }} width={300} height={215} />
+      <ImageBubbleContainer {...{ imageSrc }} />
     </React.Fragment>
   );
 };
diff --git a/src/screens/chat-screen/components/message-components/ImageCell.tsx b/src/screens/chat-screen/components/message-components/ImageCell.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import { Dimensions, Text } from 'react-native';
+import { Text } from 'react-native';
 import Animated, { Easing, FadeIn } from 'react-native-reanimated';
-import { LightBox, LightBoxProps } from '@alantoa/lightbox';
-import { Image, ImageBackground } from 'expo-image';
+import { ImageBackground } from 'expo-image';
 import { tailwind } from '@/theme';
 import { Channel, Message, MessageStatus, UnixTimestamp } from '@/types';
 import { unixTimestampToReadableTime } from '@/utils';
@@ -11,10 +10,6 @@ import { MenuOption, MessageMenu } from '../message-menu';
 import { MESSAGE_TYPES } from '@/constants';
 import { DeliveryStatus } from './DeliveryStatus';
 
-const { width, height } = Dimensions.get('screen');
-
-const AnimatedExpoImage = Animated.createAnimatedComponent(Image);
-
 type ImageCellProps = {
   imageSrc: string;
   shouldRenderAvatar: boolean;
@@ -29,28 +24,8 @@ type ImageCellProps = {
   errorMessage?: string;
 };
 
-type ImageContainerProps = Pick<ImageCellProps, 'imageSrc'> &
-  Pick<LightBoxProps, 'width' | 'height'>;
-
-export const ImageContainer = (props: ImageContainerProps) => {
-  const { imageSrc, height: lightboxH, width: lightboxW } = props;
-  return (
-    <LightBox
-      width={lightboxW}
-      height={lightboxH}
-      imgLayout={{ height: height * 0.8, width: width * 0.8 }}
-      tapToClose={false}>
-      <AnimatedExpoImage
-        source={{ uri: imageSrc }}
-        contentFit="contain"
-        style={[tailwind.style('h-full w-full bg-gray-100 overflow-hidden')]}
-      />
-    </LightBox>
-  );
-};
 export const ImageCell = (props: ImageCellProps) => {
   const {
-    imageSrc,
     shouldRenderAvatar,
     messageType,
     sender,
@@ -111,7 +86,6 @@ export const ImageCell = (props: ImageCellProps) => {
                       : ''
                   : '',
               )}>
-              <ImageContainer {...{ imageSrc }} width={300} height={215} />
               <Animated.View pointerEvents={'none'}>
                 <ImageBackground
                   source={require('../../../../assets/local/ImageCellTimeStampOverlay.png')}
diff --git a/src/screens/chat-screen/components/message-list/stories/EmailMessageList.stories.tsx b/src/screens/chat-screen/components/message-list/stories/EmailMessageList.stories.tsx
@@ -8,7 +8,6 @@ import { configureStore, createSlice } from '@reduxjs/toolkit';
 import { tailwind } from '@/theme';
 import { MessagesList } from '../MessagesList';
 import { EMAIL_MESSAGES } from './mock-data/simpleEmail';
-import { LightBoxProvider } from '@alantoa/lightbox';
 import { ChatWindowProvider, RefsProvider } from '@/context';
 import { Provider } from 'react-redux';
 import { getAllGroupedMessages } from './mock-data/helper';
@@ -33,12 +32,7 @@ const mockConversationSlice = createSlice({
   initialState: {
     ids: [29],
     entities: {
-      29: {
-        id: 29,
-        status: 'open',
-        channel: 'Channel::Email',
-        messages: ALL_MESSAGES_MOCKDATA,
-      },
+      29: { id: 29, status: 'open', channel: 'Channel::Email', messages: ALL_MESSAGES_MOCKDATA },
     },
   },
   reducers: {},
@@ -67,22 +61,20 @@ export const EmailMessageList: Story = {
         <BottomSheetModalProvider>
           <RefsProvider>
             <KeyboardProvider>
-              <LightBoxProvider>
-                <ChatWindowProvider conversationId={29}>
-                  <ScrollView contentContainerStyle={tailwind.style('flex')}>
-                    <PlatformSpecificKeyboardWrapperComponent
-                      style={tailwind.style('flex-1 bg-white')}
-                      interpolator="linear">
-                      <MessagesList
-                        messages={ALL_MESSAGES_MOCKDATA}
-                        isFlashListReady={false}
-                        setFlashListReady={() => {}}
-                        onEndReached={() => {}}
-                      />
-                    </PlatformSpecificKeyboardWrapperComponent>
-                  </ScrollView>
-                </ChatWindowProvider>
-              </LightBoxProvider>
+              <ChatWindowProvider conversationId={29}>
+                <ScrollView contentContainerStyle={tailwind.style('flex')}>
+                  <PlatformSpecificKeyboardWrapperComponent
+                    style={tailwind.style('flex-1 bg-white')}
+                    interpolator="linear">
+                    <MessagesList
+                      messages={ALL_MESSAGES_MOCKDATA}
+                      isFlashListReady={false}
+                      setFlashListReady={() => {}}
+                      onEndReached={() => {}}
+                    />
+                  </PlatformSpecificKeyboardWrapperComponent>
+                </ScrollView>
+              </ChatWindowProvider>
             </KeyboardProvider>
           </RefsProvider>
         </BottomSheetModalProvider>
diff --git a/src/screens/chat-screen/components/message-list/stories/Instagram.stories.tsx b/src/screens/chat-screen/components/message-list/stories/Instagram.stories.tsx
diff --git a/src/screens/chat-screen/components/message-list/stories/Text.stories.tsx b/src/screens/chat-screen/components/message-list/stories/Text.stories.tsx
