npm - @hitesh0009/react-native-basic-form - Versions diffs - 1.1.4 → 1.1.5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,14 +1,20 @@
 import { FlatList, Image, 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", headerIcon, headerIcon_style, imageProps, flatlist }) => {
-    return (<View>
-      {headerIcon && (<Image source={headerIcon} style={[styles.headericon, headerIcon_style]} {...imageProps}/>)}
-      <FlatList {...flatlist} 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>)}
+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.keyboardType}/>)}
+      <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>)}
@@ -36,6 +42,11 @@ const styles = StyleSheet.create({
     headericon: {
         height: 30,
         width: 30,
-        resizeMode: 'contain'
+        resizeMode: "contain",
+    },
+    headertext: {
+        color: "#000",
+        fontSize: 18,
+        fontWeight: "400",
     },
 });

package/dist/types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { FlatListProps, ImageProps, ImageSourcePropType, ImageStyle, TextInputProps, 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;
@@ -21,14 +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;
+    lableStyle?: TextStyle;
+    inputTextStyle?: TextStyle;
+    buttonContainerStyle?: ViewStyle;
+    buttonTextStyle?: TextStyle;
     headerIcon?: ImageSourcePropType | undefined;
-    headerIcon_style?: ImageStyle;
+    headerIconStyle?: ImageStyle;
     imageProps?: ImageProps;
     numColumns?: number;
-    flatlist?: FlatListProps<FormItem>;
+    flatlistProps?: FlatListProps<FormItem>;
+    textProp?: TextProps;
+    headerText?: string | undefined;
+    headerTextStyle?: TextStyle;
+    headerContainerStyle?: ViewStyle;
+    containerStyle?: ViewStyle;
+    textInputProps?: TextInputProps;
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hitesh0009/react-native-basic-form",
-  "version": "1.1.4",
+  "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 CHANGED Viewed

@@ -13,43 +13,54 @@ 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",
+  lableStyle,
+  inputTextStyle,
+  buttonContainerStyle,
+  buttonTextStyle,
   headerIcon,
-  headerIcon_style,
+  headerIconStyle,
+  headerTextStyle,
   imageProps,
-  flatlist
+  flatlistProps,
+  textInputProps,
+  textProp,
+  headerText,
+  headerContainerStyle,
+  containerStyle,
 }) => {
   return (
-    <View>
-      {headerIcon && (
-        <Image
-          source={headerIcon}
-          style={[styles.headericon, headerIcon_style]}
-          {...imageProps}
-        />
-      )}
+    <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>
-        {...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, 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.keyboardType}
@@ -59,9 +70,9 @@ export const Form: React.FC<FormProps> = ({
             {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>
@@ -94,6 +105,11 @@ const styles = StyleSheet.create({
   headericon: {
     height: 30,
     width: 30,
-    resizeMode:'contain'
+    resizeMode: "contain",
+  },
+  headertext: {
+    color: "#000",
+    fontSize: 18,
+    fontWeight: "400",
   },
 });

package/src/types.ts CHANGED Viewed

@@ -1,10 +1,10 @@
-// import { TextInputProps } from './../node_modules/react-native/types_generated/Libraries/Components/TextInput/TextInput.flow.d';
 import type {
   FlatListProps,
   ImageProps,
   ImageSourcePropType,
   ImageStyle,
   TextInputProps,
+  TextProps,
   TextStyle,
   ViewStyle,
 } from "react-native";
@@ -36,16 +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;
-  placeholderTextColor?: string;
+  lableStyle?: TextStyle;
+  inputTextStyle?: TextStyle;
+  buttonContainerStyle?: ViewStyle;
+  buttonTextStyle?: TextStyle;
   headerIcon?: ImageSourcePropType | undefined;
-  headerIcon_style?: ImageStyle;
+  headerIconStyle?: ImageStyle;
   imageProps?: ImageProps;
   numColumns?: number;
-  flatlist?:  FlatListProps<FormItem>;
+  flatlistProps?: FlatListProps<FormItem>;
+  textProp?: TextProps;
+  headerText?: string | undefined;
+  headerTextStyle?: TextStyle;
+  headerContainerStyle?: ViewStyle;
+  containerStyle?: ViewStyle;
+  textInputProps?: TextInputProps
 };

package/README.MD DELETED Viewed

@@ -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