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

package/README.md

@@ -0,0 +1,186 @@
+# react-native-basic-form
+
+A lightweight, data-driven form renderer for React Native with fully controlled inputs and flexible styling.
+
+This library helps you render simple forms using a declarative data structure, without managing internal state or enforcing opinions about validation or submission.
+
+---
+
+## ✨ Features
+
+* 📦 No native code (JS-only)
+* 🎛 Fully controlled inputs
+* 🧩 Data-driven rendering
+* 🎨 Flexible style overrides
+* 🧠 Unopinionated & extendable
+* ⚡ Rendered using `FlatList` for performance
+* 🧰 Pass-through props for `FlatList`, `TextInput`, `Text`, and `Image`
+
+---
+
+## 📦 Installation
+
+```sh
+npm install @hitesh0009/react-native-basic-form
+# or
+yarn add @hitesh0009/react-native-basic-form
+```
+
+---
+
+## 🚀 Basic Usage
+
+```tsx
+import { Form } from '@hitesh0009/react-native-basic-form';
+
+const data = [
+  {
+    id: '1',
+    label: 'Full Name',
+    input: {
+      value: name,
+      onChangeText: setName,
+      placeholder: 'Enter your full name',
+    },
+  },
+  {
+    id: '2',
+    label: 'Phone Number',
+    input: {
+      value: phone,
+      onChangeText: setPhone,
+      placeholder: 'Enter phone number',
+      keyboardType: 'numeric',
+    },
+  },
+  {
+    id: '3',
+    button: {
+      label: 'Submit',
+      onPress: handleSubmit,
+    },
+  },
+];
+
+<Form data={data} />;
+```
+
+---
+
+## 🧩 Data Structure
+
+```ts
+import type { KeyboardType } from 'react-native';
+
+export type FormItem = {
+  id: string; // must be unique
+  label?: string;
+  input?: {
+    value: string;
+    onChangeText: (text: string) => void;
+    placeholder?: string;
+    keyboardType?: KeyboardType;
+    multiline?: boolean;
+    textAlignVertical?: 'auto' | 'top' | 'center' | 'bottom';
+  };
+  button?: {
+    label: string;
+    onPress: () => void;
+  };
+};
+```
+
+---
+
+## 🧠 Header Support (Optional)
+
+```tsx
+<Form
+  headerIcon={Images.user}
+  headerText="Contact Information"
+/>
+```
+
+---
+
+## 🧰 Props Reference
+
+### Core Props
+
+| Prop               | Type         | Description                               |
+| ------------------ | ------------ | ----------------------------------------- |
+| `data`             | `FormItem[]` | Required form definition                  |
+| `gap_bwt_keyValue` | `number`     | Gap between label and input (default: 10) |
+| `gap_bwt_keys`     | `number`     | Gap between form rows (default: 12)       |
+
+---
+
+### Style Props
+
+| Prop                   | Applies To       |
+| ---------------------- | ---------------- |
+| `containerStyle`       | Root container   |
+| `headerContainerStyle` | Header wrapper   |
+| `labelStyle`           | Label text       |
+| `inputTextStyle`       | TextInput        |
+| `buttonContainerStyle` | Button container |
+| `buttonTextStyle`      | Button text      |
+| `headerIconStyle`      | Header image     |
+| `headerTextStyle`      | Header text      |
+
+---
+
+## 🔌 Pass-through Props (Advanced)
+
+### `flatlistProps`
+
+```tsx
+<Form
+  flatlistProps={{
+    scrollEnabled: false,
+    showsVerticalScrollIndicator: false,
+    contentContainerStyle: { paddingBottom: 40 },
+  }}
+/>
+```
+
+### `textInputProps`
+
+```tsx
+<Form
+  textInputProps={{
+    autoCapitalize: 'none',
+    returnKeyType: 'done',
+  }}
+/>
+```
+
+---
+
+## ⚠️ Important Notes
+
+* This library does not manage state
+* All inputs are fully controlled
+* Validation and submission logic are your responsibility
+* `id` must always be a string
+* Avoid nesting inside `ScrollView` unless scrolling is disabled via `flatlistProps`
+
+---
+
+## 🧠 Design Philosophy
+
+Forms should be declarative, flexible, and boring.
+
+This library intentionally avoids:
+
+* Hidden internal state
+* Opinionated validation rules
+* Forced UX decisions
+
+Instead, it provides:
+
+* A predictable rendering layer
+* Maximum control over behavior and styles
+* Easy integration with your existing logic
+
+

package/dist/Form.js

