feat: apply rtl to icon component

sendbird · Nov 21, 2024 · 56c2793 · 56c2793
1 parent 56bece9
commit 56c2793
Showing 1 changed file with 35 additions and 3 deletions.
diff --git a/packages/uikit-react-native-foundation/src/components/Icon/index.tsx b/packages/uikit-react-native-foundation/src/components/Icon/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { I18nManager, Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { FileType, convertFileTypeToMessageType, getFileIconFromMessageType } from '@sendbird/uikit-utils';
 
@@ -10,23 +10,55 @@ import useUIKitTheme from '../../theme/useUIKitTheme';
 type IconNames = keyof typeof IconAssets;
 type SizeFactor = keyof typeof sizeStyles;
 
+const mirroredIcons: Partial<Record<IconNames, boolean>> = {
+  create: true,
+  send: true,
+  reply: true,
+  'reply-filled': true,
+  thread: true,
+  chat: true,
+  'chat-filled': true,
+  message: true,
+  broadcast: true,
+  'file-audio': true,
+  'arrow-left': true,
+  leave: true,
+  'chevron-right': true,
+};
+
 type Props = {
   icon: IconNames;
   color?: string;
   size?: number;
   style?: StyleProp<ImageStyle>;
   containerStyle?: StyleProp<ViewStyle>;
+  direction?: 'ltr' | 'rtl';
 };
 
-const Icon = ({ icon, color, size = 24, containerStyle, style }: Props) => {
+const Icon = ({
+  icon,
+  color,
+  size = 24,
+  containerStyle,
+  style,
+  direction = I18nManager.isRTL ? 'rtl' : 'ltr',
+}: Props) => {
   const sizeStyle = sizeStyles[size as SizeFactor] ?? { width: size, height: size };
   const { colors } = useUIKitTheme();
+
+  const shouldMirror = direction === 'rtl' && mirroredIcons[icon];
+
   return (
     <View style={[containerStyle, containerStyles.container]}>
       <Image
         resizeMode={'contain'}
         source={IconAssets[icon]}
-        style={[{ tintColor: color ?? colors.primary }, sizeStyle, style]}
+        style={[
+          { tintColor: color ?? colors.primary },
+          sizeStyle,
+          shouldMirror && { transform: [{ scaleX: -1 }] },
+          style,
+        ]}
       />
     </View>
   );