@sendbird/uikit-react-native 2.1.0 → 2.2.0

package/lib/typescript/src/platform/createMediaService.native.d.ts

@@ -1,7 +1,7 @@
 import type * as CreateThumbnail from 'react-native-create-thumbnail';
 import type Video from 'react-native-video';
 import type { MediaServiceInterface } from './types';
-declare type Modules = {
+type Modules = {
     VideoComponent: typeof Video;
     thumbnailModule: typeof CreateThumbnail;
 };

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

@@ -6,7 +6,7 @@ export interface DynamicModules {
     'react-native-fast-image': typeof RNFastImage;
     '@react-native-community/netinfo': typeof RNNetInfo;
 }
-export declare type SBUNativeModule = keyof DynamicModules;
+export type SBUNativeModule = keyof DynamicModules;
 interface SBUDynamicModuleInfo {
     packageName: SBUNativeModule;
     minVersion: string;

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;

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/utils/common.d.ts

@@ -0,0 +1 @@
+export declare const openUrl: (url: string) => void;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "react-native-uikit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -41,9 +41,9 @@
     "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.2.0",
+    "@sendbird/uikit-react-native-foundation": "2.2.0",
+    "@sendbird/uikit-utils": "2.2.0"
   },
   "devDependencies": {
     "@react-native-camera-roll/camera-roll": "^5.0.4",
@@ -76,7 +76,7 @@
     "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": {
     "@react-native-camera-roll/camera-roll": ">=5.0.0",
@@ -171,5 +171,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native"
   },
-  "gitHead": "c778a84a632487047fe532db188b32dfa6e93a7f"
+  "gitHead": "bd7ab217a07e91ba644c0cb69694a92b123326bf"
 }

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/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,36 @@ 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: 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

@@ -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/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 { openUrl } from '../../../utils/common';
 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={() => 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,
   },
 });
 

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

@@ -2,88 +2,156 @@ import React, { useState } from 'react';
 import { Linking, TouchableOpacity, View } from 'react-native';
 
 import type { OGMetaData } from '@sendbird/chat/message';
