@hitesh0009/react-native-basic-form 1.1.1 → 1.1.3

package/dist/Form.js

@@ -1,10 +1,10 @@
 import { FlatList, StyleSheet, Text, TextInput, TouchableOpacity, View, } from "react-native";
-export const Form = ({ data, gap_bwt_keyValue = 10, gap_bwt_keys = 12, lable_style, inputtext_style, button_container_style, buttontext_style, placeholderTextColor = "#999", multiline_input = false, textAlignVertical_input = "center", }) => {
+export const Form = ({ data, gap_bwt_keyValue = 10, gap_bwt_keys = 12, lable_style, inputtext_style, button_container_style, buttontext_style, placeholderTextColor = "#999", scrollEnabled = true, showsHorizontalScrollIndicator = true, }) => {
     return (<View>
-      <FlatList data={data} keyExtractor={(item) => item.id} ItemSeparatorComponent={() => <View style={{ height: gap_bwt_keys }}/>} renderItem={({ item }) => (<View style={{ gap: gap_bwt_keyValue }}>
+      <FlatList scrollEnabled={scrollEnabled} showsHorizontalScrollIndicator={showsHorizontalScrollIndicator} data={data} keyExtractor={(item) => item.id} ItemSeparatorComponent={() => <View style={{ height: gap_bwt_keys }}/>} renderItem={({ item }) => (<View style={{ gap: gap_bwt_keyValue }}>
             {item.label && (<Text style={[styles.lable, lable_style]}>{item.label}</Text>)}
 
-            {item.input && (<TextInput style={[styles.inputtext, inputtext_style]} placeholder={item.input.placeholder} placeholderTextColor={placeholderTextColor} multiline={multiline_input} textAlignVertical={textAlignVertical_input} value={item.input.value} onChangeText={item.input.onChangeText}/>)}
+            {item.input && (<TextInput style={[styles.inputtext, inputtext_style]} placeholder={item.input.placeholder} placeholderTextColor={placeholderTextColor} multiline={item.input.multiline} textAlignVertical={item.input.TextAlignVertical} value={item.input.value} onChangeText={item.input.onChangeText} keyboardType={item.input.keybordType}/>)}
 
             {item.button && (<TouchableOpacity onPress={item.button.onPress} style={[styles.button_container, button_container_style]}>
                 <Text style={[styles.button_text, buttontext_style]}>

package/dist/types.d.ts

@@ -1,8 +1,11 @@
-import type { TextStyle, ViewStyle } from 'react-native';
+import type { TextStyle, ViewStyle } from "react-native";
 export type FormInput = {
     placeholder?: string;
     value: string;
     onChangeText: (text: string) => void;
+    multiline: boolean;
+    TextAlignVertical?: "top" | "center" | "bottom" | "auto" | undefined;
+    keybordType?: "default" | "number-pad" | "decimal-pad" | "numeric" | "email-address" | "phone-pad" | "url" | "ascii-capable" | "numbers-and-punctuation" | "name-phone-pad" | "twitter" | "web-search" | "visible-password";
 };
 export type FormButton = {
     label: string;
@@ -23,6 +26,6 @@ export type FormProps = {
     button_container_style?: ViewStyle;
     buttontext_style?: TextStyle;
     placeholderTextColor?: string;
-    multiline_input?: boolean;
-    textAlignVertical_input?: "top" | "center" | "bottom" | "auto" | undefined;
+    scrollEnabled?: boolean;
+    showsHorizontalScrollIndicator?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitesh0009/react-native-basic-form",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "A lightweight, data-driven form renderer for React Native with fully controlled inputs and flexible styling.",
   "keywords": [
     "react-native",

package/src/Form.tsx

@@ -17,12 +17,14 @@ export const Form: React.FC<FormProps> = ({
   button_container_style,
   buttontext_style,
   placeholderTextColor = "#999",
-  multiline_input = false,
-  textAlignVertical_input = "center",
+  scrollEnabled = true,
+  showsHorizontalScrollIndicator = true,
 }) => {
   return (
     <View>
       <FlatList<FormItem>
+        scrollEnabled={scrollEnabled}
+        showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
         data={data}
         keyExtractor={(item) => item.id}
         ItemSeparatorComponent={() => <View style={{ height: gap_bwt_keys }} />}
@@ -37,10 +39,11 @@ export const Form: React.FC<FormProps> = ({
                 style={[styles.inputtext, inputtext_style]}
                 placeholder={item.input.placeholder}
                 placeholderTextColor={placeholderTextColor}
-                multiline={multiline_input}
-                textAlignVertical={textAlignVertical_input}
+                multiline={item.input.multiline}
+                textAlignVertical={item.input.TextAlignVertical}
                 value={item.input.value}
                 onChangeText={item.input.onChangeText}
+                keyboardType={item.input.keybordType}
               />
             )}
 

package/src/types.ts

@@ -1,9 +1,25 @@
-import type { TextStyle, ViewStyle,  } from 'react-native';
+import type { TextStyle, ViewStyle } from "react-native";
 
 export type FormInput = {
   placeholder?: string;
   value: string;
   onChangeText: (text: string) => void;
+  multiline: boolean;
+  TextAlignVertical?: "top" | "center" | "bottom" | "auto" | undefined;
+  keybordType?:
+    | "default"
+    | "number-pad"
+    | "decimal-pad"
+    | "numeric"
+    | "email-address"
+    | "phone-pad"
+    | "url"
+    | "ascii-capable"
+    | "numbers-and-punctuation"
+    | "name-phone-pad"
+    | "twitter"
+    | "web-search"
+    | "visible-password";
 };
 
 export type FormButton = {
@@ -31,6 +47,6 @@ export type FormProps = {
 
   placeholderTextColor?: string;
 
-  multiline_input?: boolean;
-  textAlignVertical_input?: "top" | "center" | "bottom" | "auto" | undefined;
+  scrollEnabled?: boolean;
+  showsHorizontalScrollIndicator?: boolean;
 };