fix: add send link to addons

Author: HuyDo

README.md

@@ -112,7 +112,11 @@ Then using our Addons component in ChatScreen
 ```javascript
 import React from 'react'
 import {ChatScreen as BaseChatScreen} from 'rn-firebase-chat'
-import {CameraView, useCamera} from 'rn-firebase-chat/src/addons/camera'
+import {
+  CameraView,
+  useCamera,
+  CustomBubbleWithLinkPreview,
+} from 'rn-firebase-chat/src/addons';
 
 ...
 
@@ -122,6 +126,13 @@ export const ChatScreen: React.FC = () => {
     <BaseChatScreen
       memberIds={[partnerInfo.id]}
       partners={[partnerInfo]}
+      //Add custom link preview here
+      customLinkPreview={(bubbleMessage, viewStatus) => (
+          <View>
+            <CustomBubbleWithLinkPreview bubbleMessage={bubbleMessage} />
+            {viewStatus}
+          </View>
+        )}
       inputToolbarProps={{
         hasCamera: true,
         hasGallery: true,

src/addons/index.ts

@@ -0,0 +1,2 @@
+export * from './camera';
+export * from './linkPreview';

src/chat/components/linkPreview/index.tsx renamed to src/addons/linkPreview/LinkPreview.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-native';
 import { Bubble, BubbleProps } from 'react-native-gifted-chat';
 import type { MessageProps } from '../../../interfaces';
-import { LinkPreview } from '../linkPreview';
+import { LinkPreview } from '../../../addons';
 
 export interface ICustomBubbleWithLinkPreviewStyles {
   customContainerStyle?: StyleProp<ViewStyle>;
@@ -24,7 +24,6 @@ interface ICustomBubbleWithLinkPreviewProps {
     urls: string[],
     bubbleMessage: BubbleProps<MessageProps>
   ) => JSX.Element;
-  enableLinkPreview: boolean;
 }
 
 const urlRegex = /(https?:\/\/[^\s]+)/g;
@@ -40,7 +39,6 @@ export const CustomBubbleWithLinkPreview: React.FC<
     bubbleMessage,
     customBubbleWithLinkPreviewStyles,
     customBubbleWithLinkPreview,
-    enableLinkPreview,
   } = props;
   const { currentMessage } = bubbleMessage;
   const urls = currentMessage?.text.match(urlRegex);
@@ -92,7 +90,7 @@ export const CustomBubbleWithLinkPreview: React.FC<
               {!!currentMessage?.text &&
                 renderTextWithLinks(currentMessage.text)}
             </Text>
-            {!!firstUrl && enableLinkPreview && (
+            {!!firstUrl && (
               <LinkPreview
                 containerStyle={[
                   styles.previewContainer,
@@ -112,7 +110,6 @@ export const CustomBubbleWithLinkPreview: React.FC<
       customContainerStyle,
       customMessagePreviewStyle,
       customPreviewContainerStyle,
-      enableLinkPreview,
       renderTextWithLinks,
     ]
   );

src/chat/components/bubble/CustomBubbleWithLinkPreview.tsx renamed to src/addons/linkPreview/bubble/CustomBubbleWithLinkPreview.tsx

@@ -0,0 +1,4 @@
+import { LinkPreview } from './LinkPreview';
+import { CustomBubbleWithLinkPreview } from './bubble/CustomBubbleWithLinkPreview';
+
+export { LinkPreview, CustomBubbleWithLinkPreview };

src/addons/linkPreview/index.ts

@@ -44,7 +44,6 @@ import InputToolbar, { IInputToolbar } from './components/InputToolbar';
 type ChildrenProps = {
   onSend: (messages: MessageProps) => Promise<void>;
 };
-import { ICustomBubbleWithLinkPreviewStyles } from './components/bubble/CustomBubbleWithLinkPreview';
 
 interface ChatScreenProps extends GiftedChatProps {
   style?: StyleProp<ViewStyle>;
@@ -67,12 +66,10 @@ interface ChatScreenProps extends GiftedChatProps {
   messageStatusEnable?: boolean;
   customMessageStatus?: (hasUnread: boolean) => JSX.Element;
   children?: (props: ChildrenProps) => ReactNode | ReactNode;
-  customLinkPreviewStyles?: ICustomBubbleWithLinkPreviewStyles;
-  customLinkPreview: (
-    urls: string[],
-    bubbleMessage: BubbleProps<MessageProps>
-  ) => JSX.Element;
-  enableLinkPreview?: boolean;
+  customLinkPreview?: (
+    bubbleMessage: BubbleProps<MessageProps>,
+    viewMessageStatus: ReactNode
+  ) => React.ReactNode;
 }
 
 export const ChatScreen: React.FC<ChatScreenProps> = ({
@@ -91,9 +88,7 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
   enableTyping = true,
   typingTimeoutSeconds = DEFAULT_TYPING_TIMEOUT_SECONDS,
   messageStatusEnable = true,
-  customLinkPreviewStyles,
   customLinkPreview,
-  enableLinkPreview = true,
   ...props
 }) => {
   const { userInfo, chatDispatch } = useChatContext();
@@ -318,9 +313,7 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
         unReadSeenMessage={props.unReadSeenMessage}
         customMessageStatus={props.customMessageStatus}
         messageStatusEnable={messageStatusEnable}
-        customLinkPreviewStyles={customLinkPreviewStyles}
         customLinkPreview={customLinkPreview}
-        enableLinkPreview={enableLinkPreview}
       />
     );
   };

src/chat/components/linkPreview/type.ts renamed to src/addons/linkPreview/type.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 import { MessageTypes, type MessageProps } from '../../../interfaces';
 import { Bubble, BubbleProps } from 'react-native-gifted-chat';
@@ -7,11 +7,6 @@ import {
   CustomImageVideoBubbleProps,
 } from './CustomImageVideoBubble';
 import MessageStatus from '../MessageStatus';
-import {
-  ICustomBubbleWithLinkPreviewStyles,
-  CustomBubbleWithLinkPreview,
-} from './CustomBubbleWithLinkPreview';
-
 interface CustomBubbleProps {
   bubbleMessage: Bubble<MessageProps>['props'];
   position: 'left' | 'right';
@@ -24,12 +19,10 @@ interface CustomBubbleProps {
   unReadSeenMessage?: string;
   messageStatusEnable: boolean;
   customMessageStatus?: (hasUnread: boolean) => JSX.Element;
-  customLinkPreviewStyles?: ICustomBubbleWithLinkPreviewStyles;
-  customLinkPreview: (
-    urls: string[],
-    bubbleMessage: BubbleProps<MessageProps>
-  ) => JSX.Element;
-  enableLinkPreview: boolean;
+  customLinkPreview?: (
+    bubbleMessage: BubbleProps<MessageProps>,
+    viewMessageStatus: ReactNode
+  ) => React.ReactNode;
 }
 
 export const CustomBubble: React.FC<CustomBubbleProps> = ({
@@ -44,9 +37,7 @@ export const CustomBubble: React.FC<CustomBubbleProps> = ({
   unReadSentMessage,
   messageStatusEnable,
   customMessageStatus,
-  customLinkPreviewStyles,
   customLinkPreview,
-  enableLinkPreview,
 }) => {
   const styleBuble = {
     left: { backgroundColor: 'transparent' },
@@ -109,17 +100,11 @@ export const CustomBubble: React.FC<CustomBubbleProps> = ({
         );
 
       default: {
-        return (
-          <View>
-            <CustomBubbleWithLinkPreview
-              bubbleMessage={bubbleMessage}
-              customBubbleWithLinkPreviewStyles={customLinkPreviewStyles}
-              customBubbleWithLinkPreview={customLinkPreview}
-              enableLinkPreview={enableLinkPreview}
-            />
-            {ViewMessageStatus}
-          </View>
-        );
+        if (customLinkPreview) {
+          return customLinkPreview(bubbleMessage, ViewMessageStatus);
+        }
+
+        return <Bubble {...bubbleMessage} />;
       }
     }
   };

src/chat/components/linkPreview/utils.ts renamed to src/addons/linkPreview/utils.ts

@@ -1,3 +1,2 @@
 export * from './CustomBubble';
 export * from './CustomImageVideoBubble';
-export * from './CustomBubbleWithLinkPreview';