AmazonAppDev · giolaq · May 11, 2026 · May 8, 2026
diff --git a/packages/shared-ui/src/components/CustomDrawerContent.tsx b/packages/shared-ui/src/components/CustomDrawerContent.tsx
@@ -7,6 +7,7 @@ import { useMenuContext } from '../components/MenuContext';
 import { safeZones, colors } from '../theme';
 import { useCallback } from 'react';
 import { Direction } from '@bam.tech/lrud';
+import { getCloseDrawerDirection } from '../utils/rtl';
 
 export default function CustomDrawerContent(props: DrawerContentComponentProps) {
   const navigation = props.navigation;
@@ -20,7 +21,7 @@ export default function CustomDrawerContent(props: DrawerContentComponentProps)
 
   const onDirectionHandledWithoutMovement = useCallback(
     (movement: Direction) => {
-      if (movement === 'right') {
+      if (movement === getCloseDrawerDirection()) {
         navigation.closeDrawer();
         toggleMenu(false);
       }
@@ -185,7 +186,7 @@ const drawerStyles = StyleSheet.create({
     icon: {
       width: scaledPixels(32),
       height: scaledPixels(32),
-      marginRight: scaledPixels(20),
+      marginEnd: scaledPixels(20),
     },
     menuText: {
       color: colors.text,

diff --git a/packages/shared-ui/src/components/player/Controls.tsx b/packages/shared-ui/src/components/player/Controls.tsx
@@ -38,13 +38,13 @@ const controlsStyles = StyleSheet.create({
     bottomControls: {
       position: "absolute",
       bottom: scaledPixels(safeZones.actionSafe.vertical),
-      left: scaledPixels(safeZones.actionSafe.horizontal),
-      right: scaledPixels(safeZones.actionSafe.horizontal),
+      start: scaledPixels(safeZones.actionSafe.horizontal),
+      end: scaledPixels(safeZones.actionSafe.horizontal),
       flexDirection: "row",
       alignItems: "center",
     },
     controlButton: {
-      marginRight: scaledPixels(20),
+      marginEnd: scaledPixels(20),
     },
   });
 

diff --git a/packages/shared-ui/src/components/player/ExitButton.tsx b/packages/shared-ui/src/components/player/ExitButton.tsx
@@ -24,7 +24,7 @@ const exitButtonStyles = StyleSheet.create({
     exitBtn: {
       position: "absolute",
       top: scaledPixels(safeZones.actionSafe.vertical),
-      left: scaledPixels(safeZones.actionSafe.horizontal),
+      start: scaledPixels(safeZones.actionSafe.horizontal),
     },
   });
 

diff --git a/packages/shared-ui/src/components/player/SeekBar.tsx b/packages/shared-ui/src/components/player/SeekBar.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, I18nManager } from "react-native";
 import { scaledPixels } from "../../hooks/useScale";
 
 interface SeekBarProps {
@@ -13,10 +13,14 @@ const SeekBar = React.memo(({ currentTime, duration }: SeekBarProps) => {
     return (currentTime / duration) * 100;
   }, [currentTime, duration]);
 
+  const thumbPosition = I18nManager.isRTL
+    ? { right: `${percentage}%` }
+    : { left: `${percentage}%` };
+
   return (
     <View style={seekBarStyles.seekbarContainer}>
       <View style={seekBarStyles.seekbarTrack} />
-      <View style={[seekBarStyles.seekbarThumb, { left: `${percentage}%` }]} />
+      <View style={[seekBarStyles.seekbarThumb, thumbPosition]} />
     </View>
   );
 });
@@ -26,7 +30,7 @@ const seekBarStyles = StyleSheet.create({
     flex: 1,
     height: scaledPixels(40),
     justifyContent: "center",
-    marginRight: scaledPixels(80),
+    marginEnd: scaledPixels(80),
   },
   seekbarTrack: {
     width: "100%",

diff --git a/packages/shared-ui/src/components/player/VideoOverlay.tsx b/packages/shared-ui/src/components/player/VideoOverlay.tsx
@@ -84,18 +84,18 @@ const overlayStyles = StyleSheet.create({
   exitButton: {
     position: "absolute",
     top: scaledPixels(safeZones.actionSafe.vertical),
-    left: scaledPixels(safeZones.actionSafe.horizontal),
+    start: scaledPixels(safeZones.actionSafe.horizontal),
   },
   bottomControls: {
     position: "absolute",
     bottom: scaledPixels(safeZones.actionSafe.vertical),
-    left: scaledPixels(safeZones.actionSafe.horizontal),
-    right: scaledPixels(safeZones.actionSafe.horizontal),
+    start: scaledPixels(safeZones.actionSafe.horizontal),
+    end: scaledPixels(safeZones.actionSafe.horizontal),
     flexDirection: "row",
     alignItems: "center",
   },
   controlButton: {
-    marginRight: scaledPixels(20),
+    marginEnd: scaledPixels(20),
   },
 });
 

diff --git a/packages/shared-ui/src/components/player/VideoOverlay.vega.tsx b/packages/shared-ui/src/components/player/VideoOverlay.vega.tsx
@@ -98,18 +98,18 @@ const overlayStyles = StyleSheet.create({
   exitButton: {
     position: "absolute",
     top: scaledPixels(safeZones.actionSafe.vertical),
-    left: scaledPixels(safeZones.actionSafe.horizontal),
+    start: scaledPixels(safeZones.actionSafe.horizontal),
   },
   bottomControls: {
     position: "absolute",
     bottom: scaledPixels(safeZones.actionSafe.vertical),
-    left: scaledPixels(safeZones.actionSafe.horizontal),
-    right: scaledPixels(safeZones.actionSafe.horizontal),
+    start: scaledPixels(safeZones.actionSafe.horizontal),
+    end: scaledPixels(safeZones.actionSafe.horizontal),
     flexDirection: "row",
     alignItems: "center",
   },
   controlButton: {
-    marginRight: scaledPixels(20),
+    marginEnd: scaledPixels(20),
   },
 });
 

diff --git a/packages/shared-ui/src/index.ts b/packages/shared-ui/src/index.ts
@@ -21,6 +21,7 @@ export { default as SettingsScreen } from './screens/SettingsScreen';
 
 // Utils
 export { VideoHandler } from './utils/VideoHandler';
+export { isRTL, getOpenDrawerDirection, getCloseDrawerDirection } from './utils/rtl';
 
 // Navigation
 export { default as RootNavigator } from './navigation/RootNavigator';

diff --git a/packages/shared-ui/src/navigation/DrawerNavigator.tsx b/packages/shared-ui/src/navigation/DrawerNavigator.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { StyleSheet, View, Platform } from 'react-native';
+import { StyleSheet, View, Platform, I18nManager } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { useNavigation, DrawerActions, NavigationProp } from '@react-navigation/native';
@@ -52,10 +52,9 @@ export default function DrawerNavigator() {
           drawerInactiveTintColor: '#bdc3c7',
           drawerStyle: styles.drawerStyle,
           drawerLabelStyle: styles.drawerLabelStyle,
-          // Use 'front' type to allow drawer to open/close (collapse/expand)
-          // Disable swipe gestures since we use remote control navigation
           drawerType: 'front',
           swipeEnabled: false,
+          drawerPosition: I18nManager.isRTL ? 'right' : 'left',
         }}
       >
         <Drawer.Screen
@@ -115,6 +114,6 @@ const drawerStyles = StyleSheet.create({
     drawerLabelStyle: {
       fontSize: scaledPixels(18),
       fontWeight: 'bold',
-      marginLeft: scaledPixels(10),
+      marginStart: scaledPixels(10),
     },
   });
diff --git a/packages/shared-ui/src/screens/ExploreScreen.tsx b/packages/shared-ui/src/screens/ExploreScreen.tsx
@@ -7,6 +7,7 @@ import { DrawerActions, useIsFocused } from '@react-navigation/native';
 import { Direction } from '@bam.tech/lrud';
 import { useCallback, useState } from 'react';
 import { safeZones } from '../theme';
+import { getOpenDrawerDirection } from '../utils/rtl';
 
 export default function ExploreScreen() {
   const styles = exploreStyles;
@@ -18,7 +19,7 @@ export default function ExploreScreen() {
 
   const onDirectionHandledWithoutMovement = useCallback(
     (movement: Direction) => {
-      if (movement === 'left' && focusedIndex === 0) {
+      if (movement === getOpenDrawerDirection() && focusedIndex === 0) {
         navigation.dispatch(DrawerActions.openDrawer());
         toggleMenu(true);
       }

diff --git a/packages/shared-ui/src/screens/HomeScreen.tsx b/packages/shared-ui/src/screens/HomeScreen.tsx
@@ -19,6 +19,7 @@ import { RootStackParamList } from '../navigation/types';
 import { fetchMoviesData, CardData } from '../data/moviesData';
 import { colors, safeZones } from '../theme';
 import PlatformLinearGradient from '../components/PlatformLinearGradient';
+import { getOpenDrawerDirection } from '../utils/rtl';
 
 type HomeScreenNavigationProp = NativeStackNavigationProp<RootStackParamList, 'DrawerNavigator'>;
 
@@ -120,7 +121,7 @@ export default function HomeScreen() {
 
   const onDirectionHandledWithoutMovement = useCallback(
     (movement: Direction) => {
-      if (movement === 'left' && focusedIndex === 0) {
+      if (movement === getOpenDrawerDirection() && focusedIndex === 0) {
         navigation.dispatch(DrawerActions.openDrawer());
         toggleMenu(true);
       }
@@ -241,13 +242,13 @@ const gridStyles = StyleSheet.create({
   thumbnailTextContainer: {
     position: 'absolute',
     bottom: 0,
-    left: 0,
-    right: 0,
+    start: 0,
+    end: 0,
     backgroundColor: colors.scrimDark,
     paddingHorizontal: scaledPixels(16),
     paddingVertical: scaledPixels(12),
-    borderBottomLeftRadius: scaledPixels(8),
-    borderBottomRightRadius: scaledPixels(8),
+    borderBottomStartRadius: scaledPixels(8),
+    borderBottomEndRadius: scaledPixels(8),
   },
   thumbnailText: {
     color: colors.text,
@@ -259,7 +260,7 @@ const gridStyles = StyleSheet.create({
   highlightThumbnail: {
     width: scaledPixels(420),
     height: scaledPixels(260),
-    marginRight: scaledPixels(20),
+    marginEnd: scaledPixels(20),
     backgroundColor: colors.card,
     borderRadius: scaledPixels(12),
     borderWidth: scaledPixels(5),
@@ -302,21 +303,21 @@ const gridStyles = StyleSheet.create({
   },
   gradientLeft: {
     position: 'absolute',
-    left: 0,
+    start: 0,
     top: 0,
     bottom: 0,
     width: '65%',
   },
   headerTextContainer: {
     position: 'absolute',
-    left: scaledPixels(safeZones.titleSafe.horizontal),
+    start: scaledPixels(safeZones.titleSafe.horizontal),
     top: scaledPixels(safeZones.titleSafe.vertical),
     bottom: scaledPixels(safeZones.titleSafe.vertical),
     justifyContent: 'center',
     width: '55%',
   },
   highlightsList: {
-    paddingLeft: scaledPixels(20),
+    paddingStart: scaledPixels(20),
   },
   cardImage: {
     width: '100%',

diff --git a/packages/shared-ui/src/screens/SettingsScreen.tsx b/packages/shared-ui/src/screens/SettingsScreen.tsx
@@ -12,6 +12,7 @@ import { colors, safeZones } from '../theme';
 import FocusablePressable from '../components/FocusablePressable';
 import { useCallback, useState } from 'react';
 import { useMenuContext } from '../components/MenuContext';
+import { getOpenDrawerDirection } from '../utils/rtl';
 
 export default function SettingsScreen() {
   const isFocused = useIsFocused();
@@ -25,7 +26,7 @@ export default function SettingsScreen() {
 
   const onDirectionHandledWithoutMovement = useCallback(
     (movement: Direction) => {
-      if (movement === 'left') {
+      if (movement === getOpenDrawerDirection()) {
         navigation.dispatch(DrawerActions.openDrawer());
         toggleMenu(true);
       }
@@ -203,7 +204,7 @@ const styles = StyleSheet.create({
     gap: scaledPixels(16),
   },
   optionButton: {
-    marginRight: scaledPixels(12),
+    marginEnd: scaledPixels(12),
     marginBottom: scaledPixels(12),
   },
   selectedOption: {

diff --git a/packages/shared-ui/src/screens/TVScreen.tsx b/packages/shared-ui/src/screens/TVScreen.tsx
@@ -10,6 +10,7 @@ import { DrawerActions, useIsFocused } from '@react-navigation/native';
 import { useCallback, useState } from 'react';
 import { Direction } from '@bam.tech/lrud';
 import { safeZones } from '../theme';
+import { getOpenDrawerDirection } from '../utils/rtl';
 
 export default function TVScreen() {
   const styles = tvStyles;
@@ -21,7 +22,7 @@ export default function TVScreen() {
 
   const onDirectionHandledWithoutMovement = useCallback(
     (movement: Direction) => {
-      if (movement === 'left' && focusedIndex === 0) {
+      if (movement === getOpenDrawerDirection() && focusedIndex === 0) {
         navigation.dispatch(DrawerActions.openDrawer());
         toggleMenu(true);
       }

diff --git a/packages/shared-ui/src/utils/rtl.ts b/packages/shared-ui/src/utils/rtl.ts
@@ -0,0 +1,14 @@
+import { I18nManager } from 'react-native';
+import { Direction } from '@bam.tech/lrud';
+
+export function isRTL(): boolean {
+  return I18nManager.isRTL;
+}
+
+export function getOpenDrawerDirection(): Direction {
+  return I18nManager.isRTL ? 'right' : 'left';
+}
+
+export function getCloseDrawerDirection(): Direction {
+  return I18nManager.isRTL ? 'left' : 'right';
+}