@towsila/expo-ui-library 3.0.0 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@towsila/expo-ui-library",
-  "version": "3.0.0",
+  "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}