@towsila/expo-ui-library 2.7.3 → 3.0.1

package/package.json

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

package/src/components/screens/onBoarding.tsx

@@ -1,9 +1,10 @@
-import { Text, TouchableOpacity, View, StyleSheet, I18nManager, Pressable } from "react-native";
+import { Text, TouchableOpacity, View, StyleSheet } from "react-native";
 import { ArrowBack} from "@towsila/icons";
 import { useAppTheme } from "../../context/ThemeContext";
 import { Fonts, textSize } from "../../tokens/typography";
 import PageIndicator from "../ui/pageIndicator";
 import SharpButton from "../ui/sharpButton";
+import { useLanguage } from "../../context/LanguageContext";
 
 interface OnBoardingProps {
   onSkip: () => void;
@@ -33,7 +34,7 @@ export default function OnBoarding({
     stepsLabel,
 }: OnBoardingProps) {
   const { colors } = useAppTheme();
-
+  const {isRTL} = useLanguage();
   return (
     <View
       style={[
@@ -46,15 +47,11 @@ export default function OnBoarding({
             <View style={{ height: 44, flexDirection: "row", alignItems: "center", gap: 15}}>
                 <TouchableOpacity onPress={onBack} disabled={!onBack}
                     style={{
-                    // position: "absolute",
-                    // left: I18nManager.isRTL ? undefined : 0,
-                    // right: I18nManager.isRTL ? 0 : undefined,
                     borderWidth: 1,
                     borderColor: colors.text.primary,
                     borderRadius: 100,
                     paddingVertical: 11,
                     paddingHorizontal: 11,
-                    // zIndex: 1,
                     opacity: onBack ? 1: 0.5
                     }}
                 >
@@ -62,7 +59,7 @@ export default function OnBoarding({
                     width={19}
                     height={19}
                     color={colors.text.primary}
-                    style={I18nManager.isRTL && { transform: [{ scaleX: -1 }] }}
+                    style={isRTL && { transform: [{ scaleX: -1 }] }}
                     />
                 </TouchableOpacity>
 
@@ -80,7 +77,7 @@ export default function OnBoarding({
             <Text
                 style={[
                 styles.skipLabel,
-                { color: colors.text.primary, textAlign: I18nManager.isRTL ? "right" : "left" },
+                { color: colors.text.primary, textAlign: isRTL ? "right" : "left" },
                 ]}
             >
                 {skipLabel}
@@ -91,7 +88,7 @@ export default function OnBoarding({
       {/* ---------- Content ---------- */}
       <View style={styles.content}>
         {/* Image */}
-        <View style={[styles.imageContainer, I18nManager.isRTL && { transform: [{ scaleX: -1 }] }]}>
+        <View style={[styles.imageContainer,isRTL && { transform: [{ scaleX: -1 }] }]}>
           {image}
         </View>
 
@@ -109,7 +106,7 @@ export default function OnBoarding({
           <Text
             style={[
               styles.description,
-              { color: colors.text.secondary },
+              { color: colors.text.secondary,textAlign: isRTL ? "right" : "left", },
             ]}
           >
             {description}
@@ -153,7 +150,6 @@ const styles = StyleSheet.create({
   description: {
     fontSize: textSize.sm,
     fontFamily: Fonts.montserrat.regular,
-    textAlign: I18nManager.isRTL ? "right" : "left",
   },
 
   indicatorContainer: {

package/src/components/ui/pageIndicator.tsx

@@ -1,6 +1,6 @@
-import { View, Text, I18nManager } from "react-native";
-import Svg, { Circle } from "react-native-svg";
+import { View, Text } from "react-native";
 import { Fonts, textSize } from "../../tokens/typography";
+import { useLanguage } from "../../context/LanguageContext";
 
 type Props = {
   stepsLabel?: string;
@@ -12,7 +12,7 @@ type Props = {
 };
 
 const BAR_HEIGHT = 6;
-
+const {isRTL} = useLanguage();
 export default function PageIndicator({
   stepsLabel="Steps",
   total = 3,
@@ -22,12 +22,12 @@ export default function PageIndicator({
   defaultColor,
 }: Props) {
   return (
-    <View style={{ alignItems: I18nManager.isRTL ? "flex-start" : "flex-end", gap: 15, width: "100%" }}>
+    <View style={{ alignItems: 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" : "row-reverse", gap: 8, width: "100%" }}>
+<View style={{ flexDirection: isRTL ? "row" : "row-reverse", gap: 8, width: "100%" }}>
         {Array.from({ length: total }).map((_, index) => (
       <View
         key={index}

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