@towsila/expo-ui-library 1.5.5 → 1.5.7

package/package.json

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

package/src/components/ui/dynamicForm.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Text, TouchableOpacity, View } from "react-native";
+import { ScrollView, Text, TouchableOpacity, View } from "react-native";
 import Input from "./input";
 import { Field } from "../../types/formFields";
 import { useAppTheme } from "../../context/ThemeContext";
@@ -21,7 +21,24 @@ interface Props {
 function splitIntoSteps(fields: Field[]): Field[][] {
   const info = fields.filter((f) => f.type !== "password");
   const security = fields.filter((f) => f.type === "password");
-  return [info, security].filter((s) => s.length > 0);
+  
+  const steps: Field[][] = [];
+  
+  // Split info fields if more than 3
+  if (info.length > 3) {
+    const mid = Math.ceil(info.length / 2);
+    steps.push(info.slice(0, mid));
+    steps.push(info.slice(mid));
+  } else if (info.length > 0) {
+    steps.push(info);
+  }
+  
+  // Add security fields as separate step
+  if (security.length > 0) {
+    steps.push(security);
+  }
+  
+  return steps;
 }
 
 export const DynamicForm: React.FC<Props> = ({
@@ -87,7 +104,12 @@ export const DynamicForm: React.FC<Props> = ({
   );
 
   return (
-    <View style={{ gap: 4 }}>
+    <ScrollView 
+      contentContainerStyle={{ flexGrow: 1 }}
+      showsVerticalScrollIndicator={false}
+      bounces={false}
+    >
+    <View style={{ gap: 4, paddingBottom: 20 }}>
 
       {/* Stepper — only show if more than 1 step */}
       {totalSteps > 1 && (
@@ -137,5 +159,6 @@ export const DynamicForm: React.FC<Props> = ({
         </View>
       )}
     </View>
+    </ScrollView>
   );
 };