@towsila/expo-ui-library 3.2.2 → 3.2.4

package/package.json

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

package/src/components/screens/onBoarding.tsx

@@ -45,7 +45,7 @@ export default function OnBoarding({
     >
       {/* ---------- Header ---------- */}
         <View style={{minHeight: 40,}}>
-            <View style={{ height: 44, flexDirection: isRTL? "row": "row-reverse", alignItems: "center", gap: 15}}>
+            <View style={{ height: 44, flexDirection: isRTL? "row-reverse": "row", alignItems: "center", gap: 15}}>
                 <BackIcon onBack={onBack}/>
                 <Text
                     style={{

package/src/components/ui/PageTopBar.tsx

@@ -16,7 +16,7 @@ export default function ScreenHeader({title, description, onBack}:PageProps){
     const {isRTL} = useLanguage();
     return (
         <View style={{minHeight: 40, gap: 10}}>
-            <View style={{ height: 44, flexDirection: isRTL? "row-reverse": "row", alignItems: "center", gap: 15}}>
+            <View style={{ height: 44, flexDirection: isRTL? "row": "row-reverse", alignItems: "center", gap: 15}}>
                 <BackIcon onBack={onBack}/>
                 <Text
                     style={{

package/src/components/ui/backIcon.tsx

@@ -2,6 +2,7 @@ import { TouchableOpacity } from "react-native";
 import { useAppTheme } from "../../context/ThemeContext";
 import { ArrowBack } from "@towsila/icons";
 import { useLanguage } from "../..";
+import { Ionicons } from "@expo/vector-icons";
 
 export default function BackIcon({onBack}:{onBack?: ()=>void}){
     const {colors} = useAppTheme();
@@ -17,12 +18,7 @@ export default function BackIcon({onBack}:{onBack?: ()=>void}){
             opacity: onBack ? 1: 0.5
             }}
         >
-            <ArrowBack
-            width={19}
-            height={19}
-            color={colors.text.primary}
-            style={isRTL && { transform: [{ scaleX: -1 }] }}
-            />
+            <Ionicons name="arrow-back" size={19} color={colors.text.primary} style={isRTL && { transform: [{ scaleX: -1 }] }}/>
         </TouchableOpacity>
     )
 }

package/src/components/ui/error.tsx

@@ -4,7 +4,7 @@ import {Text} from 'react-native';
 interface ErrorProps{
     message: string, 
     fontSize?: number,
-    position?: "left" | "center",
+    position?: "left" | "center" | "right",
     fontFamily?: string;
 }
 export default function ErrorMessage({message, fontSize = textSize.xs, position = "left", fontFamily = Fonts.montserrat.regular}:ErrorProps){

package/src/components/ui/toast.tsx

@@ -9,6 +9,7 @@ import {
 import { useAppTheme } from "../../context/ThemeContext";
 import { Fonts, textSize } from "../../tokens/typography";
 import {CheckMark, Warning, Information,Close } from "@towsila/icons";
+import { useLanguage } from "../..";
 interface ToastProps {
   visible: boolean;
   message: string;
@@ -25,7 +26,7 @@ export default function Toast({
   onHide,
 }: ToastProps) {
   const { colors } = useAppTheme();
-
+  const {isRTL} = useLanguage();
   const translateY = useRef(new Animated.Value(-200)).current;
   const opacity = useRef(new Animated.Value(0)).current;
 
@@ -104,6 +105,7 @@ export default function Toast({
               backgroundColor: toastStyle.background,
               opacity,
               transform: [{ translateY }],
+              flexDirection: isRTL ? "row-reverse" : "row",
             },
           ]}
         >
@@ -131,7 +133,6 @@ const styles = StyleSheet.create({
   },
 
   container: {
-    flexDirection:"row",
     alignItems: "flex-start",
     gap:10,
     position: "absolute",