@sendbird/uikit-react-native-foundation 2.5.0 → 3.0.0-rc.1

package/lib/typescript/src/ui/GroupChannelMessage/index.d.ts

@@ -0,0 +1,191 @@
+import type React from 'react';
+import type { SendbirdGroupChannel, SendbirdMessage, SendbirdUser } from '@sendbird/uikit-utils';
+export type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {
+    channel: SendbirdGroupChannel;
+    message: T;
+    variant?: 'outgoing' | 'incoming';
+    strings?: {
+        senderName?: string;
+        sentDate?: string;
+        edited?: string;
+        fileName?: string;
+        unknownTitle?: string;
+        unknownDescription?: string;
+    };
+    children?: React.ReactNode;
+    sendingStatus?: React.ReactNode;
+    groupedWithPrev: boolean;
+    groupedWithNext: boolean;
+    onPress?: () => void;
+    onLongPress?: () => void;
+    onPressAvatar?: () => void;
+    onPressURL?: (url: string) => void;
+    onPressMentionedUser?: (mentionedUser?: SendbirdUser) => void;
+} & AdditionalProps;
+declare const GroupChannelMessage: {
+    User: (props: {
+        channel: SendbirdGroupChannel;
+        message: import("@sendbird/chat/message").UserMessage;
+        variant?: "incoming" | "outgoing" | undefined;
+        strings?: {
+            senderName?: string | undefined;
+            sentDate?: string | undefined;
+            edited?: string | undefined;
+            fileName?: string | undefined;
+            unknownTitle?: string | undefined;
+            unknownDescription?: string | undefined;
+        } | undefined;
+        children?: React.ReactNode;
+        sendingStatus?: React.ReactNode;
+        groupedWithPrev: boolean;
+        groupedWithNext: boolean;
+        onPress?: (() => void) | undefined;
+        onLongPress?: (() => void) | undefined;
+        onPressAvatar?: (() => void) | undefined;
+        onPressURL?: ((url: string) => void) | undefined;
+        onPressMentionedUser?: ((mentionedUser?: SendbirdUser) => void) | undefined;
+    } & {
+        regexTextPatterns?: import("../..").RegexTextPattern[] | undefined;
+        renderRegexTextChildren?: ((message: import("@sendbird/chat/message").UserMessage) => string) | undefined;
+    }) => JSX.Element;
+    OpenGraphUser: (props: {
+        channel: SendbirdGroupChannel;
+        message: import("@sendbird/chat/message").UserMessage;
+        variant?: "incoming" | "outgoing" | undefined;
+        strings?: {
+            senderName?: string | undefined;
+            sentDate?: string | undefined;
+            edited?: string | undefined;
+            fileName?: string | undefined;
+            unknownTitle?: string | undefined;
+            unknownDescription?: string | undefined;
+        } | undefined;
+        children?: React.ReactNode;
+        sendingStatus?: React.ReactNode;
+        groupedWithPrev: boolean;
+        groupedWithNext: boolean;
+        onPress?: (() => void) | undefined;
+        onLongPress?: (() => void) | undefined;
+        onPressAvatar?: (() => void) | undefined;
+        onPressURL?: ((url: string) => void) | undefined;
+        onPressMentionedUser?: ((mentionedUser?: SendbirdUser) => void) | undefined;
+    } & {
+        regexTextPatterns?: import("../..").RegexTextPattern[] | undefined;
+        renderRegexTextChildren?: ((message: import("@sendbird/chat/message").UserMessage) => string) | undefined;
+    }) => JSX.Element;
+    File: (props: {
+        channel: SendbirdGroupChannel;
+        message: import("@sendbird/chat/message").FileMessage;
+        variant?: "incoming" | "outgoing" | undefined;
+        strings?: {
+            senderName?: string | undefined;
+            sentDate?: string | undefined;
+            edited?: string | undefined;
+            fileName?: string | undefined;
+            unknownTitle?: string | undefined;
+            unknownDescription?: string | undefined;
+        } | undefined;
+        children?: React.ReactNode;
+        sendingStatus?: React.ReactNode;
+        groupedWithPrev: boolean;
+        groupedWithNext: boolean;
+        onPress?: (() => void) | undefined;
+        onLongPress?: (() => void) | undefined;
+        onPressAvatar?: (() => void) | undefined;
+        onPressURL?: ((url: string) => void) | undefined;
+        onPressMentionedUser?: ((mentionedUser?: SendbirdUser) => void) | undefined;
+    }) => JSX.Element;
+    ImageFile: (props: {
+        channel: SendbirdGroupChannel;
+        message: import("@sendbird/chat/message").FileMessage;
+        variant?: "incoming" | "outgoing" | undefined;
+        strings?: {
+            senderName?: string | undefined;
+            sentDate?: string | undefined;
+            edited?: string | undefined;
+            fileName?: string | undefined;
+            unknownTitle?: string | undefined;
+            unknownDescription?: string | undefined;
+        } | undefined;
+        children?: React.ReactNode;
+        sendingStatus?: React.ReactNode;
+        groupedWithPrev: boolean;
+        groupedWithNext: boolean;
+        onPress?: (() => void) | undefined;
+        onLongPress?: (() => void) | undefined;
+        onPressAvatar?: (() => void) | undefined;
+        onPressURL?: ((url: string) => void) | undefined;
+        onPressMentionedUser?: ((mentionedUser?: SendbirdUser) => void) | undefined;
+    }) => JSX.Element;
+    VideoFile: (props: {
+        channel: SendbirdGroupChannel;
+        message: import("@sendbird/chat/message").FileMessage;
+        variant?: "incoming" | "outgoing" | undefined;
+        strings?: {
+            senderName?: string | undefined;
+            sentDate?: string | undefined;
+            edited?: string | undefined;
+            fileName?: string | undefined;
+            unknownTitle?: string | undefined;
+            unknownDescription?: string | undefined;
+        } | undefined;
+        children?: React.ReactNode;
+        sendingStatus?: React.ReactNode;
+        groupedWithPrev: boolean;
+        groupedWithNext: boolean;
+        onPress?: (() => void) | undefined;
+        onLongPress?: (() => void) | undefined;
+        onPressAvatar?: (() => void) | undefined;
+        onPressURL?: ((url: string) => void) | undefined;
+        onPressMentionedUser?: ((mentionedUser?: SendbirdUser) => void) | undefined;
+    } & {
+        fetchThumbnailFromVideoSource: (uri: string) => Promise<{
+            path: string;
+        } | null>;
+    }) => JSX.Element;
+    Admin: (props: {
+        channel: SendbirdGroupChannel;
+        message: import("@sendbird/chat/message").AdminMessage;
+        variant?: "incoming" | "outgoing" | undefined;
+        strings?: {
+            senderName?: string | undefined;
+            sentDate?: string | undefined;
+            edited?: string | undefined;
+            fileName?: string | undefined;
+            unknownTitle?: string | undefined;
+            unknownDescription?: string | undefined;
+        } | undefined;
+        children?: React.ReactNode;
+        sendingStatus?: React.ReactNode;
+        groupedWithPrev: boolean;
+        groupedWithNext: boolean;
+        onPress?: (() => void) | undefined;
+        onLongPress?: (() => void) | undefined;
+        onPressAvatar?: (() => void) | undefined;
+        onPressURL?: ((url: string) => void) | undefined;
+        onPressMentionedUser?: ((mentionedUser?: SendbirdUser) => void) | undefined;
+    }) => JSX.Element;
+    Unknown: (props: {
+        channel: SendbirdGroupChannel;
+        message: SendbirdMessage;
+        variant?: "incoming" | "outgoing" | undefined;
+        strings?: {
+            senderName?: string | undefined;
+            sentDate?: string | undefined;
+            edited?: string | undefined;
+            fileName?: string | undefined;
+            unknownTitle?: string | undefined;
+            unknownDescription?: string | undefined;
+        } | undefined;
+        children?: React.ReactNode;
+        sendingStatus?: React.ReactNode;
+        groupedWithPrev: boolean;
+        groupedWithNext: boolean;
+        onPress?: (() => void) | undefined;
+        onLongPress?: (() => void) | undefined;
+        onPressAvatar?: (() => void) | undefined;
+        onPressURL?: ((url: string) => void) | undefined;
+        onPressMentionedUser?: ((mentionedUser?: SendbirdUser) => void) | undefined;
+    }) => JSX.Element;
+};
+export default GroupChannelMessage;

