@towsila/expo-ui-library 3.5.1 → 3.5.3

package/package.json

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

package/src/components/screens/signUpScreen.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from "react";
-import { Text, TouchableOpacity, View } from "react-native";
+import { ScrollView, Text, TouchableOpacity, View } from "react-native";
 import { Field } from "../../types/formFields";
 import { useAppTheme } from "../../context/ThemeContext";
 import { useLanguage } from "../../context/LanguageContext";
-import { useFormSubmit } from "../../hooks/useSignup";
-import { ScrollWithIndicator } from "../ui/scrollIndicator";
+import ScreenHeader from "../ui/PageTopBar";
 import { DynamicForm } from "../ui/dynamicForm";
+import { Fonts, textSize } from "../../tokens/typography";
 import SharpButton from "../ui/sharpButton";
 import TermsPopup from "../ui/termsPopup";
-import { Fonts, textSize } from "../../tokens/typography";
+import { useFormSubmit } from "../../hooks/useSignup";
 
 interface SignupProps {
   title: string;
@@ -28,11 +28,13 @@ interface SignupProps {
   dialogTitle: string;
   dialogDescription: string;
   dialogButton: string;
+  agreeText?: string;      // "By continuing, you agree to our"
+  termsLinkText?: string;  // "Terms & Privacy"
   t?: (key: string) => string;
-  appLogo?: React.ReactNode;
 }
 
 export default function SignUpScreen({
+  title,
   formState,
   setFormState,
   onSubmit,
@@ -47,12 +49,14 @@ export default function SignUpScreen({
   dialogTitle,
   dialogDescription,
   dialogButton,
+  agreeText = "By continuing, you agree",
+  termsLinkText = "Terms & Privacy",
   t,
-  appLogo,
 }: SignupProps) {
   const [showTerms, setShowTerms] = useState(true);
   const { colors } = useAppTheme();
-const {isRTL} = useLanguage();
+  const { isRTL } = useLanguage();
+
   const { handleSubmit, errors, clearError, loading, setErrors } = useFormSubmit({
     fields,
     formState,
@@ -60,13 +64,16 @@ const {isRTL} = useLanguage();
   });
 
   return (
-    <View style={{ flex: 1, paddingHorizontal: 25, paddingVertical: 40 }}>
-      {/* Fixed: logo */}
-      <View style={{ alignItems: "center" }}>{appLogo}</View>
+    <View style={{ flex: 1, paddingHorizontal: 25, paddingTop: 50, paddingBottom: 20 }}>
+      {/* Fixed: header */}
+      <ScreenHeader title={title} description={""} />
 
-      {/* Scrollable: form only, with vertical progress indicator */}
-      <ScrollWithIndicator
+      {/* Scrollable: everything after the header */}
+      <ScrollView
+        style={{ flex: 1 }}
+        showsVerticalScrollIndicator={false}
         keyboardShouldPersistTaps="handled"
+        contentContainerStyle={{ paddingBottom: 20 }}
       >
         <DynamicForm
           fields={fields}
@@ -79,10 +86,27 @@ const {isRTL} = useLanguage();
           setErrors={setErrors}
           translator={t}
         />
-      </ScrollWithIndicator>
 
-      {/* Fixed: button + login link */}
-      <View style={{ gap: 2, paddingTop: 20 }}>
+        {/* Terms notice */}
+        <Text
+          style={{
+            flexDirection: isRTL ? "row" : "row-reverse",
+            textAlign: isRTL? "left" : "right",
+            fontSize: textSize.xs,
+            color: colors.text.secondary,
+            fontFamily: Fonts.montserrat.regular,
+            marginBottom: 40,
+          }}
+        >
+          {agreeText}{" "}
+          <Text
+            onPress={() => setShowTerms(true)}
+            style={{ color: colors.primary, fontFamily: Fonts.montserrat.semiBold, textDecorationLine:"underline" }}
+          >
+            {termsLinkText}
+          </Text>
+        </Text>
+
         <SharpButton
           text={buttonLabel}
           bgColor={colors.primary}
@@ -90,21 +114,14 @@ const {isRTL} = useLanguage();
           loading={loading}
           height={50}
         />
-        <TermsPopup
-          title={dialogTitle}
-          description={dialogDescription}
-          buttonText={dialogButton}
-          showTerms={showTerms}
-          generalTerms={generalTerms}
-          onAgree={() => setShowTerms(false)}
-        />
+
         <View
           style={{
-            flexDirection:isRTL ? "row":"row-reverse",
-            justifyContent:isRTL ? "flex-end" :"flex-start",
+            flexDirection: isRTL ? "row" : "row-reverse",
+            justifyContent: "center",
             alignItems: "center",
             gap: 4,
-            marginTop: 5,
+            marginTop: 15,
           }}
         >
           <Text
@@ -120,7 +137,7 @@ const {isRTL} = useLanguage();
             <Text
               style={{
                 fontSize: textSize.xs,
-                fontFamily: Fonts.montserrat.semiBold,
+                fontFamily: Fonts.montserrat.regular,
                 color: colors.primary,
               }}
             >
@@ -128,7 +145,17 @@ const {isRTL} = useLanguage();
             </Text>
           </TouchableOpacity>
         </View>
-      </View>
+      </ScrollView>
+
+      {/* Popup lives outside the scroll */}
+      <TermsPopup
+        title={dialogTitle}
+        description={dialogDescription}
+        buttonText={dialogButton}
+        showTerms={showTerms}
+        generalTerms={generalTerms}
+        onAgree={() => setShowTerms(false)}
+      />
     </View>
   );
 }

package/src/components/screens/sucessScreen.tsx

@@ -1,10 +1,10 @@
 import { Text, View } from "react-native";
-import AnimatedSuccessIcon from "../ui/AnimatedSuccessIcon";
 import { useAppTheme } from "../../context/ThemeContext";
 import { useLanguage } from "../../context/LanguageContext";
-import ScreenHeader from "../ui/PageTopBar";
-import SharpButton from "../ui/sharpButton";
 import { Fonts, textSize } from "../../tokens/typography";
+import AnimatedSuccessIcon from "../ui/AnimatedSuccessIcon";
+import SharpButton from "../ui/sharpButton";
+
 
 interface SuccessScreenProps {
   title?: string;
@@ -29,10 +29,17 @@ export default function SuccessScreen({
     const {isRTL} =  useLanguage();
   return (
   <View style={{ flex: 1, paddingHorizontal: 32, paddingVertical: 60 }}>
-    <ScreenHeader title={title} description={subtitle} />
-    <View style={{ flex: 1, marginTop: 30, alignItems: isRTL ? "flex-start" : "flex-end", gap: 20 }}>
-      <View style={{ backgroundColor: colors.primary + "30", padding: 20, borderRadius: 20 }}>
-        <AnimatedSuccessIcon color={colors.primary} size={50} strokeWidth={2} />
+    <Text style={{color: colors.text.primary, textAlign: isRTL ? "left" : "right", fontFamily: Fonts.montserrat.semiBold, fontSize: textSize.xxl}}>{title}</Text>
+    {subtitle && (
+        <Text
+                style={{fontSize: textSize.md, fontFamily: Fonts.montserrat.regular, color: colors.text.secondary, textAlign: isRTL ? "left" : "right"}}
+            >
+                {subtitle}
+            </Text>
+    )}
+    <View style={{ flex: 1, marginTop: 70, alignItems: isRTL ? "flex-start" : "flex-end", gap: 20 }}>
+      <View style={{ backgroundColor: colors.primary + "30", padding: 25, borderRadius: 30 }}>
+        <AnimatedSuccessIcon color={colors.primary} size={37} strokeWidth={2} />
       </View>
       <Text style={{ color: colors.text.secondary, textAlign: isRTL ? "left" : "right", fontFamily: Fonts.montserrat.regular, fontSize: textSize.md }}>
         {description}

package/src/components/ui/dynamicForm.tsx

@@ -1,9 +1,12 @@
 import { useState } from "react";
-import {View } from "react-native";
+import { View } from "react-native";
 import { Field } from "../../types/formFields";
 import Input from "./input";
+
+type KeyedField = Field & { key?: string };
+
 interface Props {
-  fields: Field[];
+  fields: KeyedField[];
   formState: Record<string, string>;
   setFormState: React.Dispatch<React.SetStateAction<Record<string, string>>>;
   errors: Record<string, string>;
@@ -14,7 +17,6 @@ interface Props {
   backLabel?: string;
   translator?: (key: string) => string;
 }
-// can i split it into 2 not only move the password if the number of fields is > 4
 
 export const DynamicForm: React.FC<Props> = ({
   fields,
@@ -26,33 +28,55 @@ export const DynamicForm: React.FC<Props> = ({
 }) => {
   const [showPasswordField, setShowPasswordField] = useState<Record<string, boolean>>({});
 
+  // Group consecutive fields that share the same `key`
+  const groups = fields.reduce<KeyedField[][]>((acc, field) => {
+    const last = acc[acc.length - 1];
+    if (field.key && last && last[0].key === field.key) {
+      last.push(field);
+    } else {
+      acc.push([field]);
+    }
+    return acc;
+  }, []);
+
+  const renderField = (field: KeyedField) => (
+    <Input
+      value={formState[field.name] || ""}
+      onChangeText={(text) => setFormState((prev) => ({ ...prev, [field.name]: text }))}
+      iconLeft={field.icon}
+      iconRight={
+        field.secureTextEntry
+          ? showPasswordField[field.name] ? "eye-off-outline" : "eye-outline"
+          : undefined
+      }
+      placeholder={field.placeholder}
+      onPressIconRight={
+        field.secureTextEntry
+          ? () => setShowPasswordField((prev) => ({ ...prev, [field.name]: !prev[field.name] }))
+          : undefined
+      }
+      secureTextEntry={field.secureTextEntry && !showPasswordField[field.name]}
+      returnKeyType="next"
+      error={errors[field.name] ? translator?.(errors[field.name]) : ""}
+      onClearError={() => clearError(field.name)}
+      label={field.label}
+    />
+  );
+
   return (
-    <View style={{ gap: 4, paddingBottom: 20 }}>
-        {fields.map((field) => 
-        <View key={field.name} style={{ marginBottom: 10 }}>
-      <Input
-        value={formState[field.name] || ""}
-        onChangeText={(text) => setFormState((prev) => ({ ...prev, [field.name]: text }))}
-        iconLeft={field.icon}
-        iconRight={
-          field.secureTextEntry
-            ? showPasswordField[field.name] ? "eye-off-outline" : "eye-outline"
-            : undefined
-        }
-        placeholder={field.placeholder}
-        onPressIconRight={
-          field.secureTextEntry
-            ? () => setShowPasswordField((prev) => ({ ...prev, [field.name]: !prev[field.name] }))
-            : undefined
-        }
-        secureTextEntry={field.secureTextEntry && !showPasswordField[field.name]}
-        returnKeyType="next"
-        error={errors[field.name] ? translator?.(errors[field.name]) : ""}
-        onClearError={() => clearError(field.name)}
-        label={field.label}
-      />
-    </View>
-        )}
+    <View style={{ gap: 4 }}>
+      {groups.map((group) => (
+        <View
+          key={group.map((f) => f.name).join("-")}
+          style={{ flexDirection: "row", gap: 10, marginBottom: 10 }}
+        >
+          {group.map((field) => (
+            <View key={field.name} style={{ flex: 1, minWidth: 0 }}>
+              {renderField(field)}
+            </View>
+          ))}
+        </View>
+      ))}
     </View>
   );
 };