@sendbird/uikit-react-native-foundation 3.7.6 → 3.8.0

package/src/ui/GroupChannelPreview/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { View } from 'react-native';
 
 import { conditionChaining } from '@sendbird/uikit-utils';
 
+import Box from '../../components/Box';
 import Icon from '../../components/Icon';
 import Image from '../../components/Image';
 import Text from '../../components/Text';
@@ -54,8 +54,8 @@ const GroupChannelPreview = ({
   const color = colors.ui.groupChannelPreview;
 
   return (
-    <View style={[styles.container, { backgroundColor: color.default.none.background }]}>
-      <View style={styles.coverContainer}>
+    <Box style={[styles.container, { backgroundColor: color.default.none.background }]}>
+      <Box style={styles.coverContainer}>
         {conditionChaining(
           [Boolean(customCover)],
           [
@@ -67,10 +67,10 @@ const GroupChannelPreview = ({
             />,
           ],
         )}
-      </View>
-      <View style={styles.rightSection}>
-        <View style={styles.rightTopSection}>
-          <View style={styles.channelInfoContainer}>
+      </Box>
+      <Box style={styles.rightSection}>
+        <Box style={styles.rightTopSection}>
+          <Box style={styles.channelInfoContainer}>
             {broadcast && (
               <Icon
                 size={16}
@@ -91,18 +91,18 @@ const GroupChannelPreview = ({
               <Icon size={16} icon={'freeze'} color={colors.primary} containerStyle={styles.channelInfoFrozen} />
             )}
             {notificationOff && <Icon size={16} icon={'notifications-off-filled'} color={colors.onBackground03} />}
-          </View>
-          <View style={styles.titleCaptionContainer}>
+          </Box>
+          <Box style={styles.titleCaptionContainer}>
             {titleCaptionLeft}
             <Text caption2 color={color.default.none.textTitleCaption} style={styles.titleCaptionText}>
               {titleCaption}
             </Text>
-          </View>
-        </View>
+          </Box>
+        </Box>
 
-        <View style={styles.rightBottomSection}>
-          <View style={styles.body}>
-            <View style={styles.bodyWrapper}>
+        <Box style={styles.rightBottomSection}>
+          <Box style={styles.body}>
+            <Box style={styles.bodyWrapper}>
               {bodyIcon && (
                 <Icon
                   size={18}
@@ -114,34 +114,35 @@ const GroupChannelPreview = ({
                   ]}
                 />
               )}
-              <Text
-                body3
-                numberOfLines={1}
-                ellipsizeMode={bodyIcon ? 'middle' : 'tail'}
-                style={styles.bodyText}
-                color={color.default.none.textBody}
-              >
-                {body}
-              </Text>
-            </View>
-          </View>
-          <View style={styles.unreadContainer}>
+              <Box flex={1} alignItems={'flex-start'}>
+                <Text
+                  body3
+                  numberOfLines={1}
+                  ellipsizeMode={bodyIcon ? 'middle' : 'tail'}
+                  color={color.default.none.textBody}
+                >
+                  {body}
+                </Text>
+              </Box>
+            </Box>
+          </Box>
+          <Box style={styles.unreadContainer}>
             {mentioned && (
               <Text h2 color={colors.ui.badge.default.none.background} style={styles.unreadMention}>
                 {mentionTrigger}
               </Text>
             )}
             {badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}
-          </View>
-        </View>
+          </Box>
+        </Box>
         <Separator color={color.default.none.separator} />
-      </View>
-    </View>
+      </Box>
+    </Box>
   );
 };
 
 type SeparatorProps = { color: string };
-const Separator = ({ color }: SeparatorProps) => <View style={[styles.separator, { backgroundColor: color }]} />;
+const Separator = ({ color }: SeparatorProps) => <Box style={[styles.separator, { backgroundColor: color }]} />;
 
 const styles = createStyleSheet({
   container: {
@@ -152,8 +153,8 @@ const styles = createStyleSheet({
     justifyContent: 'center',
   },
   coverContainer: {
-    marginLeft: 16,
-    marginRight: 16,
+    marginStart: 16,
+    marginEnd: 16,
   },
   channelCover: {
     width: 56,
@@ -163,7 +164,7 @@ const styles = createStyleSheet({
   rightSection: {
     flex: 1,
     paddingTop: 10,
-    paddingRight: 16,
+    paddingEnd: 16,
   },
   rightTopSection: {
     flexDirection: 'row',
@@ -171,28 +172,28 @@ const styles = createStyleSheet({
   },
   channelInfoContainer: {
     flex: 1,
-    marginRight: 4,
+    marginEnd: 4,
     alignItems: 'center',
     flexDirection: 'row',
   },
   channelInfoBroadcast: {
-    marginRight: 4,
+    marginEnd: 4,
   },
   channelInfoTitle: {
     flexShrink: 1,
-    marginRight: 4,
+    marginEnd: 4,
   },
   channelInfoMemberCount: {
     paddingTop: 2,
-    marginRight: 4,
+    marginEnd: 4,
   },
   channelInfoFrozen: {
-    marginRight: 4,
+    marginEnd: 4,
   },
   titleCaptionContainer: {
     alignItems: 'flex-start',
     flexDirection: 'row',
-    marginLeft: 4,
+    marginStart: 4,
   },
   titleCaptionText: {
     marginTop: 2,
@@ -203,7 +204,7 @@ const styles = createStyleSheet({
     flexDirection: 'row',
   },
   body: {
-    marginRight: 4,
+    marginEnd: 4,
     flex: 1,
     flexDirection: 'row',
     alignItems: 'flex-start',
@@ -212,26 +213,23 @@ const styles = createStyleSheet({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  bodyText: {
-    flex: 1,
-  },
   bodyIcon: {
     borderRadius: 8,
     width: 26,
     height: 26,
-    marginRight: 4,
+    marginEnd: 4,
   },
   unreadContainer: {
     flexDirection: 'row',
     alignItems: 'flex-start',
   },
   unreadMention: {
-    marginRight: 4,
+    marginEnd: 4,
   },
   separator: {
     position: 'absolute',
-    left: 0,
-    right: -16,
+    start: 0,
+    end: -16,
     bottom: 0,
     height: 1,
   },

package/src/ui/Header/index.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { conditionChaining } from '@sendbird/uikit-utils';
+import { conditionChaining, useSafeAreaPadding } from '@sendbird/uikit-utils';
 
 import Text, { TextProps } from '../../components/Text';
 import type { BaseHeaderProps, HeaderElement } from '../../index';
@@ -41,7 +40,7 @@ const Header = ({
   const { topInset, defaultTitleAlign, defaultHeight } = useHeaderStyle();
 
   const { colors } = useUIKitTheme();
-  const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['left', 'right']);
 
   const actualTitleAlign = titleAlign ?? defaultTitleAlign;
   const actualTopInset = clearStatusBarTopInset ? 0 : topInset;
@@ -60,8 +59,8 @@ const Header = ({
         styles.container,
         {
           [statusBarTopInsetAs === 'padding' ? 'paddingTop' : 'marginTop']: actualTopInset,
-          paddingLeft: paddingLeft + styles.container.paddingHorizontal,
-          paddingRight: paddingRight + styles.container.paddingHorizontal,
+          paddingStart: safeArea.paddingStart + styles.container.paddingHorizontal,
+          paddingEnd: safeArea.paddingEnd + styles.container.paddingHorizontal,
           backgroundColor: colors.ui.header.nav.none.background,
           borderBottomColor: colors.ui.header.nav.none.borderBottom,
         },

package/src/ui/MenuBar/index.tsx

@@ -3,6 +3,7 @@ import { Pressable, View } from 'react-native';
 
 import { conditionChaining } from '@sendbird/uikit-utils';
 
+import Box from '../../components/Box';
 import Divider from '../../components/Divider';
 import Icon from '../../components/Icon';
 import Text from '../../components/Text';
@@ -58,9 +59,11 @@ const MenuBar = ({
             ]}
           />
         )}
-        <Text subtitle2 numberOfLines={1} style={styles.name}>
-          {name}
-        </Text>
+        <Box flex={1} alignItems={'flex-start'}>
+          <Text subtitle2 numberOfLines={1} style={styles.name}>
+            {name}
+          </Text>
+        </Box>
         {Boolean(actionLabel) && (
           <Text subtitle2 numberOfLines={1} color={colors.onBackground02} style={styles.actionLabel}>
             {actionLabel}
@@ -81,17 +84,17 @@ const styles = createStyleSheet({
   },
   name: {
     flex: 1,
-    marginRight: 8,
+    marginEnd: 8,
   },
   icon: {
-    marginRight: 16,
+    marginEnd: 16,
   },
   containedIcon: {
     borderRadius: 24,
     padding: 4,
   },
   actionLabel: {
-    marginRight: 4,
+    marginEnd: 4,
   },
 });
 

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

@@ -33,7 +33,7 @@ const FileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>)
             >
               <Box
                 padding={4}
-                marginRight={8}
+                marginEnd={8}
                 borderRadius={8}
                 alignItems={'flex-start'}
                 backgroundColor={colors.background}

package/src/ui/OpenChannelMessage/Message.user.og.tsx

@@ -24,38 +24,51 @@ const OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage
       <PressBox onPress={onPress} onLongPress={onLongPress}>
         {({ pressed }) => (
           <MessageContainer pressed={pressed} {...rest}>
-            <Text body3 color={color.enabled.textMsg}>
-              <RegexText
+            <Box alignItems={'flex-start'}>
+              <Text
                 body3
                 color={color.enabled.textMsg}
-                patterns={[
-                  {
-                    regex: urlRegexRough,
-                    replacer({ match, parentProps, keyPrefix, index }) {
-                      return (
-                        <Text
-                          {...parentProps}
-                          key={`${keyPrefix}-${index}`}
-                          onPress={() => onPressURL?.(match)}
-                          onLongPress={onLongPress}
-                          color={colors.primary}
-                          style={parentProps?.style}
-                        >
-                          {match}
-                        </Text>
-                      );
-                    },
-                  },
-                ]}
+                suppressHighlighting
+                supportRTLAlign
+                originalText={props.message.message}
               >
-                {props.message.message}
-              </RegexText>
-              {Boolean(props.message.updatedAt) && (
-                <Text body3 color={color.enabled.textMsgPostfix}>
-                  {props.strings?.edited ?? ' (edited)'}
-                </Text>
-              )}
-            </Text>
+                <RegexText
+                  body3
+                  suppressHighlighting
+                  supportRTLAlign
+                  originalText={props.message.message}
+                  color={color.enabled.textMsg}
+                  patterns={[
+                    {
+                      regex: urlRegexRough,
+                      replacer({ match, parentProps, keyPrefix, index }) {
+                        return (
+                          <Text
+                            {...parentProps}
+                            key={`${keyPrefix}-${index}`}
+                            onPress={() => onPressURL?.(match)}
+                            onLongPress={onLongPress}
+                            color={colors.primary}
+                            style={parentProps?.style}
+                            supportRTLAlign
+                            originalText={match}
+                          >
+                            {match}
+                          </Text>
+                        );
+                      },
+                    },
+                  ]}
+                >
+                  {props.message.message}
+                </RegexText>
+                {Boolean(props.message.updatedAt) && (
+                  <Text body3 color={color.enabled.textMsgPostfix}>
+                    {props.strings?.edited ?? ' (edited)'}
+                  </Text>
+                )}
+              </Text>
+            </Box>
           </MessageContainer>
         )}
       </PressBox>
@@ -73,6 +86,7 @@ const OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage
                   borderRadius={8}
                   style={styles.ogContainer}
                   backgroundColor={pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground}
+                  alignItems={'flex-start'}
                 >
                   <Text numberOfLines={1} caption2 color={colors.onBackground02} style={styles.ogUrl}>
                     {props.message.ogMetaData.url}

package/src/ui/OpenChannelMessage/Message.user.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
 import { urlRegexStrict } from '@sendbird/uikit-utils';
 
+import Box from '../../components/Box';
 import PressBox from '../../components/PressBox';
 import RegexText from '../../components/RegexText';
 import Text from '../../components/Text';
@@ -20,38 +21,54 @@ const UserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage, Props>)
     <PressBox onPress={onPress} onLongPress={onLongPress}>
       {({ pressed }) => (
         <MessageContainer pressed={pressed} {...rest}>
-          <Text body3 color={color.enabled.textMsg}>
-            <RegexText
+          <Box alignItems={'flex-start'}>
+            <Text
               body3
               color={color.enabled.textMsg}
-              patterns={[
-                {
-                  regex: urlRegexStrict,
-                  replacer({ match, parentProps, keyPrefix, index }) {
-                    return (
-                      <Text
-                        {...parentProps}
-                        key={`${keyPrefix}-${index}`}
-                        onPress={() => onPressURL?.(match)}
-                        onLongPress={onLongPress}
-                        color={colors.primary}
-                        style={parentProps?.style}
-                      >
-                        {match}
-                      </Text>
-                    );
-                  },
-                },
-              ]}
+              suppressHighlighting
+              supportRTLAlign
+              originalText={props.message.message}
             >
-              {props.message.message}
-            </RegexText>
-            {Boolean(props.message.updatedAt) && (
-              <Text body3 color={color.enabled.textMsgPostfix}>
-                {props.strings?.edited ?? ' (edited)'}
-              </Text>
-            )}
-          </Text>
+              <RegexText
+                body3
+                suppressHighlighting
+                supportRTLAlign
+                originalText={props.message.message}
+                color={color.enabled.textMsg}
+                patterns={[
+                  {
+                    regex: urlRegexStrict,
+                    replacer({ match, parentProps, keyPrefix, index }) {
+                      return (
+                        <Text
+                          {...parentProps}
+                          key={`${keyPrefix}-${index}`}
+                          onPress={() => onPressURL?.(match)}
+                          onLongPress={onLongPress}
+                          color={colors.primary}
+                          style={parentProps?.style}
+                        >
+                          {match}
+                        </Text>
+                      );
+                    },
+                  },
+                ]}
+              >
+                {props.message.message}
+              </RegexText>
+              {Boolean(props.message.updatedAt) && (
+                <Text
+                  body3
+                  color={color.enabled.textMsgPostfix}
+                  supportRTLAlign
+                  originalText={props.strings?.edited ?? ' (edited)'}
+                >
+                  {props.strings?.edited ?? ' (edited)'}
+                </Text>
+              )}
+            </Text>
+          </Box>
         </MessageContainer>
       )}
     </PressBox>

package/src/ui/OpenChannelMessage/MessageContainer.tsx

@@ -56,11 +56,11 @@ const MessageContainer = ({
     <Box
       flexDirection={'row'}
       paddingVertical={grouped ? 5 : 6}
-      paddingLeft={12}
-      paddingRight={12}
+      paddingStart={12}
+      paddingEnd={12}
       backgroundColor={pressed ? color.pressed.background : color.enabled.background}
     >
-      <Box marginRight={12}>
+      <Box marginEnd={12}>
         {!grouped && 'sender' in props.message ? (
           <PressBox onPress={props.onPressAvatar}>
             <Avatar size={styles.avatar.width} uri={props.message.sender.profileUrl} />
@@ -72,7 +72,7 @@ const MessageContainer = ({
       <Box flexShrink={1} flex={1} flexDirection={'column'} alignItems={'flex-start'}>
         {!grouped && 'sender' in props.message && (
           <Box flexDirection={'row'} alignItems={'center'} marginBottom={2}>
-            <Box marginRight={4} flexShrink={1}>
+            <Box marginEnd={4} flexShrink={1}>
               <Text
                 caption1
                 ellipsizeMode={'middle'}

package/src/ui/OpenChannelPreview/index.tsx

@@ -34,7 +34,7 @@ const OpenChannelPreview = ({ customCover, coverUrl, participantsCount = 0, titl
         height={styles.channelCover.height}
         borderRadius={styles.channelCover.width}
         overflow={'hidden'}
-        marginRight={16}
+        marginEnd={16}
       >
         {conditionChaining(
           [Boolean(customCover)],
@@ -53,11 +53,11 @@ const OpenChannelPreview = ({ customCover, coverUrl, participantsCount = 0, titl
           <Text subtitle1 style={styles.channelInfoTitle} numberOfLines={1} color={color.textTitle}>
             {title}
           </Text>
-          {frozen && <Icon size={16} icon={'freeze'} color={color.frozenIcon} containerStyle={styles.marginLeft} />}
+          {frozen && <Icon size={16} icon={'freeze'} color={color.frozenIcon} containerStyle={styles.marginStart} />}
         </Box>
         <Box flexDirection={'row'} flexShrink={1} alignItems={'center'} justifyContent={'flex-start'}>
           <Box flexDirection={'row'} alignItems={'center'}>
-            <Icon size={16} icon={'members'} color={color.participantsIcon} containerStyle={styles.marginRight} />
+            <Icon size={16} icon={'members'} color={color.participantsIcon} containerStyle={styles.marginEnd} />
             <Text caption2 color={color.textParticipants}>
               {truncatedCount(participantsCount, 999)}
             </Text>
@@ -79,16 +79,16 @@ const styles = createStyleSheet({
   channelInfoTitle: {
     flexShrink: 1,
   },
-  marginRight: {
-    marginRight: 4,
+  marginEnd: {
+    marginEnd: 4,
   },
-  marginLeft: {
-    marginLeft: 4,
+  marginStart: {
+    marginStart: 4,
   },
   separator: {
     position: 'absolute',
-    left: 0,
-    right: -16,
+    start: 0,
+    end: -16,
     bottom: 0,
     height: 1,
   },

package/src/ui/ProfileCard/index.tsx

@@ -59,6 +59,7 @@ const styles = createStyleSheet({
     marginBottom: 8,
   },
   profileInfoContainer: {
+    alignItems: 'flex-start',
     padding: 16,
   },
   profileInfoBodyLabel: {

package/src/ui/Prompt/index.tsx

@@ -84,7 +84,7 @@ const Prompt = ({
       <DialogBox style={styles.container}>
         {Boolean(title) && (
           <View style={styles.titleContainer}>
-            <Text h1 color={colors.ui.dialog.default.none.text} numberOfLines={1} style={{ flex: 1 }}>
+            <Text h1 color={colors.ui.dialog.default.none.text} numberOfLines={1}>
               {title}
             </Text>
           </View>
@@ -98,7 +98,7 @@ const Prompt = ({
             variant={'underline'}
             value={text}
             onChangeText={setText}
-            style={{ paddingLeft: 0, paddingRight: 0, paddingTop: 10, paddingBottom: 10 }}
+            style={{ paddingStart: 0, paddingEnd: 0, paddingTop: 10, paddingBottom: 10 }}
           />
         </View>
 
@@ -137,8 +137,7 @@ const styles = createStyleSheet({
     marginBottom: 12,
     paddingVertical: 12,
     paddingHorizontal: 24,
-    flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'flex-start',
   },
   inputContainer: {
     paddingHorizontal: 24,
@@ -151,7 +150,7 @@ const styles = createStyleSheet({
     padding: 12,
   },
   button: {
-    marginLeft: 8,
+    marginStart: 8,
   },
 });
 

package/src/ui/Toast/index.tsx

@@ -118,7 +118,7 @@ const styles = createStyleSheet({
     flexDirection: 'row',
   },
   icon: {
-    marginRight: 4,
+    marginEnd: 4,
   },
   text: {
     maxWidth: 240,

package/src/ui/TypingIndicatorBubble/index.tsx

@@ -28,7 +28,7 @@ const TypingIndicatorBubble = ({ typingUsers, containerStyle, maxAvatar }: Props
           remainsTextColor: colors.onBackground02,
           remainsBackgroundColor: select({ light: palette.background100, dark: palette.background400 }),
         }}
-        containerStyle={{ marginRight: 12 }}
+        containerStyle={{ marginEnd: 12 }}
       >
         {typingUsers.map((user, index) => (
           <Avatar key={index} uri={user.profileUrl} />
@@ -78,7 +78,7 @@ const TypingDots = ({ dotColor, backgroundColor }: TypingDotsProps) => {
             style={[
               styles.dot,
               {
-                marginRight: index === dots.length - 1 ? 0 : 6,
+                marginEnd: index === dots.length - 1 ? 0 : 6,
                 opacity: opacity,
                 transform: [{ scale: scale }],
                 backgroundColor: backgroundColor,