this is the correct method for doing it - https://geekyants.com/blog/implementing-right-to-left-rtl-support-in-expo-without-restarting-the-app
And this is my own implementaion no AI .
import { useFonts } from "expo-font";
import * as SplashScreen from "expo-splash-screen";
import { useEffect, useState } from "react";
import { I18nManager } from "react-native";
import { getLocales } from 'expo-localization';
import { AuthProvider } from "@/context/auth"; // Adjust the path as needed
import { Slot } from "expo-router";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { GlobalProvider } from "@/context/GlobalContext";
import { NotificationProvider } from "@/context/NotificationContext";
import * as Notifications from "expo-notifications";
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: true,
shouldSetBadge: true,
}),
});
export default function RootLayout() {
const [key, setKey] = useState(0); // Track changes to force re-render
const [loaded, error] = useFonts({
Assistant: require("@/assets/fonts/Assistant.ttf"),
});
useEffect(() => {
const setupRTL = () => {
const deviceLocales = getLocales();
const isDeviceRTL = deviceLocales[0]?.textDirection === 'rtl';
// If the device RTL setting doesn't match our I18nManager setting
if (isDeviceRTL !== true) { //english device
I18nManager.allowRTL(isDeviceRTL);
I18nManager.forceRTL(isDeviceRTL);
setKey(prev => prev + 1); // Force a re-render to apply layout changes
} else { //Hebrew device/Arabic/RTL
I18nManager.allowRTL(false);
I18nManager.forceRTL(false);
setKey(prev => prev + 1); // Force a re-render to apply layout changes
}
};
setupRTL();
}, []);
useEffect(() => {
if (loaded || error) {
SplashScreen.hideAsync();
}
}, [loaded, error]);
if (!loaded && !error) {
return null;
}
return (
<SafeAreaProvider key={key}>
<NotificationProvider>
<AuthProvider>
<GlobalProvider>
<Slot />
</GlobalProvider>
</AuthProvider>
</NotificationProvider>
</SafeAreaProvider>
);
}