@towsila/expo-ui-library 2.7.2 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@towsila/expo-ui-library",
-  "version": "2.7.2",
+  "version": "3.0.0",
   "description": "",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/screens/onBoarding.tsx

@@ -1,5 +1,5 @@
 import { Text, TouchableOpacity, View, StyleSheet, I18nManager, Pressable } from "react-native";
-import {Arrow, ArrowBack} from "@towsila/icons";
+import { ArrowBack} from "@towsila/icons";
 import { useAppTheme } from "../../context/ThemeContext";
 import { Fonts, textSize } from "../../tokens/typography";
 import PageIndicator from "../ui/pageIndicator";
@@ -80,7 +80,7 @@ export default function OnBoarding({
             <Text
                 style={[
                 styles.skipLabel,
-                { color: colors.text.primary, textAlign: I18nManager.isRTL ? "left" : "right" },
+                { color: colors.text.primary, textAlign: I18nManager.isRTL ? "right" : "left" },
                 ]}
             >
                 {skipLabel}
@@ -91,7 +91,7 @@ export default function OnBoarding({
       {/* ---------- Content ---------- */}
       <View style={styles.content}>
         {/* Image */}
-        <View style={styles.imageContainer}>
+        <View style={[styles.imageContainer, I18nManager.isRTL && { transform: [{ scaleX: -1 }] }]}>
           {image}
         </View>
 

package/src/components/ui/pageIndicator.tsx

@@ -1,4 +1,4 @@
-import { View, StyleSheet, Text, I18nManager, useWindowDimensions } from "react-native";
+import { View, Text, I18nManager } from "react-native";
 import Svg, { Circle } from "react-native-svg";
 import { Fonts, textSize } from "../../tokens/typography";
 
@@ -22,13 +22,13 @@ export default function PageIndicator({
   defaultColor,
 }: Props) {
   return (
-    <View style={{ alignItems: I18nManager.isRTL ? "flex-end" : "flex-start", gap: 15, width: "100%" }}>
+    <View style={{ alignItems: I18nManager.isRTL ? "flex-start" : "flex-end", gap: 15, width: "100%" }}>
   <Text style={{ color: textColor, fontSize: textSize.md, fontFamily: Fonts.montserrat.semiBold }}>
     {stepsLabel}
   </Text>
 
-  <View style={{ flexDirection: I18nManager.isRTL ? "row-reverse" : "row", gap: 8, width: "100%" }}>
-    {Array.from({ length: total }).map((_, index) => (
+<View style={{ flexDirection: I18nManager.isRTL ? "row" : "row-reverse", gap: 8, width: "100%" }}>
+        {Array.from({ length: total }).map((_, index) => (
       <View
         key={index}
         style={{

package/src/context/LanguageContext.tsx

@@ -1,7 +1,5 @@
 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"];
 
@@ -11,17 +9,16 @@ type LanguageContextValue = {
   language: Language;
   setLanguage: (lang: Language) => void;
   isLoaded: boolean;
+  isRTL: boolean;
 };
 
 const LanguageContext = createContext<LanguageContextValue | null>(null);
 
 export function LanguageProvider({
   defaultLanguage = "en",
-  onBeforeReload,
   children,
 }: {
   defaultLanguage?: Language;
-  onBeforeReload?: () => void;
   children: React.ReactNode;
 }) {
   const [language, setLanguageState] = useState<Language>(defaultLanguage);
@@ -31,12 +28,6 @@ export function LanguageProvider({
     AsyncStorage.getItem(LANGUAGE_KEY).then((saved) => {
       if (saved === "en" || saved === "fr" || saved === "ar") {
         setLanguageState(saved);
-
-        const shouldBeRTL = RTL_LANGUAGES.includes(saved);
-        if (I18nManager.isRTL !== shouldBeRTL) {
-          I18nManager.allowRTL(shouldBeRTL);
-          I18nManager.forceRTL(shouldBeRTL);
-        }
       }
       setIsLoaded(true);
     });
@@ -46,17 +37,12 @@ export function LanguageProvider({
     setLanguageState(lang);
     await AsyncStorage.setItem(LANGUAGE_KEY, lang);
 
-    const shouldBeRTL = RTL_LANGUAGES.includes(lang);
-    if (I18nManager.isRTL !== shouldBeRTL) {
-      onBeforeReload?.();
-      I18nManager.allowRTL(shouldBeRTL);
-      I18nManager.forceRTL(shouldBeRTL);
-      await Updates.reloadAsync();
-    }
   };
 
+  const isRTL = RTL_LANGUAGES.includes(language);
+
   return (
-    <LanguageContext.Provider value={{ language, setLanguage, isLoaded }}>
+    <LanguageContext.Provider value={{ language, setLanguage, isLoaded, isRTL}}>
       {children}
     </LanguageContext.Provider>
   );