GetStream
diff --git a/‎examples/SampleApp/App.tsx‎
Lines changed: 31 additions & 4 deletions b/‎examples/SampleApp/App.tsx‎
Lines changed: 31 additions & 4 deletions
diff --git a/‎examples/SampleApp/src/components/MenuDrawer.tsx‎
Lines changed: 98 additions & 8 deletions b/‎examples/SampleApp/src/components/MenuDrawer.tsx‎
Lines changed: 98 additions & 8 deletions
diff --git a/‎examples/SampleApp/src/context/AppContext.ts‎
Lines changed: 2 additions & 0 deletions b/‎examples/SampleApp/src/context/AppContext.ts‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎package/src/components/AttachmentPicker/AttachmentPicker.tsx‎
Lines changed: 14 additions & 0 deletions b/‎package/src/components/AttachmentPicker/AttachmentPicker.tsx‎
Lines changed: 14 additions & 0 deletions
diff --git a/‎package/src/components/ImageGallery/ImageGallery.tsx‎
Lines changed: 5 additions & 1 deletion b/‎package/src/components/ImageGallery/ImageGallery.tsx‎
Lines changed: 5 additions & 1 deletion
diff --git a/‎package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx‎
Lines changed: 33 additions & 0 deletions b/‎package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx‎
Lines changed: 33 additions & 0 deletions
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { DevSettings, LogBox, Platform, StyleSheet, useColorScheme, View } from 'react-native';
+import { DevSettings, I18nManager, LogBox, Platform, StyleSheet, useColorScheme, View } from 'react-native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
@@ -99,6 +99,7 @@ notifee.onBackgroundEvent(async ({ detail, type }) => {
 const Drawer = createDrawerNavigator();
 const Stack = createNativeStackNavigator<StackNavigatorParamList>();
 const UserSelectorStack = createNativeStackNavigator<UserSelectorParamList>();
+const RTL_STORAGE_KEY = '@stream-rn-sampleapp-rtl-enabled';
 
 const MessageOverlayBlurBackground = () => {
   const {
@@ -131,6 +132,7 @@ const MessageOverlayBlurBackground = () => {
 
 const App = () => {
   const { chatClient, isConnecting, loginUser, logout, switchUser } = useChatClient();
+  const [rtlEnabled, setRtlEnabled] = useState<boolean | undefined>(undefined);
   const [messageListImplementation, setMessageListImplementation] = useState<
     MessageListImplementationConfigItem['id'] | undefined
   >(undefined);
@@ -150,6 +152,15 @@ const App = () => {
   const streamChatTheme = useStreamChatTheme();
   const streami18n = new Streami18n();
 
+  const setRTLEnabled = React.useCallback(async (enabled: boolean) => {
+    await AsyncStore.setItem(RTL_STORAGE_KEY, enabled);
+    I18nManager.allowRTL(enabled);
+    I18nManager.forceRTL(enabled);
+    I18nManager.swapLeftAndRightInRTL(enabled);
+    setRtlEnabled(enabled);
+    DevSettings.reload();
+  }, []);
+
   useEffect(() => {
     const messaging = getMessaging();
     const unsubscribeOnNotificationOpen = messaging.onNotificationOpenedApp((remoteMessage) => {
@@ -188,7 +199,21 @@ const App = () => {
         }
       }
     });
-    const getMessageListConfig = async () => {
+    const getAppConfig = async () => {
+      const storedRTLEnabled = await AsyncStore.getItem<boolean>(RTL_STORAGE_KEY, false);
+      const nextRTLEnabled = !!storedRTLEnabled;
+
+      I18nManager.allowRTL(nextRTLEnabled);
+      I18nManager.forceRTL(nextRTLEnabled);
+      I18nManager.swapLeftAndRightInRTL(nextRTLEnabled);
+
+      if (I18nManager.isRTL !== nextRTLEnabled) {
+        DevSettings.reload();
+        return;
+      }
+
+      setRtlEnabled(nextRTLEnabled);
+
       const messageListImplementationStoredValue = await AsyncStore.getItem(
         '@stream-rn-sampleapp-messagelist-implementation',
         { id: 'flatlist' },
@@ -223,7 +248,7 @@ const App = () => {
         messageOverlayBackdropStoredValue?.value as MessageOverlayBackdropConfigItem['value'],
       );
     };
-    getMessageListConfig();
+    getAppConfig();
     return () => {
       unsubscribeOnNotificationOpen();
       unsubscribeForegroundEvent();
@@ -258,7 +283,7 @@ const App = () => {
     });
   }, [chatClient]);
 
-  if (!messageListImplementation || !messageListMode) {
+  if (rtlEnabled === undefined || !messageListImplementation || !messageListMode) {
     return;
   }
 
@@ -294,6 +319,8 @@ const App = () => {
                   loginUser,
                   logout,
                   switchUser,
+                  rtlEnabled,
+                  setRTLEnabled,
                   messageListImplementation,
                   messageInputFloating: messageInputFloating ?? false,
                   messageListMode,
 
@@ -1,5 +1,14 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Image, StyleSheet, Text, TouchableOpacity, Pressable, View } from 'react-native';
+import {
+  I18nManager,
+  Image,
+  Pressable,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import { Edit, useTheme } from 'stream-chat-react-native';
 
 import { useAppContext } from '../context/AppContext';
@@ -31,15 +40,39 @@ export const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 12,
   },
+  menuItemContent: {
+    alignItems: 'center',
+    flex: 1,
+    flexDirection: 'row',
+  },
   menuTitle: {
     fontSize: 14,
     fontWeight: '500',
-    marginLeft: 16,
+    marginStart: 16,
+  },
+  rtlDescription: {
+    fontSize: 12,
+    marginStart: 16,
+    marginTop: 2,
+  },
+  rtlMenuItem: {
+    justifyContent: 'space-between',
+  },
+  rtlMenuItemContent: {
+    alignItems: 'center',
+    flex: 1,
+    flexDirection: 'row',
+  },
+  rtlTextContainer: {
+    flex: 1,
+  },
+  rowReverse: {
+    flexDirection: 'row-reverse',
   },
   userName: {
     fontSize: 16,
     fontWeight: '600',
-    marginLeft: 16,
+    marginStart: 16,
   },
   userRow: {
     alignItems: 'center',
@@ -51,6 +84,7 @@ export const styles = StyleSheet.create({
 export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
   const [secretMenuPressCounter, setSecretMenuPressCounter] = useState(0);
   const [secretMenuVisible, setSecretMenuVisible] = useState(false);
+  const isRTL = I18nManager.isRTL;
   useTheme();
   const { black, grey, white } = useLegacyColors();
 
@@ -65,7 +99,7 @@ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
     setSecretMenuVisible(false);
   }, []);
 
-  const { chatClient, logout } = useAppContext();
+  const { chatClient, logout, rtlEnabled, setRTLEnabled } = useAppContext();
 
   if (!chatClient) {
     return null;
@@ -74,7 +108,10 @@ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
   return (
     <View style={[styles.container, { backgroundColor: white }]}>
       <SafeAreaView style={{ flex: 1 }}>
-        <Pressable onPress={() => setSecretMenuPressCounter((c) => c + 1)} style={[styles.userRow]}>
+        <Pressable
+          onPress={() => setSecretMenuPressCounter((c) => c + 1)}
+          style={[styles.userRow, isRTL && styles.rowReverse]}
+        >
           <Image
             source={{
               uri: chatClient.user?.image,
@@ -84,6 +121,7 @@ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
           <Text
             style={[
               styles.userName,
+              isRTL && { textAlign: 'right' },
               {
                 color: black,
               },
@@ -105,12 +143,13 @@ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
                   screen: 'NewDirectMessagingScreen',
                 })
               }
-              style={styles.menuItem}
+              style={[styles.menuItem, isRTL && styles.rowReverse]}
             >
               <Edit height={24} stroke={grey} width={24} />
               <Text
                 style={[
                   styles.menuTitle,
+                  isRTL && { textAlign: 'right' },
                   {
                     color: black,
                   },
@@ -125,12 +164,13 @@ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
                   screen: 'NewGroupChannelAddMemberScreen',
                 })
               }
-              style={styles.menuItem}
+              style={[styles.menuItem, isRTL && styles.rowReverse]}
             >
               <Group height={24} pathFill={grey} width={24} />
               <Text
                 style={[
                   styles.menuTitle,
+                  isRTL && { textAlign: 'right' },
                   {
                     color: black,
                   },
@@ -139,17 +179,67 @@ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
                 New Group
               </Text>
             </TouchableOpacity>
+            <View
+              style={[
+                styles.menuItem,
+                styles.rtlMenuItem,
+                isRTL && styles.rowReverse,
+              ]}
+            >
+              <View
+                style={[
+                  styles.rtlMenuItemContent,
+                  isRTL && styles.rowReverse,
+                ]}
+              >
+                <User height={24} pathFill={grey} width={24} />
+                <View style={styles.rtlTextContainer}>
+                  <Text
+                    style={[
+                      styles.menuTitle,
+                      isRTL && { textAlign: 'right' },
+                      {
+                        color: black,
+                      },
+                    ]}
+                  >
+                    RTL Layout
+                  </Text>
+                  <Text
+                    style={[
+                      styles.rtlDescription,
+                      isRTL && { textAlign: 'right' },
+                      {
+                        color: grey,
+                      },
+                    ]}
+                  >
+                    Enable RTL layout
+                  </Text>
+                </View>
+              </View>
+              <Switch
+                onValueChange={setRTLEnabled}
+                thumbColor={white}
+                trackColor={{
+                  false: grey,
+                  true: black,
+                }}
+                value={rtlEnabled}
+              />
+            </View>
           </View>
           <TouchableOpacity
             onPress={() => {
               logout();
             }}
-            style={styles.menuItem}
+            style={[styles.menuItem, isRTL && styles.rowReverse]}
           >
             <User height={24} pathFill={grey} width={24} />
             <Text
               style={[
                 styles.menuTitle,
+                isRTL && { textAlign: 'right' },
                 {
                   color: black,
                 },
 
@@ -15,6 +15,8 @@ type AppContextType = {
   loginUser: (config: LoginConfig) => void;
   logout: () => void;
   switchUser: (userId?: string) => void;
+  rtlEnabled: boolean;
+  setRTLEnabled: (enabled: boolean) => Promise<void>;
   messageListImplementation: MessageListImplementationConfigItem['id'];
   messageInputFloating: MessageInputFloatingConfigItem['value'];
   messageListMode: MessageListModeConfigItem['mode'];
 
@@ -13,6 +13,7 @@ import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { BottomSheet } from '../BottomSheetCompatibility/BottomSheet';
 import { KeyboardControllerPackage } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
@@ -38,6 +39,9 @@ export const AttachmentPicker = () => {
     bottomSheetRef: ref,
     disableAttachmentPicker,
   } = useAttachmentPickerContext();
+  const {
+    theme: { semantics },
+  } = useTheme();
 
   const [currentIndex, setCurrentIndexInternal] = useState(-1);
   const currentIndexRef = useRef<number>(currentIndex);
@@ -105,9 +109,19 @@ export const AttachmentPicker = () => {
   });
 
   const animationConfigs = useBottomSheetSpringConfigs(SPRING_CONFIG);
+  const backgroundStyle = useMemo(
+    () => ({
+      backgroundColor: semantics.backgroundCoreElevation1,
+      borderTopWidth: 0,
+      elevation: Platform.OS === 'android' ? 0 : undefined,
+      shadowOpacity: Platform.OS === 'android' ? 0 : undefined,
+    }),
+    [semantics.backgroundCoreElevation1],
+  );
 
   return (
     <BottomSheet
+      backgroundStyle={backgroundStyle}
       enablePanDownToClose={false}
       enableContentPanningGesture={false}
       enableDynamicSizing={false}
 
@@ -284,7 +284,10 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
       <Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
       <GestureDetector gesture={Gesture.Simultaneous(singleTap, doubleTap, pinch, pan)}>
         <Animated.View style={StyleSheet.absoluteFillObject}>
-          <Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
+          <Animated.View
+            testID='image-gallery-pager'
+            style={[styles.animatedContainer, pagerStyle, pager]}
+          >
             {assets.map((photo, i) =>
               photo.type === FileTypes.Video ? (
                 <AnimatedGalleryVideo
@@ -399,6 +402,7 @@ export const clamp = (value: number, lowerBound: number, upperBound: number) =>
 const styles = StyleSheet.create({
   animatedContainer: {
     alignItems: 'center',
+    direction: 'ltr',
     flexDirection: 'row',
   },
 });
 
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { I18nManager, StyleSheet } from 'react-native';
 
 import type { SharedValue } from 'react-native-reanimated';
 
@@ -79,6 +80,19 @@ const ImageGalleryComponent = (props: ImageGalleryProps & { message: LocalMessag
 };
 
 describe('ImageGallery', () => {
+  const originalIsRTL = I18nManager.isRTL;
+
+  const setRTL = (value: boolean) => {
+    Object.defineProperty(I18nManager, 'isRTL', {
+      configurable: true,
+      value,
+    });
+  };
+
+  afterEach(() => {
+    setRTL(originalIsRTL);
+  });
+
   it('render image gallery component', async () => {
     render(
       <ImageGalleryComponent
@@ -99,4 +113,23 @@ describe('ImageGallery', () => {
       expect(screen.queryAllByLabelText('Image Gallery Video')).toHaveLength(1);
     });
   });
+
+  it('keeps the pager in ltr coordinates when rtl is enabled', async () => {
+    setRTL(true);
+
+    render(
+      <ImageGalleryComponent
+        message={
+          generateMessage({
+            attachments: [generateImageAttachment()],
+          }) as unknown as LocalMessage
+        }
+      />,
+    );
+
+    await waitFor(() => {
+      const pagerStyle = StyleSheet.flatten(screen.getByTestId('image-gallery-pager').props.style);
+      expect(pagerStyle.direction).toBe('ltr');
+    });
+  });
 });