@towsila/expo-ui-library 2.6.0 → 2.7.0

package/package.json

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

package/src/components/screens/onBoarding.tsx

@@ -1,14 +1,14 @@
-import { Text, TouchableOpacity, View, StyleSheet } from "react-native";
-import PageIndicator from "../ui/pageIndicator";
+import { Text, TouchableOpacity, View, StyleSheet, I18nManager, Pressable } from "react-native";
+import {Arrow, ArrowBack} from "@towsila/icons";
 import { useAppTheme } from "../../context/ThemeContext";
 import { Fonts, textSize } from "../../tokens/typography";
-import {Arrow} from "@towsila/icons";
+import PageIndicator from "../ui/pageIndicator";
 import SharpButton from "../ui/sharpButton";
-import { I18nManager } from "react-native";
 
 interface OnBoardingProps {
   onSkip: () => void;
   onNext: () => void;
+  onBack?: () => void;
   image: React.ReactNode;
   title: string;
   description: string;
@@ -16,11 +16,13 @@ interface OnBoardingProps {
   nextLabel: string;
   currentIndex: number;
   total: number;
+  stepsLabel?: string;
 }
 
 export default function OnBoarding({
   onSkip,
   onNext,
+  onBack,
   image,
   title,
   description,
@@ -28,8 +30,9 @@ export default function OnBoarding({
   nextLabel,
   currentIndex,
   total,
+    stepsLabel,
 }: OnBoardingProps) {
-  const { colors, isDark } = useAppTheme();
+  const { colors } = useAppTheme();
 
   return (
     <View
@@ -39,27 +42,51 @@ export default function OnBoarding({
       ]}
     >
       {/* ---------- Header ---------- */}
-      <View style={styles.header}>
-        <TouchableOpacity onPress={onSkip} style={styles.skipButton}>
-          <Text
-            style={[
-              styles.skipLabel,
-              { color: colors.text.primary },
-            ]}
-          >
-            {skipLabel}
-          </Text>
-          <Arrow
-            width={20}
-            height={20}
-            color={colors.text.primary}
-            style={[
-              styles.skipIcon,
-              I18nManager.isRTL && { transform: [{ scaleX: -1 }] },
-            ]}
-          />        
-        </TouchableOpacity>
-      </View>
+        <View style={{minHeight: 40,}}>
+            <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
+                    }}
+                >
+                    <ArrowBack
+                    width={19}
+                    height={19}
+                    color={colors.text.primary}
+                    style={I18nManager.isRTL && { transform: [{ scaleX: -1 }] }}
+                    />
+                </TouchableOpacity>
+
+                <Text
+                    style={{
+                    fontSize: textSize.xl,
+                    fontFamily: Fonts.montserrat.bold,
+                    color: colors.text.primary,
+                    }}
+                >
+                    {title}
+                </Text>
+            </View>
+            <TouchableOpacity onPress={onSkip}>
+            <Text
+                style={[
+                styles.skipLabel,
+                { color: colors.text.primary, textAlign: I18nManager.isRTL ? "left" : "right" },
+                ]}
+            >
+                {skipLabel}
+            </Text>
+            </TouchableOpacity>
+        </View>
 
       {/* ---------- Content ---------- */}
       <View style={styles.content}>
@@ -68,17 +95,17 @@ export default function OnBoarding({
           {image}
         </View>
 
+        <View style={styles.indicatorContainer}>
+            <PageIndicator
+              total={total}
+              current={currentIndex}
+              color={colors.primary}
+              textColor={colors.text.primary}
+              defaultColor={colors.semantic.border}
+              stepsLabel={stepsLabel}
+            />
+        </View>
         {/* Text */}
-        <View style={styles.textContainer}>
-          <Text
-            style={[
-              styles.title,
-              { color: colors.text.primary },
-            ]}
-          >
-            {title}
-          </Text>
-
           <Text
             style={[
               styles.description,
@@ -87,27 +114,14 @@ export default function OnBoarding({
           >
             {description}
           </Text>
-
-          <View style={styles.indicatorContainer}>
-            <PageIndicator
-              total={total}
-              current={currentIndex}
-              color={colors.primary}
-              borderColor={colors.text.primary}
-              defaultColor={colors.background.main}
-            />
-          </View>
-        </View>
       </View>
 
       {/* ---------- Footer ---------- */}
-      <View style={styles.footer}>
         <SharpButton
           text={nextLabel}
           bgColor={colors.primary}
           onPress={onNext}
         />
-      </View>
     </View>
   );
 }
@@ -119,25 +133,12 @@ const styles = StyleSheet.create({
     paddingVertical: 60,
   },
 
-  header: {
-    alignItems: "flex-end",
-    minHeight: 40,
-  },
-
-  skipButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 8,
-  },
-
   skipLabel: {
     fontSize: textSize.md,
     fontFamily: Fonts.montserrat.regular,
   },
 
-  skipIcon: {
-    marginLeft: 6,
-  },
+
 
   content: {
     flex: 1,
@@ -145,40 +146,20 @@ const styles = StyleSheet.create({
   },
 
   imageContainer: {
-    flex: 0.58,
     justifyContent: "center",
     alignItems: "center",
-    overflow: "hidden",
-  },
-
-  textContainer: {
-    flex: 0.42,
-    justifyContent: "center",
-    alignItems: "center",
-    paddingHorizontal: 12,
-  },
-
-  title: {
-    fontSize: textSize.xxl,
-    fontFamily: Fonts.montserrat.bold,
-    textAlign: "center",
-    marginBottom: 14,
   },
 
   description: {
     fontSize: textSize.sm,
     fontFamily: Fonts.montserrat.regular,
-    textAlign: "center",
-    lineHeight: 22,
-    marginBottom: 28,
-    paddingHorizontal: 10,
+    textAlign: I18nManager.isRTL ? "right" : "left",
   },
 
   indicatorContainer: {
-    marginTop: 4,
+    marginTop: 10,
+    marginBottom: 25,
   },
 
-  footer: {
-    paddingTop: 24,
-  },
+ 
 });

package/src/components/ui/pageIndicator.tsx

@@ -1,58 +1,45 @@
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, Text, I18nManager, useWindowDimensions } from "react-native";
 import Svg, { Circle } from "react-native-svg";
+import { Fonts, textSize } from "../../tokens/typography";
 
 type Props = {
+  stepsLabel?: string;
   total?: number;
   current?: number;
-  borderColor: string;
+  textColor: string;
   color?: string;
   defaultColor:string;
 };
 
-const SIZE = 15;
-const CENTER = SIZE / 2;
+const BAR_HEIGHT = 6;
 
 export default function PageIndicator({
+  stepsLabel="Steps",
   total = 3,
   current = 1,
-  borderColor = "black",
+  textColor = "black",
   color = "white",
   defaultColor,
 }: Props) {
   return (
-    <View style={styles.container}>
-      {Array.from({ length: total }).map((_, index) => (
-        <Svg
-          key={index}
-          width={SIZE}
-          height={SIZE}
-          viewBox={`0 0 ${SIZE} ${SIZE}`}
-        >
-          {/* Outer circle (border) */}
-          <Circle
-            cx={CENTER}
-            cy={CENTER}
-            r={CENTER - 0.5}
-            fill={borderColor}
-          />
+    <View style={{ alignItems: I18nManager.isRTL ? "flex-end" : "flex-start", gap: 15, width: "100%" }}>
+  <Text style={{ color: textColor, fontSize: textSize.md, fontFamily: Fonts.montserrat.semiBold }}>
+    {stepsLabel}
+  </Text>
 
-          {/* Inner circle */}
-          <Circle
-            cx={CENTER - 1} // Move slightly right -> thinner left border
-            cy={CENTER}
-            r={CENTER - 3}
-            fill={current === index ? color : defaultColor}
-          />
-        </Svg>
-      ))}
-    </View>
+  <View style={{ flexDirection: I18nManager.isRTL ? "row-reverse" : "row", gap: 8, width: "100%" }}>
+    {Array.from({ length: total }).map((_, index) => (
+      <View
+        key={index}
+        style={{
+          flex: 1,
+          height: BAR_HEIGHT,
+          borderRadius: BAR_HEIGHT / 2,
+          backgroundColor: current === index ? color : defaultColor,
+        }}
+      />
+    ))}
+  </View>
+</View>
   );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    justifyContent: "center",
-    gap: 8,
-  },
-});
+}