@towsila/expo-ui-library 3.1.3 → 3.2.1

package/package.json

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

package/src/components/screens/onBoarding.tsx

@@ -5,6 +5,7 @@ import { Fonts, textSize } from "../../tokens/typography";
 import PageIndicator from "../ui/pageIndicator";
 import SharpButton from "../ui/sharpButton";
 import { useLanguage } from "../../context/LanguageContext";
+import BackIcon from "../ui/backIcon";
 
 interface OnBoardingProps {
   onSkip: () => void;
@@ -45,24 +46,7 @@ export default function OnBoarding({
       {/* ---------- Header ---------- */}
         <View style={{minHeight: 40,}}>
             <View style={{ height: 44, flexDirection: isRTL? "row-reverse": "row", alignItems: "center", gap: 15}}>
-                <TouchableOpacity onPress={onBack} disabled={!onBack}
-                    style={{
-                    borderWidth: 1,
-                    borderColor: colors.text.primary,
-                    borderRadius: 100,
-                    paddingVertical: 11,
-                    paddingHorizontal: 11,
-                    opacity: onBack ? 1: 0.5
-                    }}
-                >
-                    <ArrowBack
-                    width={19}
-                    height={19}
-                    color={colors.text.primary}
-                    style={isRTL && { transform: [{ scaleX: -1 }] }}
-                    />
-                </TouchableOpacity>
-
+                <BackIcon onBack={onBack}/>
                 <Text
                     style={{
                     fontSize: textSize.xl,

package/src/components/ui/PageTopBar.tsx

@@ -2,6 +2,8 @@ import { Fonts, textSize } from "../../tokens/typography";
 import { useAppTheme } from "../../context/ThemeContext";
 import {  I18nManager, Text, TouchableOpacity, View } from "react-native";
 import {ArrowBack} from "@towsila/icons";
+import BackIcon from "./backIcon";
+import { useLanguage } from "../../context/LanguageContext";
 
 interface PageProps{
     title: string,
@@ -9,29 +11,26 @@ interface PageProps{
     onBack: ()=>void;
 }
 
-export default function PageTopBar({title, description, onBack}:PageProps){
-    const {colors, isDark} = useAppTheme();
-
+export default function ScreenHeader({title, description, onBack}:PageProps){
+    const {colors} = useAppTheme();
+    const {isRTL} = useLanguage();
     return (
-        <View>
-            <View style={{
-                flexDirection: "row", 
-                alignItems: "center", marginBottom: 10 }}>
-                <TouchableOpacity onPress={onBack}>
-                    <ArrowBack width={24} height={24} color={colors.text.primary} style={[I18nManager.isRTL && { transform: [{ scaleX: -1 }] },]}/>
-                </TouchableOpacity>
-                <Text style={{ flex: 1, textAlign: "center", color: colors.text.primary, fontSize: textSize.xxl, fontFamily: Fonts.montserrat.bold }}>
+        <View style={{minHeight: 40, gap: 10}}>
+            <View style={{ height: 44, flexDirection: isRTL? "row-reverse": "row", alignItems: "center", gap: 15}}>
+                <BackIcon onBack={onBack}/>
+                <Text
+                    style={{
+                    fontSize: textSize.xl,
+                    fontFamily: Fonts.montserrat.bold,
+                    color: colors.text.primary,
+                    }}
+                >
                     {title}
                 </Text>
-                <View style={{ width: 24 }} />
             </View>
-            <Text style={{
-                fontSize: textSize.sm,
-                fontFamily: Fonts.montserrat.regular,
-                textAlign: 'center',
-                marginBottom: 15, 
-                color: colors.text.primary, 
-            }}>
+            <Text
+                style={{fontSize: textSize.md, fontFamily: Fonts.montserrat.regular, color: colors.text.secondary, textAlign: isRTL ? "left" : "right" }}
+            >
                 {description}
             </Text>
         </View>

package/src/components/ui/backIcon.tsx

@@ -0,0 +1,28 @@
+import { TouchableOpacity } from "react-native";
+import { useAppTheme } from "../../context/ThemeContext";
+import { ArrowBack } from "@towsila/icons";
+import { useLanguage } from "../..";
+
+export default function BackIcon({onBack}:{onBack?: ()=>void}){
+    const {colors} = useAppTheme();
+    const {isRTL} = useLanguage();
+    return(
+        <TouchableOpacity onPress={onBack} disabled={!onBack}
+            style={{
+            borderWidth: 1,
+            borderColor: colors.text.primary,
+            borderRadius: 100,
+            paddingVertical: 11,
+            paddingHorizontal: 11,
+            opacity: onBack ? 1: 0.5
+            }}
+        >
+            <ArrowBack
+            width={19}
+            height={19}
+            color={colors.text.primary}
+            style={isRTL && { transform: [{ scaleX: -1 }] }}
+            />
+        </TouchableOpacity>
+    )
+}

package/src/index.ts

@@ -12,7 +12,7 @@ export { default as LoginScreen } from "./components/screens/loginScreen";
 export { useLoginForm } from "./hooks/useLoginForm";
 export {default as Input} from "./components/ui/input";
 export {default as ErrorMessage} from "./components/ui/error";
-export {default as PageTopBar} from "./components/ui/PageTopBar";
+export {default as ScreenHeader} from "./components/ui/PageTopBar";
 export {default as ForgotPwScreen} from "./components/screens/forgotPasswordScreen";
 export {useForgotPasswordForm} from "./hooks/useForgotPasswordForm";
 export {default as TemplateSubPage} from "./components/reusable/templateSubPage";
@@ -64,4 +64,5 @@ export {useToast} from "./hooks/useToast";
 export {default as RatingStars} from "./components/ui/rating";
 export { getFcmToken } from "./hooks/useFcmToken";
 export {useArrivalDetection} from "./hooks/useArrivalDetection";
-export {default as Toggle} from "./components/ui/toggle";
+export {default as Toggle} from "./components/ui/toggle";
+export {default as BackIcon} from "./components/ui/backIcon";