@towsila/expo-ui-library 1.7.2 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@towsila/expo-ui-library",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "description": "",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -51,6 +51,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.1.1",
-    "@towsila/icons": "^1.0.3"
+    "@towsila/icons": "^1.0.3",
+    "expo-updates": "~57.0.23"
   }
 }

package/src/constants/language.ts

@@ -12,4 +12,9 @@ export const LANGUAGES: LanguageType[] = [
     name: "Français",
     logo: require("../assets/images/fr.jpg"),
   },
+  {
+    code: "ar",
+    name: "العربية",
+    logo: require("../assets/images/dz.jpg"),
+  }
 ];

package/src/context/LanguageContext.tsx

@@ -1,9 +1,11 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-
+import { I18nManager } from "react-native";
+import * as Updates from "expo-updates";
 const LANGUAGE_KEY = "app_language_preference";
+const RTL_LANGUAGES: Language[] = ["ar"];
 
-export type Language = "en" | "fr";
+export type Language = "en" | "fr" | "ar";
 
 type LanguageContextValue = {
   language: Language;
@@ -15,9 +17,11 @@ const LanguageContext = createContext<LanguageContextValue | null>(null);
 
 export function LanguageProvider({
   defaultLanguage = "en",
+  onLanguageChange,
   children,
 }: {
   defaultLanguage?: Language;
+  onLanguageChange?: (lang: Language) => void; 
   children: React.ReactNode;
 }) {
   const [language, setLanguageState] = useState<Language>(defaultLanguage);
@@ -25,7 +29,16 @@ export function LanguageProvider({
 
   useEffect(() => {
     AsyncStorage.getItem(LANGUAGE_KEY).then((saved) => {
-      if (saved === "en" || saved === "fr") setLanguageState(saved);
+      if (saved === "en" || saved === "fr" || saved === "ar") {
+        setLanguageState(saved);
+        onLanguageChange?.(saved);
+
+        const shouldBeRTL = RTL_LANGUAGES.includes(saved);
+        if (I18nManager.isRTL !== shouldBeRTL) {
+          I18nManager.allowRTL(shouldBeRTL);
+          I18nManager.forceRTL(shouldBeRTL);
+        }
+      }
       setIsLoaded(true);
     });
   }, []);
@@ -33,6 +46,14 @@ export function LanguageProvider({
   const setLanguage = async (lang: Language) => {
     setLanguageState(lang);
     await AsyncStorage.setItem(LANGUAGE_KEY, lang);
+    onLanguageChange?.(lang);
+
+    const shouldBeRTL = RTL_LANGUAGES.includes(lang);
+    if (I18nManager.isRTL !== shouldBeRTL) {
+      I18nManager.allowRTL(shouldBeRTL);
+      I18nManager.forceRTL(shouldBeRTL);
+      await Updates.reloadAsync();
+    }
   };
 
   return (