@sendbird/uikit-react-native 2.1.0 → 2.3.0

package/lib/typescript/src/platform/types.d.ts

@@ -1,8 +1,8 @@
 import type SBUError from '../libs/SBUError';
-export declare type Unsubscribe = () => void | undefined;
-export declare type DownloadedPath = string;
-export declare type FilePickerResponse = FileType | null;
-export declare type FileType = {
+export type Unsubscribe = () => void | undefined;
+export type DownloadedPath = string;
+export type FilePickerResponse = FileType | null;
+export type FileType = {
     uri: string;
     size: number;
     name: string;
@@ -32,7 +32,7 @@ export interface OpenCameraOptions extends OpenResultListener {
     cameraType?: 'front' | 'back';
     mediaType?: 'photo' | 'video' | 'all';
 }
-export declare type OpenDocumentOptions = OpenResultListener;
+export type OpenDocumentOptions = OpenResultListener;
 export interface SaveOptions {
     fileUrl: string;
     fileName: string;
@@ -58,10 +58,35 @@ interface GetVideoThumbnailOptions {
     timeMills?: number;
     quality?: number;
 }
+interface CompressImageOptions {
+    /**
+     * A uri of image file to compress
+     * */
+    uri: string;
+    /**
+     * A resize width, apply only to downscale
+     * */
+    maxWidth?: number;
+    /**
+     * A resize height, apply only to downscale
+     * */
+    maxHeight?: number;
+    /**
+     * A value in range 0.0 - 1.0 specifying compression level of the result image.
+     * 1 means highest quality and 0 the lowest quality.
+     * */
+    compressionRate?: number;
+}
+type GetVideoThumbnailResult = Promise<{
+    path: string;
+} | null>;
+type CompressImageResult = Promise<{
+    uri: string;
+    size: number;
+} | null>;
 export interface MediaServiceInterface {
     VideoComponent<Props = {}>(props: VideoProps & Props): JSX.Element;
-    getVideoThumbnail(options: GetVideoThumbnailOptions): Promise<{
-        path: string;
-    } | null>;
+    getVideoThumbnail(options: GetVideoThumbnailOptions): GetVideoThumbnailResult;
+    compressImage(options: CompressImageOptions): CompressImageResult;
 }
 export {};

package/lib/typescript/src/types.d.ts

@@ -1,6 +1,7 @@
 import type { ErrorInfo, ReactNode } from 'react';
-export declare type KeyValuePairGet = [string, string | null];
-export declare type KeyValuePairSet = [string, string];
+import type { SendbirdUser } from '@sendbird/uikit-utils';
+export type KeyValuePairGet = [string, string | null];
+export type KeyValuePairSet = [string, string];
 export interface LocalCacheStorage {
     getAllKeys(): Promise<readonly string[] | string[]>;
     getItem(key: string): Promise<string | null>;
@@ -10,11 +11,19 @@ export interface LocalCacheStorage {
     multiGet?(keys: string[]): Promise<readonly KeyValuePairGet[] | KeyValuePairGet[]>;
     multiRemove?(keys: string[]): Promise<void>;
 }
-export declare type ErrorBoundaryProps = {
+export type ErrorBoundaryProps = {
     error: Error;
     errorInfo: ErrorInfo;
     reset: () => void;
 };
-export declare type CommonComponent<P = {}> = (props: P & {
+export type CommonComponent<P = {}> = (props: P & {
     children?: ReactNode;
 }) => null | JSX.Element;
+export type MentionedUser = {
+    range: Range;
+    user: SendbirdUser;
+};
+export type Range = {
+    start: number;
+    end: number;
+};

package/lib/typescript/src/version.d.ts

@@ -1,2 +1,2 @@
-declare const VERSION = "2.1.0";
+declare const VERSION = "2.3.0";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "react-native-uikit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -41,11 +41,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-chat-hooks": "2.1.0",
-    "@sendbird/uikit-react-native-foundation": "2.1.0",
-    "@sendbird/uikit-utils": "2.1.0"
+    "@sendbird/uikit-chat-hooks": "2.3.0",
+    "@sendbird/uikit-react-native-foundation": "2.3.0",
+    "@sendbird/uikit-utils": "2.3.0"
   },
   "devDependencies": {
+    "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@react-native-camera-roll/camera-roll": "^5.0.4",
     "@react-native-clipboard/clipboard": "^1.8.5",
     "@react-native-community/netinfo": "^9.3.0",
@@ -59,6 +60,7 @@
     "expo-clipboard": "^2.1.1",
     "expo-document-picker": "^10.1.3",
     "expo-file-system": "^13.1.4",
+    "expo-image-manipulator": "^11.0.0",
     "expo-image-picker": "^12.0.2",
     "expo-media-library": "^14.0.1",
     "expo-notifications": "^0.14.1",
@@ -76,9 +78,10 @@
     "react-native-permissions": "^3.6.0",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-video": "^5.2.0",
-    "typescript": "^4.1.3"
+    "typescript": "4.9.4"
   },
   "peerDependencies": {
+    "@bam.tech/react-native-image-resizer": ">=3.0.0",
     "@react-native-camera-roll/camera-roll": ">=5.0.0",
     "@react-native-clipboard/clipboard": ">=1.8.5",
     "@react-native-community/netinfo": ">=9.3.0",
@@ -89,6 +92,7 @@
     "expo-clipboard": ">=2.1.1",
     "expo-document-picker": ">=10.1.3",
     "expo-file-system": ">=13.1.4",
+    "expo-image-manipulator": ">=11.0.0",
     "expo-image-picker": ">=12.0.2",
     "expo-notifications": ">=0.14.1",
     "expo-video-thumbnails": ">=6.4.0",
@@ -103,6 +107,9 @@
     "react-native-video": ">=5.2.0"
   },
   "peerDependenciesMeta": {
+    "@bam.tech/react-native-image-resizer": {
+      "optional": true
+    },
     "@react-native-camera-roll/camera-roll": {
       "optional": true
     },
@@ -124,6 +131,9 @@
     "expo-file-system": {
       "optional": true
     },
+    "expo-image-manipulator": {
+      "optional": true
+    },
     "expo-image-picker": {
       "optional": true
     },
@@ -171,5 +181,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native"
   },
-  "gitHead": "c778a84a632487047fe532db188b32dfa6e93a7f"
+  "gitHead": "a9bf41fd7919436db99f6cc3bacd0f8d791b7729"
 }

package/src/components/ChatFlatList.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef
 import { FlatList, FlatListProps, Platform } from 'react-native';
 
 import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { SendbirdMessage, isMyMessage } from '@sendbird/uikit-utils';
+import { SendbirdMessage, getMessageUniqId, isMyMessage } from '@sendbird/uikit-utils';
 
 let ANDROID_BUG_ALERT_SHOWED = Platform.OS !== 'android';
 const BOTTOM_DETECT_THRESHOLD = 25;
@@ -90,6 +90,7 @@ const ChatFlatList = forwardRef<ChatFlatListRef, Props>(function CustomFlatList(
       onEndReached={onTopReached}
       scrollEventThrottle={16}
       onScroll={_onScroll}
+      keyExtractor={getMessageUniqId}
     />
   );
 });

package/src/components/FileViewer.tsx

@@ -63,10 +63,8 @@ const FileViewer = ({
   const fileType = getFileType(fileMessage.type || getFileExtension(fileMessage.url));
 
   useEffect(() => {
-    if (!mediaService?.VideoComponent || fileType === 'file') {
-      onClose();
-    }
-  }, [mediaService]);
+    if (fileType === 'file') onClose();
+  }, []);
 
   const fileViewer = useIIFE(() => {
     switch (fileType) {
@@ -83,7 +81,6 @@ const FileViewer = ({
 
       case 'video':
       case 'audio': {
-        if (!mediaService?.VideoComponent) return null;
         return (
           <mediaService.VideoComponent
             source={{ uri: fileMessage.url }}

package/src/components/MessageRenderer/FileMessage/BaseFileMessage.tsx

@@ -11,32 +11,37 @@ const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: '
 type Props = FileMessageProps & {
   type: 'image' | 'audio' | 'video' | 'file';
 };
-const BaseFileMessage = ({ message, variant, pressed, type }: Props) => {
+const BaseFileMessage = ({ message, variant, pressed, type, children }: Props) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
   return (
-    <View style={[styles.container, { backgroundColor: color.background }]}>
-      <Icon
-        icon={iconMapper[type]}
-        size={24}
-        containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}
-      />
-      <Text body3 ellipsizeMode={'middle'} numberOfLines={1} color={color.textMsg} style={styles.name}>
-        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message)}
-      </Text>
+    <View style={[styles.bubbleContainer, { backgroundColor: color.background }]}>
+      <View style={styles.container}>
+        <Icon
+          icon={iconMapper[type]}
+          size={24}
+          containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}
+        />
+        <Text body3 ellipsizeMode={'middle'} numberOfLines={1} color={color.textMsg} style={styles.name}>
+          {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message)}
+        </Text>
+      </View>
+      {children}
     </View>
   );
 };
 
 const styles = createStyleSheet({
+  bubbleContainer: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
     paddingHorizontal: 12,
     paddingVertical: 6,
-    borderRadius: 16,
   },
   name: {
     flexShrink: 1,

package/src/components/MessageRenderer/FileMessage/ImageFileMessage.tsx

@@ -34,7 +34,7 @@ const useRetry = (hasError: boolean, retryCount = 5) => {
   return retryCountRef.current;
 };
 
-const ImageFileMessage = ({ message }: FileMessageProps) => {
+const ImageFileMessage = ({ message, children, variant }: FileMessageProps) => {
   const { colors } = useUIKitTheme();
   const [imageNotFound, setImageNotFound] = useState(false);
 
@@ -44,29 +44,41 @@ const ImageFileMessage = ({ message }: FileMessageProps) => {
   const key = useRetry(imageNotFound);
 
   return (
-    <View style={style}>
-      <Image
-        key={key}
-        source={{ uri: fileUrl }}
-        style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}
-        resizeMode={'cover'}
-        resizeMethod={'resize'}
-        onError={() => setImageNotFound(true)}
-        onLoad={() => setImageNotFound(false)}
-      />
-      {imageNotFound && (
-        <Icon
-          containerStyle={StyleSheet.absoluteFill}
-          icon={'thumbnail-none'}
-          size={48}
-          color={colors.onBackground02}
+    <View
+      style={[
+        styles.bubbleContainer,
+        { backgroundColor: imageNotFound ? colors.onBackground04 : colors.ui.message[variant].enabled.background },
+      ]}
+    >
+      <View style={style}>
+        <Image
+          key={key}
+          source={{ uri: fileUrl }}
+          style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}
+          resizeMode={'cover'}
+          resizeMethod={'resize'}
+          onError={() => setImageNotFound(true)}
+          onLoad={() => setImageNotFound(false)}
         />
-      )}
+        {imageNotFound && (
+          <Icon
+            containerStyle={StyleSheet.absoluteFill}
+            icon={'thumbnail-none'}
+            size={48}
+            color={colors.onBackground02}
+          />
+        )}
+      </View>
+      {children}
     </View>
   );
 };
 
 const styles = createStyleSheet({
+  bubbleContainer: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
   image: {
     width: 240,
     maxWidth: 240,

package/src/components/MessageRenderer/FileMessage/VideoFileMessage.tsx

@@ -15,7 +15,7 @@ const useRetry = (videoFileUrl: string, retryCount = 5) => {
   const { mediaService } = usePlatformService();
 
   const fetchThumbnail = () => {
-    return mediaService?.getVideoThumbnail({ url: videoFileUrl, timeMills: 1000 }).then((result) => {
+    return mediaService.getVideoThumbnail({ url: videoFileUrl, timeMills: 1000 }).then((result) => {
       setState({ loading: false, thumbnail: result?.path ?? null });
     });
   };
@@ -41,26 +41,33 @@ const useRetry = (videoFileUrl: string, retryCount = 5) => {
   return state;
 };
 
-const VideoFileMessage = ({ message }: FileMessageProps) => {
+const VideoFileMessage = ({ message, variant, children }: FileMessageProps) => {
   const { colors } = useUIKitTheme();
 
   const fileUrl = getAvailableUriFromFileMessage(message);
-  const style = [styles.image, { backgroundColor: colors.onBackground04 }];
+  const style = [styles.video, { backgroundColor: colors.onBackground04 }];
 
   const { loading, thumbnail } = useRetry(fileUrl);
 
   if (loading) {
     return (
-      <View style={[style, styles.container]}>
-        <PlayIcon />
+      <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>
+        <View style={[styles.bubbleContainer, styles.bubbleInnerContainer]}>
+          <View style={style} />
+          <PlayIcon />
+        </View>
+        {children}
       </View>
     );
   }
 
   return (
-    <View style={styles.container}>
-      <Image source={{ uri: thumbnail || fileUrl }} style={style} resizeMode={'cover'} resizeMethod={'resize'} />
-      <PlayIcon />
+    <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>
+      <View style={[styles.bubbleContainer, styles.bubbleInnerContainer]}>
+        <Image source={{ uri: thumbnail || fileUrl }} style={style} resizeMode={'cover'} resizeMethod={'resize'} />
+        <PlayIcon />
+      </View>
+      {children}
     </View>
   );
 };
@@ -79,15 +86,18 @@ const PlayIcon = () => {
 };
 
 const styles = createStyleSheet({
-  container: {
+  bubbleContainer: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  bubbleInnerContainer: {
     alignItems: 'center',
     justifyContent: 'center',
   },
-  image: {
+  video: {
     width: 240,
     maxWidth: 240,
     height: 160,
-    borderRadius: 16,
   },
   playIcon: {
     position: 'absolute',

package/src/components/MessageRenderer/FileMessage/index.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { SendbirdFileMessage, getFileExtension, getFileType } from '@sendbird/uikit-utils';
 
-import { usePlatformService } from '../../../hooks/useContext';
 import type { MessageRendererInterface } from '../index';
 import BaseFileMessage from './BaseFileMessage';
 import ImageFileMessage from './ImageFileMessage';
@@ -10,12 +9,10 @@ import VideoFileMessage from './VideoFileMessage';
 
 export type FileMessageProps = MessageRendererInterface<SendbirdFileMessage>;
 const FileMessage = (props: FileMessageProps) => {
-  const { mediaService } = usePlatformService();
-
   const fileType = getFileType(props.message.type || getFileExtension(props.message.name));
 
   if (fileType === 'image') return <ImageFileMessage {...props} />;
-  if (fileType === 'video' && mediaService?.getVideoThumbnail) return <VideoFileMessage {...props} />;
+  if (fileType === 'video') return <VideoFileMessage {...props} />;
 
   return <BaseFileMessage {...props} type={fileType} />;
 };

package/src/components/MessageRenderer/UserMessage/BaseUserMessage.tsx

@@ -1,33 +1,101 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import { Text, URLParsedText, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { urlRegexStrict } from '@sendbird/uikit-utils';
 
-import { useLocalization } from '../../../hooks/useContext';
+import { useLocalization, useSendbirdChat, useUserProfile } from '../../../hooks/useContext';
+import SBUUtils from '../../../libs/SBUUtils';
 import type { UserMessageProps } from './index';
 
-const BaseUserMessage = ({ message, variant, pressed }: UserMessageProps) => {
-  const { colors } = useUIKitTheme();
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+const BaseUserMessage = ({
+  message,
+  variant,
+  pressed,
+  children,
+  onLongPressMentionedUser,
+  onLongPressURL,
+}: UserMessageProps) => {
+  const { mentionManager, currentUser } = useSendbirdChat();
+  const { show } = useUserProfile();
   const { STRINGS } = useLocalization();
+  const { colors, palette } = useUIKitTheme();
+
+  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+
   return (
     <View style={[styles.container, { backgroundColor: color.background }]}>
-      <URLParsedText body3 strict color={color.textMsg}>
-        {message.message}
-        {Boolean(message.updatedAt) && (
-          <Text body3 color={color.textEdited}>
-            {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}
-          </Text>
-        )}
-      </URLParsedText>
+      <View style={styles.wrapper}>
+        <Text body3 color={color.textMsg}>
+          <RegexText
+            body3
+            color={color.textMsg}
+            patterns={[
+              {
+                regex: mentionManager.templateRegex,
+                replacer({ match, groups, parentProps, index, keyPrefix }) {
+                  const user = message.mentionedUsers?.find((it) => it.userId === groups[2]);
+                  if (user) {
+                    return (
+                      <Text
+                        {...parentProps}
+                        key={`${keyPrefix}-${index}`}
+                        onPress={() => show(user)}
+                        onLongPress={onLongPressMentionedUser}
+                        style={[
+                          parentProps?.style,
+                          { fontWeight: 'bold' },
+                          user.userId === currentUser?.userId && { backgroundColor: palette.highlight },
+                        ]}
+                      >
+                        {`${mentionManager.asMentionedMessageText(user)}`}
+                      </Text>
+                    );
+                  }
+                  return match;
+                },
+              },
+              {
+                regex: urlRegexStrict,
+                replacer({ match, parentProps, index, keyPrefix }) {
+                  return (
+                    <Text
+                      {...parentProps}
+                      key={`${keyPrefix}-${index}`}
+                      onPress={() => SBUUtils.openURL(match)}
+                      onLongPress={onLongPressURL}
+                      style={[parentProps?.style, { textDecorationLine: 'underline' }]}
+                    >
+                      {match}
+                    </Text>
+                  );
+                },
+              },
+            ]}
+          >
+            {mentionManager.shouldUseMentionedMessageTemplate(message)
+              ? message.mentionedMessageTemplate
+              : message.message}
+          </RegexText>
+          {Boolean(message.updatedAt) && (
+            <Text body3 color={color.textEdited}>
+              {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}
+            </Text>
+          )}
+        </Text>
+      </View>
+      {children}
     </View>
   );
 };
 const styles = createStyleSheet({
   container: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  wrapper: {
     paddingHorizontal: 12,
     paddingVertical: 6,
-    borderRadius: 16,
   },
 });