79500983

Date: 2025-03-11 13:58:06
Score: 0.5
Natty:
Report link

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>
  );
}

Reasons:
  • Probably link only (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: ניב ברששת