chore: apply rtl to several components

Author: bang9

packages/uikit-react-native/src/components/MessageSearchResultItem.tsx

@@ -32,7 +32,7 @@ const MessageSearchResultItem: MessageSearchProps['List']['renderSearchResultIte
 
         <Box flex={1} paddingEnd={16}>
           <Box style={styles.titleLine}>
-            <Box flex={1} marginEnd={4} justifyContent={'center'}>
+            <Box flex={1} marginEnd={4} justifyContent={'center'} alignItems={'flex-start'}>
               <Text subtitle2 color={colors.onBackground01} numberOfLines={1}>
                 {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_TITLE(message)}
               </Text>
@@ -58,15 +58,18 @@ const MessageSearchResultItem: MessageSearchProps['List']['renderSearchResultIte
                 />
               )}
 
-              <Text
-                body3
-                numberOfLines={fileIcon ? 1 : 2}
-                ellipsizeMode={fileIcon ? 'middle' : 'tail'}
-                style={styles.bodyText}
-                color={colors.onBackground03}
-              >
-                {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_BODY(message)}
-              </Text>
+              <Box flex={1} alignItems={'flex-start'}>
+                <Text
+                  body3
+                  numberOfLines={fileIcon ? 1 : 2}
+                  ellipsizeMode={fileIcon ? 'middle' : 'tail'}
+                  style={styles.bodyText}
+                  color={colors.onBackground03}
+                  supportRTLAlign
+                >
+                  {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_BODY(message)}
+                </Text>
+              </Box>
             </Box>
           </Box>
 
@@ -111,7 +114,6 @@ const styles = createStyleSheet({
     marginEnd: 4,
   },
   bodyText: {
-    flex: 1,
     lineHeight: 16,
   },
   separator: {

packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelSuggestedMentionList.tsx

@@ -3,6 +3,7 @@ import { Pressable, ScrollView, View, useWindowDimensions } from 'react-native';
 
 import {
   Avatar,
+  Box,
   Divider,
   Icon,
   Text,
@@ -74,15 +75,15 @@ const GroupChannelSuggestedMentionList = ({
               style={styles.userContainer}
             >
               <Avatar size={28} uri={member.profileUrl} containerStyle={styles.userAvatar} />
-              <View style={styles.userInfo}>
+              <Box style={styles.userInfo} >
                 <Text body2 color={colors.onBackground01} numberOfLines={1} style={styles.userNickname}>
                   {member.nickname || STRINGS.LABELS.USER_NO_NAME}
                 </Text>
                 <Text body3 color={colors.onBackground03} numberOfLines={1} style={styles.userId}>
                   {member.userId}
                 </Text>
                 <Divider style={{ position: 'absolute', bottom: 0 }} />
-              </View>
+              </Box>
             </Pressable>
           );
         })}

packages/uikit-react-native/src/domain/groupChannelNotifications/component/GroupChannelNotificationsView.tsx

@@ -1,8 +1,16 @@
 import React, { useContext } from 'react';
-import { Pressable, ScrollView, View } from 'react-native';
+import { Pressable, ScrollView } from 'react-native';
 
 import { PushTriggerOption } from '@sendbird/chat';
-import { Divider, Icon, Switch, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import {
+  Box,
+  Divider,
+  Icon,
+  Switch,
+  Text,
+  createStyleSheet,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
 import { useForceUpdate } from '@sendbird/uikit-utils';
 
 import { useLocalization } from '../../../hooks/useContext';
@@ -89,14 +97,22 @@ const Bar = ({ title, onPress, description, component, subtitle2, body3 }: BarPr
   const { colors } = useUIKitTheme();
   return (
     <Pressable onPress={onPress} style={styles.barContainer}>
-      <View style={styles.titleContainer}>
-        <Text body3={body3} subtitle2={subtitle2} numberOfLines={1} color={colors.onBackground01} style={styles.title}>
-          {title}
-        </Text>
-        <View>{component}</View>
-      </View>
+      <Box style={styles.titleContainer}>
+        <Box flex={1} alignItems={'flex-start'}>
+          <Text
+            body3={body3}
+            subtitle2={subtitle2}
+            numberOfLines={1}
+            color={colors.onBackground01}
+            style={styles.title}
+          >
+            {title}
+          </Text>
+        </Box>
+        <Box>{component}</Box>
+      </Box>
       {Boolean(description) && (
-        <Text body3 color={colors.onBackground02} style={styles.desc}>
+        <Text body3 color={colors.onBackground02} style={styles.desc} supportRTLAlign>
           {description}
         </Text>
       )}
@@ -116,7 +132,6 @@ const styles = createStyleSheet({
     alignItems: 'center',
   },
   title: {
-    flex: 1,
     marginEnd: 8,
   },
   desc: {

packages/uikit-react-native/src/domain/messageSearch/component/MessageSearchHeader.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useRef } from 'react';
-import { Platform, TextInput } from 'react-native';
+import { Platform } from 'react-native';
 
 import {
   Box,
   Icon,
   PressBox,
   Text,
+  TextInput,
   createStyleSheet,
   useHeaderStyle,
   useUIKitTheme,
@@ -60,6 +61,8 @@ const MessageSearchHeader = ({
             style={[styles.input, { color: inputColor.text }]}
             value={keyword}
             onChangeText={onChangeKeyword}
+            supportRTLAlign
+            originalText={keyword}
           />
           {searchEnabled && (
             <PressBox onPress={() => onChangeKeyword('')}>

sample/src/screens/uikit/SettingsScreen.tsx

@@ -210,12 +210,26 @@ const SettingsScreen = () => {
 };
 
 const styles = StyleSheet.create({
-  container: { flex: 1 },
-  viewContainer: { paddingHorizontal: 16 },
-  userInfoContainer: { paddingVertical: 24, alignItems: 'center' },
-  avatarContainer: { marginBottom: 12 },
-  userIdContainer: { paddingVertical: 16 },
-  userIdLabel: { marginBottom: 4 },
+  container: {
+    flex: 1,
+  },
+  viewContainer: {
+    paddingHorizontal: 16,
+  },
+  userInfoContainer: {
+    paddingVertical: 24,
+    alignItems: 'center',
+  },
+  avatarContainer: {
+    marginBottom: 12,
+  },
+  userIdContainer: {
+    paddingVertical: 16,
+    alignItems: 'flex-start',
+  },
+  userIdLabel: {
+    marginBottom: 4,
+  },
 });
 
 export default SettingsScreen;