-import {
-  Icon,
-  Image,
-  Text,
-  URLParsedText,
-  createStyleSheet,
-  useUIKitTheme,
-} from '@sendbird/uikit-react-native-foundation';
-import { conditionChaining } from '@sendbird/uikit-utils';
+import { Icon, Image, RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { conditionChaining, urlRegexRough } from '@sendbird/uikit-utils';
 
-import { useLocalization } from '../../../hooks/useContext';
+import { useLocalization, useSendbirdChat, useUserProfile } from '../../../hooks/useContext';
+import { openUrl } from '../../../utils/common';
 import type { UserMessageProps } from './index';
 
 type Props = UserMessageProps & {
   ogMetaData: OGMetaData;
 };
-const OpenGraphUserMessage = ({ message, variant, pressed, ogMetaData }: Props) => {
+
+const OpenGraphUserMessage = ({
+  message,
+  variant,
+  pressed,
+  ogMetaData,
+  children,
+  onLongPressMentionedUser,
+  onLongPressURL,
+}: Props) => {
+  const { mentionManager, currentUser } = useSendbirdChat();
   const { STRINGS } = useLocalization();
+  const { show } = useUserProfile();
   const { colors, select, palette } = useUIKitTheme();
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+
   const [imageNotFound, setImageNotFound] = useState(false);
+  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+
+  const containerBackground = select({ dark: palette.background400, light: palette.background100 });
+
   return (
-    <View style={[styles.container, { backgroundColor: color.background }]}>
-      <View style={styles.messageContainer}>
-        <URLParsedText body3 color={color.textMsg}>
-          {message.message}
-          {Boolean(message.updatedAt) && (
-            <Text body3 color={color.textEdited}>
-              {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}
-            </Text>
-          )}
-        </URLParsedText>
-      </View>
-      <TouchableOpacity activeOpacity={0.7} onPress={() => Linking.openURL(ogMetaData.url).catch()}>
-        <View
-          style={[
-            styles.ogImageContainer,
-            { backgroundColor: select({ dark: palette.background500, light: palette.background200 }) },
-          ]}
-        >
-          {conditionChaining(
-            [imageNotFound],
-            [
-              <Icon containerStyle={styles.ogImage} icon={'thumbnail-none'} size={48} color={colors.onBackground02} />,
-              <Image
-                source={{ uri: ogMetaData.defaultImage?.url }}
-                style={styles.ogImage}
-                resizeMode={'cover'}
-                onError={() => setImageNotFound(true)}
-              />,
-            ],
-          )}
+    <View style={[styles.bubbleContainer, { backgroundColor: containerBackground }]}>
+      <View style={[styles.container, styles.bubbleContainer, { backgroundColor: color.background }]}>
+        <View style={styles.messageContainer}>
+          <Text body3 color={color.textMsg}>
+            <RegexText
+              body3
+              color={color.textMsg}
+              patterns={[
+                {
+                  regex: mentionManager.templateRegex,
+                  replacer({ match, groups, parentProps, keyPrefix, index }) {
+                    const user = message.mentionedUsers?.find((it) => it.userId === groups[2]);
+                    if (user) {
+                      const isCurrentUser = user.userId === currentUser?.userId;
+                      return (
+                        <Text
+                          {...parentProps}
+                          key={`${keyPrefix}-${index}`}
+                          onPress={() => show(user)}
+                          onLongPress={onLongPressMentionedUser}
+                          style={[
+                            parentProps?.style,
+                            styles.mentionedText,
+                            isCurrentUser && { backgroundColor: palette.highlight },
+                          ]}
+                        >
+                          {`${mentionManager.asMentionedMessageText(user)}`}
+                        </Text>
+                      );
+                    }
+                    return match;
+                  },
+                },
+                {
+                  regex: urlRegexRough,
+                  replacer({ match, parentProps, keyPrefix, index }) {
+                    return (
+                      <Text
+                        {...parentProps}
+                        key={`${keyPrefix}-${index}`}
+                        onPress={() => openUrl(match)}
+                        onLongPress={onLongPressURL}
+                        style={[parentProps?.style, styles.urlText]}
+                      >
+                        {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>
-        <View
-          style={[
-            styles.ogContainer,
-            { backgroundColor: select({ dark: palette.background400, light: palette.background100 }) },
-          ]}
+        <TouchableOpacity
+          style={{ backgroundColor: select({ dark: palette.background500, light: palette.background200 }) }}
+          activeOpacity={0.85}
+          onPress={() => Linking.openURL(ogMetaData.url).catch()}
         >
-          <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>
-            {ogMetaData.title}
-          </Text>
-          {Boolean(ogMetaData.description) && (
-            <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>
-              {ogMetaData.description}
+          <View
+            style={[
+              styles.ogImageContainer,
+              { backgroundColor: select({ dark: palette.background500, light: palette.background200 }) },
+            ]}
+          >
+            {conditionChaining(
+              [imageNotFound],
+              [
+                <Icon
+                  containerStyle={styles.ogImage}
+                  icon={'thumbnail-none'}
+                  size={48}
+                  color={colors.onBackground02}
+                />,
+                <Image
+                  source={{ uri: ogMetaData.defaultImage?.url }}
+                  style={styles.ogImage}
+                  resizeMode={'cover'}
+                  onError={() => setImageNotFound(true)}
+                />,
+              ],
+            )}
+          </View>
+          <View style={[styles.ogContainer, { backgroundColor: containerBackground }]}>
+            <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>
+              {ogMetaData.title}
             </Text>
-          )}
-          <Text numberOfLines={1} caption2 color={colors.onBackground02}>
-            {ogMetaData.url}
-          </Text>
-        </View>
-      </TouchableOpacity>
+            {Boolean(ogMetaData.description) && (
+              <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>
+                {ogMetaData.description}
+              </Text>
+            )}
+            <Text numberOfLines={1} caption2 color={colors.onBackground02}>
+              {ogMetaData.url}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+      {children}
     </View>
   );
 };
 
 const styles = createStyleSheet({
+  bubbleContainer: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
   container: {
     width: 240,
     maxWidth: 240,
-    borderRadius: 16,
-    overflow: 'hidden',
   },
   messageContainer: {
     paddingVertical: 6,
@@ -109,6 +177,12 @@ const styles = createStyleSheet({
     lineHeight: 14,
     marginBottom: 8,
   },
+  mentionedText: {
+    fontWeight: 'bold',
+  },
+  urlText: {
+    textDecorationLine: 'underline',
+  },
 });
 
 export default OpenGraphUserMessage;