@@ -1,13 +1,20 @@
-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", scrollEnabled = true, showsHorizontalScrollIndicator = true, }) => {
-    return (<View>
-      <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>)}
+import { FlatList, Image, StyleSheet, Text, TextInput, TouchableOpacity, View, } from "react-native";
+export const Form = ({ data, gap_bwt_keyValue = 10, gap_bwt_keys = 12, lableStyle, inputTextStyle, buttonContainerStyle, buttonTextStyle, headerIcon, headerIconStyle, headerTextStyle, imageProps, flatlistProps, textInputProps, textProp, headerText, headerContainerStyle, containerStyle, }) => {
+    return (<View style={[{ gap: 20 }, containerStyle]}>
+      <View style={[{ flexDirection: "row", gap: 10 }, headerContainerStyle]}>
+        {headerIcon && (<Image source={headerIcon} style={[styles.headericon, headerIconStyle]} {...imageProps}/>)}
+        {headerText && (<Text style={[styles.headertext, headerTextStyle]} {...textProp}>
+            {headerText}
+          </Text>)}
+      </View>
 
-            {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}/>)}
+      <FlatList {...flatlistProps} 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, lableStyle]}>{item.label}</Text>)}
 
-            {item.button && (<TouchableOpacity onPress={item.button.onPress} style={[styles.button_container, button_container_style]}>
-                <Text style={[styles.button_text, buttontext_style]}>
+            {item.input && (<TextInput {...textInputProps} style={[styles.inputtext, inputTextStyle]} placeholder={item.input.placeholder} value={item.input.value} onChangeText={item.input.onChangeText} keyboardType={item.input.keyboardType}/>)}
+
+            {item.button && (<TouchableOpacity onPress={item.button.onPress} style={[styles.button_container, buttonContainerStyle]}>
+                <Text style={[styles.button_text, buttonTextStyle]}>
                   {item.button.label}
                 </Text>
               </TouchableOpacity>)}
@@ -32,4 +39,14 @@ const styles = StyleSheet.create({
         color: "#000",
         fontSize: 14,
     },
+    headericon: {
+        height: 30,
+        width: 30,
+        resizeMode: "contain",
+    },
+    headertext: {
+        color: "#000",
+        fontSize: 18,
+        fontWeight: "400",
+    },
 });

package/dist/types.d.ts

@@ -1,11 +1,11 @@
-import type { TextStyle, ViewStyle } from "react-native";
+import type { FlatListProps, ImageProps, ImageSourcePropType, ImageStyle, TextInputProps, TextProps, 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";
+    onChangeText: TextInputProps["onChangeText"];
+    multiline?: TextInputProps["multiline"];
+    textAlignVertical?: TextInputProps["textAlignVertical"];
+    keyboardType?: TextInputProps["keyboardType"];
 };
 export type FormButton = {
     label: string;
@@ -21,11 +21,19 @@ export type FormProps = {
     data: FormItem[];
     gap_bwt_keyValue?: number;
     gap_bwt_keys?: number;
-    lable_style?: TextStyle;
-    inputtext_style?: TextStyle;
-    button_container_style?: ViewStyle;
-    buttontext_style?: TextStyle;
-    placeholderTextColor?: string;
-    scrollEnabled?: boolean;
-    showsHorizontalScrollIndicator?: boolean;
+    lableStyle?: TextStyle;
+    inputTextStyle?: TextStyle;
+    buttonContainerStyle?: ViewStyle;
+    buttonTextStyle?: TextStyle;
+    headerIcon?: ImageSourcePropType | undefined;
+    headerIconStyle?: ImageStyle;
+    imageProps?: ImageProps;
+    numColumns?: number;
+    flatlistProps?: FlatListProps<FormItem>;
+    textProp?: TextProps;
+    headerText?: string | undefined;
+    headerTextStyle?: TextStyle;
+    headerContainerStyle?: ViewStyle;
+    containerStyle?: ViewStyle;
+    textInputProps?: TextInputProps;
 };

package/package.json

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

package/src/Form.tsx

@@ -1,5 +1,6 @@
 import {
   FlatList,
+  Image,
   StyleSheet,
   Text,
   TextInput,
@@ -12,47 +13,66 @@ export const Form: React.FC<FormProps> = ({
   data,
   gap_bwt_keyValue = 10,
   gap_bwt_keys = 12,
-  lable_style,
-  inputtext_style,
-  button_container_style,
-  buttontext_style,
-  placeholderTextColor = "#999",
-  scrollEnabled = true,
-  showsHorizontalScrollIndicator = true,
+  lableStyle,
+  inputTextStyle,
+  buttonContainerStyle,
+  buttonTextStyle,
+  headerIcon,
+  headerIconStyle,
+  headerTextStyle,
+  imageProps,
+  flatlistProps,
+  textInputProps,
+  textProp,
+  headerText,
+  headerContainerStyle,
+  containerStyle,
 }) => {
   return (
-    <View>
+    <View style={[{gap:20},containerStyle]}>
+      <View style={[{ flexDirection: "row",gap:10 }, headerContainerStyle]}>
+        {headerIcon && (
+          <Image
+            source={headerIcon}
+            style={[styles.headericon, headerIconStyle]}
+            {...imageProps}
+          />
+        )}
+        {headerText && (
+          <Text style={[styles.headertext, headerTextStyle]} {...textProp}>
+            {headerText}
+          </Text>
+        )}
+      </View>
+
       <FlatList<FormItem>
-        scrollEnabled={scrollEnabled}
-        showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
+        {...flatlistProps}
         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>
+              <Text style={[styles.lable, lableStyle]}>{item.label}</Text>
             )}
 
             {item.input && (
               <TextInput
-                style={[styles.inputtext, inputtext_style]}
+                {...textInputProps}
+                style={[styles.inputtext, inputTextStyle]}
                 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}
+                keyboardType={item.input.keyboardType}
               />
             )}
 
             {item.button && (
               <TouchableOpacity
                 onPress={item.button.onPress}
-                style={[styles.button_container, button_container_style]}
+                style={[styles.button_container, buttonContainerStyle]}
               >
-                <Text style={[styles.button_text, buttontext_style]}>
+                <Text style={[styles.button_text, buttonTextStyle]}>
                   {item.button.label}
                 </Text>
               </TouchableOpacity>
@@ -82,4 +102,14 @@ const styles = StyleSheet.create({
     color: "#000",
     fontSize: 14,
   },
+  headericon: {
+    height: 30,
+    width: 30,
+    resizeMode: "contain",
+  },
+  headertext: {
+    color: "#000",
+    fontSize: 18,
+    fontWeight: "400",
+  },
 });

package/src/types.ts

@@ -1,25 +1,21 @@
-import type { TextStyle, ViewStyle } from "react-native";
+import type {
+  FlatListProps,
+  ImageProps,
+  ImageSourcePropType,
+  ImageStyle,
+  TextInputProps,
+  TextProps,
+  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";
+  onChangeText: TextInputProps["onChangeText"];
+  multiline?: TextInputProps["multiline"];
+  textAlignVertical?: TextInputProps["textAlignVertical"];
+  keyboardType?: TextInputProps["keyboardType"];
 };
 
 export type FormButton = {
@@ -40,13 +36,22 @@ export type FormProps = {
   gap_bwt_keyValue?: number;
   gap_bwt_keys?: number;
 
-  lable_style?: TextStyle;
-  inputtext_style?: TextStyle;
-  button_container_style?: ViewStyle;
-  buttontext_style?: TextStyle;
+  lableStyle?: TextStyle;
+  inputTextStyle?: TextStyle;
+  buttonContainerStyle?: ViewStyle;
+  buttonTextStyle?: TextStyle;
 
-  placeholderTextColor?: string;
+  headerIcon?: ImageSourcePropType | undefined;
+  headerIconStyle?: ImageStyle;
+  imageProps?: ImageProps;
+  numColumns?: number;
+  flatlistProps?: FlatListProps<FormItem>;
 
-  scrollEnabled?: boolean;
-  showsHorizontalScrollIndicator?: boolean;
+  textProp?: TextProps;
+  headerText?: string | undefined;
+  headerTextStyle?: TextStyle;
+
+  headerContainerStyle?: ViewStyle;
+  containerStyle?: ViewStyle;
+  textInputProps?: TextInputProps
 };

package/README.MD

@@ -1,26 +0,0 @@
-# react-native-basic-form
-
-A lightweight, data-driven form renderer for React Native with fully controlled inputs and flexible styling.
-
-This library helps you render simple forms using a declarative data structure, without managing internal state or enforcing opinions about validation or submission.
-
----
-
-## ✨ Features
-
-- 📦 **JS-only** (no native code, no linking)
-- 🎛 **Fully controlled inputs**
-- 🧩 **Data-driven rendering**
-- 🎨 **Style overrides supported**
-- ⚡ Built on `FlatList` for performance
-- 🧠 Unopinionated and easy to extend
-
----
-
-## 📦 Installation
-
-```sh
-npm install react-native-basic-form
-or
-yarn add react-native-basic-form
-