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

package/src/components/ProgressBar/index.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, useEffect, useRef } from 'react';
-import { Animated, Easing, StyleSheet, ViewStyle } from 'react-native';
+import { Animated, Easing, I18nManager, StyleSheet, ViewStyle } from 'react-native';
 
 import { NOOP } from '@sendbird/uikit-utils';
 
@@ -42,6 +42,14 @@ const ProgressBar = ({ current = 100, total = 100, trackColor, barColor, overlay
     return NOOP;
   }, [percent]);
 
+  const progressBarPosition = (() => {
+    if (I18nManager.isRTL && I18nManager.doLeftAndRightSwapInRTL) {
+      return { right: 0 };
+    }
+
+    return { left: 0 };
+  })();
+
   return (
     <Box
       height={36}
@@ -52,17 +60,20 @@ const ProgressBar = ({ current = 100, total = 100, trackColor, barColor, overlay
       style={style}
     >
       <Animated.View
-        style={{
-          position: 'absolute',
-          width: progress.interpolate({
-            inputRange: [0, 1],
-            outputRange: ['0%', '100%'],
-            extrapolate: 'clamp',
-          }),
-          height: '100%',
-          opacity: 0.38,
-          backgroundColor: uiColors.bar,
-        }}
+        style={[
+          progressBarPosition,
+          {
+            position: 'absolute',
+            width: progress.interpolate({
+              inputRange: [0, 1],
+              outputRange: ['0%', '100%'],
+              extrapolate: 'clamp',
+            }),
+            height: '100%',
+            opacity: 0.38,
+            backgroundColor: uiColors.bar,
+          },
+        ]}
       />
       <Box style={StyleSheet.absoluteFill}>{overlay}</Box>
     </Box>

package/src/components/Switch/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, Platform, Pressable } from 'react-native';
+import { Animated, I18nManager, Platform, Pressable } from 'react-native';
 
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
@@ -24,9 +24,12 @@ const Switch = ({
   const { select, palette, colors } = useUIKitTheme();
   const position = useRef(new Animated.Value(0)).current;
 
+  const start = I18nManager.isRTL ? styles.thumbOn.start : styles.thumbOff.start;
+  const end = I18nManager.isRTL ? styles.thumbOff.start : styles.thumbOn.start;
+
   useEffect(() => {
     const animation = Animated.timing(position, {
-      toValue: value ? styles.thumbOn.left : styles.thumbOff.left,
+      toValue: value ? end : start,
       duration: 150,
       useNativeDriver: false,
     });
@@ -36,11 +39,12 @@ const Switch = ({
 
   const createInterpolate = <T extends string>(offValue: T, onValue: T) => {
     return position.interpolate({
-      inputRange: [styles.thumbOff.left, styles.thumbOn.left],
-      outputRange: [offValue, onValue],
+      inputRange: [styles.thumbOff.start, styles.thumbOn.start],
+      outputRange: I18nManager.isRTL ? [onValue, offValue] : [offValue, onValue],
       extrapolate: 'clamp',
     });
   };
+
   const _trackColor = createInterpolate(inactiveTrackColor ?? colors.onBackground04, trackColor ?? palette.primary200);
   const _thumbColor = createInterpolate(
     inactiveThumbColor ?? palette.background300,
@@ -86,10 +90,10 @@ const styles = createStyleSheet({
     }),
   },
   thumbOn: {
-    left: OFFSET.H / 2,
+    start: OFFSET.H / 2,
   },
   thumbOff: {
-    left: -OFFSET.H / 2,
+    start: -OFFSET.H / 2,
   },
 });
 

package/src/components/Text/index.tsx

@@ -1,19 +1,60 @@
 import React from 'react';
-import { Text as RNText, TextProps as RNTextProps } from 'react-native';
+import { I18nManager, Text as RNText, TextProps as RNTextProps, StyleSheet, TextStyle } from 'react-native';
+
+import { isStartsWithRTL } from '@sendbird/uikit-utils';
 
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import type { TypoName, UIKitTheme } from '../../types';
 
+export interface RTLTextAlignSupportProps {
+  /**
+   * If `I18nManager.isRTL` is `true` and this value is enabled, the text will be aligned according to RTL if it starts in an RTL language.
+   * In the case of the `Text` component, the alignment value is calculated based on `I18nManager.doLeftAndRightSwapInRTL`.
+   * For the `TextInput` component, the alignment value is calculated as a physical alignment, unaffected by `I18nManager.doLeftAndRightSwapInRTL`.
+   */
+  supportRTLAlign?: boolean;
+  /**
+   * If you want to enable `supportRTLAlign` but are using nested `Text` components that are not simple text under the `Text` component, pass the original text here.
+   */
+  originalText?: string;
+}
+
 type TypographyProps = Partial<Record<TypoName, boolean>>;
-export type TextProps = RNTextProps & TypographyProps & { color?: ((colors: UIKitTheme['colors']) => string) | string };
-const Text = ({ children, color, style, ...props }: TextProps) => {
+export type TextProps = RNTextProps &
+  TypographyProps & { color?: ((colors: UIKitTheme['colors']) => string) | string } & RTLTextAlignSupportProps;
+
+const Text = ({ children, color, style, supportRTLAlign = true, originalText, ...props }: TextProps) => {
   const { colors } = useUIKitTheme();
   const typoStyle = useTypographyFilter(props);
+
+  const textStyle = StyleSheet.flatten([
+    { color: typeof color === 'string' ? color : color?.(colors) ?? colors.text },
+    typoStyle,
+    style,
+  ]) as TextStyle;
+
+  const textAlign = (() => {
+    if (textStyle.textAlign && textStyle.textAlign !== 'left' && textStyle.textAlign !== 'right') {
+      return textStyle.textAlign;
+    }
+
+    if (I18nManager.isRTL && supportRTLAlign) {
+      if (
+        (originalText && isStartsWithRTL(originalText)) ||
+        (typeof children === 'string' && isStartsWithRTL(children))
+      ) {
+        return I18nManager.doLeftAndRightSwapInRTL ? 'left' : 'right';
+      } else {
+        return I18nManager.doLeftAndRightSwapInRTL ? 'right' : 'left';
+      }
+    }
+
+    if (textStyle.textAlign) return textStyle.textAlign;
+    return undefined;
+  })();
+
   return (
-    <RNText
-      style={[{ color: typeof color === 'string' ? color : color?.(colors) ?? colors.text }, typoStyle, style]}
-      {...props}
-    >
+    <RNText style={[textStyle, { textAlign }]} {...props}>
       {children}
     </RNText>
   );

package/src/components/TextInput/index.tsx

@@ -1,13 +1,19 @@
 import React from 'react';
-import { TextInput as RNTextInput, TextInputProps } from 'react-native';
+import { I18nManager, TextInput as RNTextInput, StyleSheet, TextInputProps, TextStyle } from 'react-native';
+
+import { isStartsWithRTL } from '@sendbird/uikit-utils';
 
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import type { UIKitTheme } from '../../types';
+import { RTLTextAlignSupportProps } from '../Text';
 
-type Props = { variant?: keyof UIKitTheme['colors']['ui']['input'] } & TextInputProps;
+type Props = {
+  variant?: keyof UIKitTheme['colors']['ui']['input'];
+} & TextInputProps &
+  RTLTextAlignSupportProps;
 const TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(
-  { children, style, variant = 'default', editable = true, ...props },
+  { children, style, variant = 'default', editable = true, originalText, supportRTLAlign = true, ...props },
   ref,
 ) {
   const { typography, colors } = useUIKitTheme();
@@ -20,19 +26,40 @@ const TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(
     lineHeight: typography.body3.fontSize ? typography.body3.fontSize * 1.2 : undefined,
   };
 
+  const textStyle = StyleSheet.flatten([
+    fontStyle,
+    styles.input,
+    { color: inputStyle.text, backgroundColor: inputStyle.background },
+    underlineStyle,
+    style,
+  ]) as TextStyle;
+
+  const textAlign = (() => {
+    if (textStyle.textAlign && textStyle.textAlign !== 'left' && textStyle.textAlign !== 'right') {
+      return textStyle.textAlign;
+    }
+
+    if (I18nManager.isRTL && supportRTLAlign) {
+      const text = originalText || props.value || props.placeholder;
+      // Note: TextInput is not affected by doLeftAndRightSwapInRTL
+      if (text && isStartsWithRTL(text)) {
+        return 'right';
+      } else {
+        return 'left';
+      }
+    }
+
+    if (textStyle.textAlign) return textStyle.textAlign;
+    return undefined;
+  })();
+
   return (
     <RNTextInput
       ref={ref}
       editable={editable}
       selectionColor={inputStyle.highlight}
       placeholderTextColor={inputStyle.placeholder}
-      style={[
-        fontStyle,
-        styles.input,
-        { color: inputStyle.text, backgroundColor: inputStyle.background },
-        underlineStyle,
-        style,
-      ]}
+      style={[textStyle, { textAlign }]}
       {...props}
     >
       {children}
@@ -45,8 +72,8 @@ const styles = createStyleSheet({
     includeFontPadding: false,
     paddingTop: 8,
     paddingBottom: 8,
-    paddingLeft: 16,
-    paddingRight: 16,
+    paddingStart: 16,
+    paddingEnd: 16,
   },
 });
 

package/src/styles/createStyleSheet.ts

@@ -35,6 +35,8 @@ const preProcessor: Partial<StylePreprocessor> = {
   'paddingBottom': SCALE_FACTOR_WITH_DIMENSION_VALUE,
   'paddingLeft': SCALE_FACTOR_WITH_DIMENSION_VALUE,
   'paddingRight': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'paddingStart': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'paddingEnd': SCALE_FACTOR_WITH_DIMENSION_VALUE,
   'margin': SCALE_FACTOR_WITH_DIMENSION_VALUE,
   'marginVertical': SCALE_FACTOR_WITH_DIMENSION_VALUE,
   'marginHorizontal': SCALE_FACTOR_WITH_DIMENSION_VALUE,
@@ -42,10 +44,14 @@ const preProcessor: Partial<StylePreprocessor> = {
   'marginBottom': SCALE_FACTOR_WITH_DIMENSION_VALUE,
   'marginLeft': SCALE_FACTOR_WITH_DIMENSION_VALUE,
   'marginRight': SCALE_FACTOR_WITH_DIMENSION_VALUE,
-  'left': SCALE_FACTOR_WITH_DIMENSION_VALUE,
-  'right': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'marginStart': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'marginEnd': SCALE_FACTOR_WITH_DIMENSION_VALUE,
   'top': SCALE_FACTOR_WITH_DIMENSION_VALUE,
   'bottom': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'left': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'right': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'start': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'end': SCALE_FACTOR_WITH_DIMENSION_VALUE,
 };
 
 const preProcessorKeys = Object.keys(preProcessor);

package/src/ui/ActionMenu/index.tsx

@@ -58,7 +58,7 @@ const ActionMenu = ({ visible, onHide, onError, onDismiss, title, menuItems }: P
             <LoadingSpinner
               size={20}
               color={colors.ui.dialog.default.none.highlight}
-              style={{ width: '10%', marginLeft: '4%' }}
+              style={{ width: '10%', marginStart: '4%' }}
             />
           )}
         </View>
@@ -110,8 +110,10 @@ const styles = createStyleSheet({
     paddingHorizontal: 24,
     paddingVertical: 20,
     alignItems: 'center',
+    justifyContent: 'flex-start',
   },
   buttonContainer: {
+    alignItems: 'flex-start',
     marginTop: 4,
     marginBottom: 8,
   },

package/src/ui/Alert/index.tsx

@@ -35,7 +35,7 @@ const Alert = ({ onDismiss, visible, onHide, title = '', message = '', buttons =
       <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>
@@ -91,15 +91,15 @@ const styles = createStyleSheet({
   titleContainer: {
     paddingBottom: 16,
     paddingHorizontal: 24,
-    flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'flex-start',
   },
   messageContainer: {
     paddingHorizontal: 24,
     marginBottom: 12,
+    alignItems: 'flex-start',
   },
   button: {
-    marginLeft: 8,
+    marginStart: 8,
   },
   buttonContainer: {
     flexDirection: 'row',

package/src/ui/Avatar/AvatarGroup.tsx

@@ -36,18 +36,18 @@ const AvatarGroup = ({ children, containerStyle, size = 56 }: Props) => {
         if (childAmount === 1) return React.cloneElement(child as ReactElement, { size, containerStyle });
 
         const top = getTopPoint(index, childAmount) * size;
-        const left = getLeftPoint(index) * size;
+        const start = getStartPoint(index) * size;
         const width = getWidthPoint(index, childAmount) * size;
         const height = getHeightPoint(index, childAmount) * size;
-        const innerLeft = -getInnerLeft(index, childAmount) * size;
+        const innerStart = -getInnerStart(index, childAmount) * size;
         const innerTop = -getInnerTop(childAmount) * size;
 
         return (
-          <View style={{ overflow: 'hidden', position: 'absolute', top, left, width, height }}>
+          <View style={{ overflow: 'hidden', position: 'absolute', top, start, width, height }}>
             {React.cloneElement(child as ReactElement, {
               size,
               square: true,
-              containerStyle: { left: innerLeft, top: innerTop },
+              containerStyle: { start: innerStart, top: innerTop },
             })}
           </View>
         );
@@ -77,11 +77,11 @@ const getTopPoint = (idx: number, total: number) => {
   if (idx === 0 || idx === 1) return -0.025;
   return 0.525;
 };
-const getLeftPoint = (idx: number) => {
+const getStartPoint = (idx: number) => {
   if (idx === 0 || idx === 2) return -0.025;
   return 0.525;
 };
-const getInnerLeft = (idx: number, total: number) => {
+const getInnerStart = (idx: number, total: number) => {
   if (total === 3 && idx === 0) return 0;
   return 0.25;
 };

package/src/ui/Avatar/AvatarStack.tsx

@@ -52,7 +52,7 @@ const AvatarStack = ({
       React.cloneElement(child as ReactElement, {
         size: actualSize,
         containerStyle: {
-          left: actualGap * index,
+          start: actualGap * index,
           borderWidth: avatarStyles.borderWidth,
           borderColor: avatarStyles.borderColor,
         },
@@ -67,7 +67,7 @@ const AvatarStack = ({
         style={[
           avatarStyles,
           {
-            left: actualGap * maxAvatar,
+            start: actualGap * maxAvatar,
             width: actualSize,
             height: actualSize,
             borderRadius: actualSize / 2,
@@ -93,7 +93,7 @@ const AvatarStack = ({
   };
 
   return (
-    <View style={[containerStyle, { left: -avatarStyles.borderWidth, flexDirection: 'row', width: calculateWidth() }]}>
+    <View style={[containerStyle, { start: -avatarStyles.borderWidth, flexDirection: 'row', width: calculateWidth() }]}>
       {renderAvatars()}
       {renderRemainsCount()}
     </View>

package/src/ui/BottomSheet/index.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { TouchableOpacity, useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useSafeAreaPadding } from '@sendbird/uikit-utils';
 
 import type Icon from '../../components/Icon';
 import Modal from '../../components/Modal';
@@ -28,7 +29,7 @@ type Props = {
 const BottomSheet = ({ onDismiss, onHide, visible, sheetItems, HeaderComponent }: Props) => {
   const { statusBarTranslucent } = useHeaderStyle();
   const { width } = useWindowDimensions();
-  const { bottom, left, right } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['bottom', 'left', 'right']);
   return (
     <Modal
       type={'slide'}
@@ -38,13 +39,13 @@ const BottomSheet = ({ onDismiss, onHide, visible, sheetItems, HeaderComponent }
       visible={visible}
       backgroundStyle={{ alignItems: 'center', justifyContent: 'flex-end' }}
     >
-      <DialogSheet style={{ width, paddingBottom: bottom }}>
+      <DialogSheet style={{ width, paddingBottom: safeArea.paddingBottom }}>
         {HeaderComponent && <HeaderComponent onClose={onHide} />}
         {sheetItems.map(({ onPress, ...props }, idx) => (
           <TouchableOpacity
             activeOpacity={0.75}
             key={props.title + idx}
-            style={{ paddingLeft: left, paddingRight: right }}
+            style={{ paddingStart: safeArea.paddingStart, paddingEnd: safeArea.paddingEnd }}
             disabled={props.disabled}
             onPress={async () => {
               await onHide();

package/src/ui/Button/index.tsx

@@ -69,7 +69,7 @@ const styles = createStyleSheet({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  icon: { marginVertical: -4, marginRight: 8 },
+  icon: { marginVertical: -4, marginEnd: 8 },
   text: {},
 });
 

package/src/ui/Dialog/DialogSheet.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
+import Box from '../../components/Box';
 import Icon from '../../components/Icon';
 import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
@@ -38,14 +39,16 @@ const SheetItem = ({ icon, title, iconColor, titleColor, disabled = false }: She
           containerStyle={styles.sheetItemIcon}
         />
       )}
-      <Text
-        subtitle1
-        numberOfLines={1}
-        color={titleColor ?? (disabled ? colors.ui.dialog.default.none.blurred : colors.ui.dialog.default.none.text)}
-        style={styles.sheetItemText}
-      >
-        {title}
-      </Text>
+      <Box flex={1} alignItems={'flex-start'}>
+        <Text
+          subtitle1
+          numberOfLines={1}
+          color={titleColor ?? (disabled ? colors.ui.dialog.default.none.blurred : colors.ui.dialog.default.none.text)}
+          style={styles.sheetItemText}
+        >
+          {title}
+        </Text>
+      </Box>
     </View>
   );
 };
@@ -55,19 +58,19 @@ const styles = createStyleSheet({
     overflow: 'hidden',
     flexDirection: 'column',
     width: '100%',
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
+    borderTopStartRadius: 8,
+    borderTopEndRadius: 8,
   },
   sheetItemContainer: {
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'flex-start',
     height: 48,
   },
   sheetItemIcon: {
-    marginLeft: 16,
+    marginStart: 16,
   },
   sheetItemText: {
-    flex: 1,
     marginHorizontal: 24,
   },
 });

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

@@ -29,7 +29,7 @@ const FileMessage = (props: Props) => {
               <Icon.File
                 fileType={fileType}
                 size={24}
-                containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}
+                containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginEnd: 8 }}
               />
               <Text
                 body3

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

@@ -107,7 +107,7 @@ const VoiceFileMessage = (props: Props) => {
                 )}
                 <Text
                   body3
-                  style={{ lineHeight: undefined, marginLeft: 6, opacity: 0.88 }}
+                  style={{ lineHeight: undefined, marginStart: 6, opacity: 0.88 }}
                   color={uiColors.enabled.textVoicePlaytime}
                 >
                   {millsToMSS(state.currentTime === 0 ? state.duration : remainingTime)}

package/src/ui/GroupChannelMessage/MessageBubbleWithText.tsx

@@ -32,9 +32,12 @@ const MessageBubbleWithText = ({
   const color = colors.ui.groupChannelMessage[variant];
   return (
     <Box backgroundColor={backgroundColor} style={styles.bubble}>
-      <Text body3 color={color.enabled.textMsg} suppressHighlighting>
+      <Text body3 color={color.enabled.textMsg} suppressHighlighting supportRTLAlign originalText={message.message}>
         <RegexText
           body3
+          suppressHighlighting
+          supportRTLAlign
+          originalText={message.message}
           color={color.enabled.textMsg}
           patterns={[
             ...regexTextPatterns,
@@ -59,7 +62,7 @@ const MessageBubbleWithText = ({
           {renderRegexTextChildren(message)}
         </RegexText>
         {Boolean(message.updatedAt) && (
-          <Text body3 color={color.enabled.textEdited}>
+          <Text body3 color={color.enabled.textEdited} supportRTLAlign originalText={strings?.edited ?? ' (edited)'}>
             {strings?.edited ?? ' (edited)'}
           </Text>
         )}

package/src/ui/GroupChannelMessage/MessageContainer.tsx

@@ -37,17 +37,17 @@ MessageContainer.Incoming = function MessageContainerIncoming({
   return (
     <Box flexDirection={'column'} justifyContent={'flex-start'} alignItems={'flex-start'}>
       <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-end'}>
-        <Box width={26} marginRight={12}>
+        <Box width={26} marginEnd={12}>
           {(message.isFileMessage() || message.isUserMessage()) && !groupedWithNext && (
             <Pressable onPress={onPressAvatar}>
               <Avatar size={26} uri={message.sender?.profileUrl} />
             </Pressable>
           )}
         </Box>
-        <Box flexShrink={1}>
+        <Box flexShrink={1} alignItems={'flex-start'}>
           {parentMessage}
           {!groupedWithPrev && !parentMessage && (
-            <Box marginLeft={12} marginBottom={4}>
+            <Box marginStart={12} marginBottom={4}>
               {(message.isFileMessage() || message.isUserMessage()) && (
                 <Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>
                   {strings?.senderName ?? message.sender.nickname}
@@ -58,7 +58,7 @@ MessageContainer.Incoming = function MessageContainerIncoming({
           <Box flexDirection={'row'} alignItems={'flex-end'}>
             <Box style={styles.bubble}>{children}</Box>
             {!groupedWithNext && (
-              <Box marginLeft={4}>
+              <Box marginStart={4}>
                 <Text caption4 color={color.enabled.textTime}>
                   {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}
                 </Text>
@@ -68,7 +68,7 @@ MessageContainer.Incoming = function MessageContainerIncoming({
         </Box>
       </Box>
       <Box flexDirection={'row'} marginTop={4}>
-        <Box width={26} marginRight={12} justifyContent={'flex-start'} />
+        <Box width={26} marginEnd={12} justifyContent={'flex-start'} />
         {replyInfo}
       </Box>
     </Box>
@@ -92,9 +92,9 @@ MessageContainer.Outgoing = function MessageContainerOutgoing({
       {parentMessage}
       <Box flexDirection={'row'} justifyContent={'flex-end'} alignItems={'flex-end'}>
         <Box flexDirection={'row'} alignItems={'flex-end'} justifyContent={'center'}>
-          {sendingStatus && <Box marginRight={4}>{sendingStatus}</Box>}
+          {sendingStatus && <Box marginEnd={4}>{sendingStatus}</Box>}
           {!groupedWithNext && (
-            <Box marginRight={4}>
+            <Box marginEnd={4}>
               <Text caption4 color={color.enabled.textTime}>
                 {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}
               </Text>