package/lib/typescript/src/ui/OpenChannelMessage/index.d.ts

@@ -16,7 +16,7 @@ export type OpenChannelMessageProps<T extends SendbirdMessage, AdditionalProps =
     onPress?: () => void;
     onLongPress?: () => void;
     onPressAvatar?: () => void;
-    onPressURL?: () => void;
+    onPressURL?: (url: string) => void;
 } & AdditionalProps;
 declare const OpenChannelMessage: {
     User: (props: {
@@ -35,7 +35,7 @@ declare const OpenChannelMessage: {
         onPress?: (() => void) | undefined;
         onLongPress?: (() => void) | undefined;
         onPressAvatar?: (() => void) | undefined;
-        onPressURL?: (() => void) | undefined;
+        onPressURL?: ((url: string) => void) | undefined;
     }) => JSX.Element;
     OpenGraphUser: (props: {
         channel: SendbirdOpenChannel;
@@ -53,7 +53,7 @@ declare const OpenChannelMessage: {
         onPress?: (() => void) | undefined;
         onLongPress?: (() => void) | undefined;
         onPressAvatar?: (() => void) | undefined;
-        onPressURL?: (() => void) | undefined;
+        onPressURL?: ((url: string) => void) | undefined;
     }) => JSX.Element;
     File: (props: {
         channel: SendbirdOpenChannel;
@@ -71,7 +71,7 @@ declare const OpenChannelMessage: {
         onPress?: (() => void) | undefined;
         onLongPress?: (() => void) | undefined;
         onPressAvatar?: (() => void) | undefined;
-        onPressURL?: (() => void) | undefined;
+        onPressURL?: ((url: string) => void) | undefined;
     }) => JSX.Element;
     ImageFile: (props: {
         channel: SendbirdOpenChannel;
@@ -89,7 +89,7 @@ declare const OpenChannelMessage: {
         onPress?: (() => void) | undefined;
         onLongPress?: (() => void) | undefined;
         onPressAvatar?: (() => void) | undefined;
-        onPressURL?: (() => void) | undefined;
+        onPressURL?: ((url: string) => void) | undefined;
     }) => JSX.Element;
     VideoFile: (props: OpenChannelMessageProps<import("@sendbird/chat/message").FileMessage, {
         fetchThumbnailFromVideoSource: (uri: string) => Promise<{
@@ -112,7 +112,7 @@ declare const OpenChannelMessage: {
         onPress?: (() => void) | undefined;
         onLongPress?: (() => void) | undefined;
         onPressAvatar?: (() => void) | undefined;
-        onPressURL?: (() => void) | undefined;
+        onPressURL?: ((url: string) => void) | undefined;
     }) => JSX.Element;
     Unknown: (props: {
         channel: SendbirdOpenChannel;
@@ -130,7 +130,7 @@ declare const OpenChannelMessage: {
         onPress?: (() => void) | undefined;
         onLongPress?: (() => void) | undefined;
         onPressAvatar?: (() => void) | undefined;
-        onPressURL?: (() => void) | undefined;
+        onPressURL?: ((url: string) => void) | undefined;
     }) => JSX.Element;
 };
 export default OpenChannelMessage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native-foundation",
-  "version": "2.5.0",
+  "version": "3.0.0-rc.1",
   "description": "A foundational UI kit for building chat-enabled React Native apps.",
   "keywords": [
     "sendbird",
@@ -28,6 +28,7 @@
     "test": "jest",
     "build": "bob build",
     "clean": "del lib",
+    "publish:next": "npm publish --tag next",
     "generate-icons": "node src/assets/bundle-icons.js"
   },
   "repository": {
@@ -46,7 +47,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "2.5.0"
+    "@sendbird/uikit-utils": "3.0.0-rc.1"
   },
   "devDependencies": {
     "@types/react": "*",
@@ -59,8 +60,8 @@
     "typescript": "4.9.4"
   },
   "peerDependencies": {
-    "react": ">=16.13.1",
-    "react-native": ">=0.63.3",
+    "react": ">=17.0.2",
+    "react-native": ">=0.65.0",
     "react-native-fast-image": ">=8.5.11",
     "react-native-safe-area-context": ">=3.3.2"
   },
@@ -87,6 +88,5 @@
     "entryPoint": "./src/index.ts",
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native-foundation"
-  },
-  "gitHead": "4e2d6a30075a8fb6cf2615c5c20d50a0d0ddfcda"
+  }
 }

package/src/components/Image/FastImageInternal.tsx

@@ -0,0 +1,9 @@
+import type { FastImageProps } from 'react-native-fast-image';
+
+let FastImageInternal: (props: FastImageProps) => JSX.Element | null = () => null;
+
+try {
+  FastImageInternal = require('react-native-fast-image') as (props: FastImageProps) => JSX.Element;
+} catch {}
+
+export default FastImageInternal;

package/src/components/Image/Image.fastimage.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { FastImageProps, ResizeMode, Source } from 'react-native-fast-image';
 
+import FastImageInternal from './FastImageInternal';
 import type { SendbirdImageComponent, SendbirdImageProps } from './index';
 
 function convertCache(
@@ -53,12 +54,6 @@ function convertResizeMode(mode?: SendbirdImageProps['resizeMode']): ResizeMode
   }
 }
 
-let FastImage: (props: FastImageProps) => JSX.Element | null = () => null;
-
-try {
-  FastImage = require('react-native-fast-image') as (props: FastImageProps) => JSX.Element;
-} catch {}
-
 const Image_FastImage: SendbirdImageComponent = ({
   source,
   defaultSource,
@@ -69,7 +64,7 @@ const Image_FastImage: SendbirdImageComponent = ({
   ...props
 }) => {
   return (
-    <FastImage
+    <FastImageInternal
       {...props}
       onLoad={onLoad && ((e) => onLoad(e.nativeEvent))}
       onError={onError && (() => onError({}))}

package/src/components/ImageWithPlaceholder/index.tsx

@@ -10,6 +10,7 @@ import Icon from '../Icon';
 import Image from '../Image';
 
 const useRetry = (hasError: boolean, retryCount = 5) => {
+  // NOTE: Glide(fast-image) will retry automatically on Android
   if (Platform.OS === 'android') return '';
 
   const forceUpdate = useForceUpdate();
@@ -44,14 +45,14 @@ type Props = {
   style?: StyleProp<ViewStyle>;
 };
 const ImageWithPlaceholder = (props: Props) => {
-  const { colors } = useUIKitTheme();
+  const { palette, select, colors } = useUIKitTheme();
   const [imageNotFound, setImageNotFound] = useState(false);
 
   const key = useRetry(imageNotFound);
   return (
     <Box
       style={[{ overflow: 'hidden', width: props.width, height: props.height }, props.style]}
-      backgroundColor={colors.onBackground04}
+      backgroundColor={select({ dark: palette.background400, light: palette.background100 })}
     >
       <Image
         key={key}

package/src/components/RegexText/index.tsx

@@ -4,7 +4,7 @@ import { replaceWithRegex } from '@sendbird/uikit-utils';
 
 import Text, { TextProps } from '../Text';
 
-interface Pattern {
+export interface RegexTextPattern {
   regex: RegExp;
   replacer(params: {
     match: string;
@@ -15,7 +15,7 @@ interface Pattern {
   }): string | JSX.Element;
 }
 
-type Props = { patterns: Pattern[] } & TextProps;
+type Props = { patterns: RegexTextPattern[] } & TextProps;
 
 const RegexText = ({ children, patterns, ...props }: Props) => {
   if (patterns.length === 0 || typeof children !== 'string') return <>{children}</>;

package/src/index.ts

@@ -10,10 +10,10 @@ export { default as ImageWithPlaceholder } from './components/ImageWithPlacehold
 export { default as Modal } from './components/Modal';
 export { default as PressBox } from './components/PressBox';
 export { default as RegexText } from './components/RegexText';
+export type { RegexTextPattern } from './components/RegexText';
 export { default as Switch } from './components/Switch';
 export { default as Text } from './components/Text';
 export { default as TextInput } from './components/TextInput';
-export { default as URLParsedText } from './components/URLParsedText';
 
 /** UI **/
 export { default as ActionMenu } from './ui/ActionMenu';
@@ -24,11 +24,14 @@ export { default as BottomSheet } from './ui/BottomSheet';
 export { default as Button } from './ui/Button';
 export { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';
 export { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';
-export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
 export { default as Header } from './ui/Header';
 export { default as LoadingSpinner } from './ui/LoadingSpinner';
 export { default as MenuBar } from './ui/MenuBar';
 export type { MenuBarProps } from './ui/MenuBar';
+export { default as GroupChannelMessage } from './ui/GroupChannelMessage';
+export type { GroupChannelMessageProps } from './ui/GroupChannelMessage';
+export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
+
 export { default as OpenChannelMessage } from './ui/OpenChannelMessage';
 export type { OpenChannelMessageProps } from './ui/OpenChannelMessage';
 export { default as OpenChannelPreview } from './ui/OpenChannelPreview';

package/src/types.ts

@@ -43,8 +43,7 @@ export type Component =
   | 'ProfileCard'
   | 'Reaction'
   | 'OpenChannelMessage'
-  | 'OpenChannelPreview'
-  | 'Message';
+  | 'OpenChannelPreview';
 
 export type GetColorTree<
   Tree extends {
@@ -75,8 +74,6 @@ export type ComponentColorTree = GetColorTree<{
     Reaction: 'default' | 'rounded';
     OpenChannelMessage: 'default';
     OpenChannelPreview: 'default';
-    /** @deprecated **/
-    Message: 'incoming' | 'outgoing';
   };
   State: {
     Header: 'none';
@@ -92,8 +89,6 @@ export type ComponentColorTree = GetColorTree<{
     Reaction: 'enabled' | 'selected';
     OpenChannelMessage: 'enabled' | 'pressed';
     OpenChannelPreview: 'none';
-    /** @deprecated **/
-    Message: 'enabled' | 'pressed';
   };
   ColorPart: {
     Header: 'background' | 'borderBottom';
@@ -133,9 +128,6 @@ export type ComponentColorTree = GetColorTree<{
       | 'background'
       | 'coverBackground'
       | 'separator';
-
-    /** @deprecated **/
-    Message: 'textMsg' | 'textEdited' | 'textSenderName' | 'textTime' | 'background';
   };
 }>;
 export type ComponentColors<T extends Component> = {
@@ -183,8 +175,6 @@ export interface UIKitColors {
     reaction: ComponentColors<'Reaction'>;
     openChannelMessage: ComponentColors<'OpenChannelMessage'>;
     openChannelPreview: ComponentColors<'OpenChannelPreview'>;
-    /** @deprecated Please use `colors.ui.groupChannelMessage` **/
-    message: ComponentColors<'Message'>;
   };
 }
 

package/src/ui/Avatar/AvatarGroup.tsx

@@ -71,7 +71,7 @@ const getWidthPoint = (idx: number, total: number) => {
   return 0.5;
 };
 const getTopPoint = (idx: number, total: number) => {
-  if (total === 2) return -0.025;
+  if (total === 2) return 0;
   if (total === 3 && idx === 0) return -0.025;
   if (total === 3 && idx !== 0) return 0.525;
   if (idx === 0 || idx === 1) return -0.025;

package/src/ui/GroupChannelMessage/Message.admin.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import type { SendbirdAdminMessage } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import type { GroupChannelMessageProps } from './index';
+
+const AdminMessage = (props: GroupChannelMessageProps<SendbirdAdminMessage>) => {
+  const { colors } = useUIKitTheme();
+
+  return (
+    <Box style={styles.container}>
+      <Text caption2 color={colors.onBackground02} style={styles.text}>
+        {props.message.message}
+      </Text>
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    width: 300,
+    alignSelf: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
+
+export default AdminMessage;

package/src/ui/GroupChannelMessage/Message.file.image.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
+import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
+import PressBox from '../../components/PressBox';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageContainer from './MessageContainer';
+import type { GroupChannelMessageProps } from './index';
+
+const ImageFileMessage = (props: GroupChannelMessageProps<SendbirdFileMessage>) => {
+  const { onPress, onLongPress, variant = 'incoming' } = props;
+
+  const { colors } = useUIKitTheme();
+
+  return (
+    <MessageContainer {...props}>
+      <Box style={styles.container} backgroundColor={colors.ui.groupChannelMessage[variant].enabled.background}>
+        <PressBox activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>
+          <ImageWithPlaceholder source={{ uri: getAvailableUriFromFileMessage(props.message) }} style={styles.image} />
+        </PressBox>
+        {props.children}
+      </Box>
+    </MessageContainer>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  image: {
+    maxWidth: 240,
+    width: 240,
+    height: 160,
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+});
+
+export default ImageFileMessage;

package/src/ui/GroupChannelMessage/Message.file.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { SendbirdFileMessage, getFileExtension, getFileType } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import Icon from '../../components/Icon';
+import PressBox from '../../components/PressBox';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageContainer from './MessageContainer';
+import type { GroupChannelMessageProps } from './index';
+
+const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
+
+type Props = GroupChannelMessageProps<SendbirdFileMessage>;
+
+const FileMessage = (props: Props) => {
+  const { variant = 'incoming' } = props;
+  const { colors } = useUIKitTheme();
+
+  const fileType = getFileType(props.message.type || getFileExtension(props.message.name));
+  const color = colors.ui.groupChannelMessage[variant];
+
+  return (
+    <MessageContainer {...props}>
+      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>
+        {({ pressed }) => (
+          <Box backgroundColor={pressed ? color.pressed.background : color.enabled.background} style={styles.container}>
+            <Box style={styles.bubble}>
+              <Icon
+                icon={iconMapper[fileType]}
+                size={24}
+                containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}
+              />
+              <Text
+                body3
+                ellipsizeMode={'middle'}
+                numberOfLines={1}
+                color={pressed ? color.pressed.textMsg : color.enabled.textMsg}
+                style={styles.name}
+              >
+                {props.strings?.fileName || props.message.name}
+              </Text>
+            </Box>
+            {props.children}
+          </Box>
+        )}
+      </PressBox>
+    </MessageContainer>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    overflow: 'hidden',
+    borderRadius: 16,
+  },
+  bubble: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+  name: {
+    flexShrink: 1,
+  },
+});
+
+export default FileMessage;