@hitesh0009/react-native-basic-form 1.3.6 → 1.3.7

package/README.md

@@ -13,11 +13,11 @@ The renderer stays the same — **only the JSON changes**.
 
 ## ❌ The Problem
 
-- Forms are hardcoded with JSX
+- Forms are tightly coupled to JSX
 - Layout changes require code changes
 - Reusing forms across screens is painful
 - Dynamic or server-driven forms are difficult
-- UI logic and form structure get tightly coupled
+- UI logic and structure get mixed together
 
 As a result, forms often become one of the **least maintainable parts** of an app.
 
@@ -28,6 +28,7 @@ As a result, forms often become one of the **least maintainable parts** of an ap
 **React Native Basic Form** lets you control **everything about a form through JSON**:
 
 - what fields exist
+- how they are grouped
 - how they are laid out
 - how they behave
 - how they look
@@ -45,7 +46,7 @@ A **schema-driven, fully customizable form renderer for React Native**.
 ## 🎯 Who This Is For
 
 - Apps with many forms
-- Admin panels or dashboards
+- Admin panels & dashboards
 - Server-driven or config-based UIs
 - Teams that want consistent form behavior
 - Developers who prefer data-driven UI
@@ -95,8 +96,13 @@ const formSchema = [
   {
     layout: 'column',
     spacing: 20,
-    style: { padding: 16 }, // 👈 block-level styling
+    style: { padding: 16 }, // block-level styling
     children: [
+      {
+        type: 'text',
+        label: 'Contact Information',
+        labelStyle: { fontSize: 18, fontWeight: '600' },
+      },
       {
         type: 'input',
         label: 'Contact Person Name',
@@ -157,7 +163,7 @@ The form renderer handles **how** it is rendered.
 
 ### 2. Layout Blocks
 
-Each schema block controls layout and grouping.
+Each schema block controls grouping and layout.
 
 ```ts
 {
@@ -177,10 +183,11 @@ Supported layouts:
 
 ### 3. Fields
 
-Each `child` inside a block is a **field**.
+Each item inside `children` is a **field**.
 
 Supported field types:
 
+* `text`
 * `input`
 * `button`
 
@@ -188,6 +195,25 @@ Supported field types:
 
 ## 🧩 Field Types
 
+### 🔹 Text Field (Label / Header / Helper)
+
+```ts
+{
+  type: 'text',
+  label: 'Preferred Train Type',
+  labelStyle: { fontSize: 16, fontWeight: '500' },
+}
+```
+
+Used for:
+
+* section headers
+* group labels
+* instructions
+* helper text
+
+---
+
 ### 🔹 Input Field
 
 ```ts
@@ -267,7 +293,7 @@ No translation logic is included.
 
 ## 🧱 TypeScript Support
 
-The library exposes a **strict schema contract**.
+The library exposes a **strict, typed schema contract**.
 
 ```ts
 export type FormItem = {
@@ -300,7 +326,7 @@ TypeScript will:
 
 ## 🔧 Extending the Form
 
-To add new field types (e.g. `text`, `checkbox`, `select`):
+To add new field types (e.g. `checkbox`, `radioGroup`, `select`):
 
 1. Extend the schema type
 2. Add a case in the renderer
@@ -320,7 +346,7 @@ It focuses on **rendering**, not logic.
 
 ---
 
-## 🛣 Roadmap (Optional)
+## 🛣 Roadmap
 
 * Conditional rendering
 * Repeatable field groups

package/basic_usage/example.js

@@ -3,43 +3,69 @@ import { View } from "react-native";
 import { Form } from "react-native-basic-form";
 
 export default function App() {
-  // 👉 Form state is owned by YOU, not by the Form component
-  // The library is stateless by design
+  /**
+   * ✅ Form state is owned by YOU
+   * This library is intentionally stateless.
+   */
   const [name, setName] = useState("");
 
-  // 👉 Schema controls the entire form UI
-  // Changing this JSON changes the form
+  /**
+   * ✅ Schema controls the entire form UI
+   * Change this JSON → the form UI updates automatically
+   */
   const formSchema = [
     {
-      // Layout block: controls how children are arranged
+      /**
+       * Layout block
+       * Controls grouping, direction, and spacing
+       */
       layout: "column",
-      spacing: 16, // space between fields
+      spacing: 16,
 
-      // Children = actual form fields
       children: [
         {
-          // Input field
+          /**
+           * Text field
+           * Used for headings, labels, instructions, or helper text
+           */
+          type: "text",
+          label: "User Information",
+          labelStyle: {
+            fontSize: 18,
+            fontWeight: "600",
+          },
+        },
+
+        {
+          /**
+           * Input field
+           */
           type: "input",
           label: "Name",
 
-          // All TextInput behavior goes inside inputProps
+          /**
+           * All TextInput behavior lives inside inputProps
+           */
           inputProps: {
             placeholder: "Enter your name",
-            value: name,          // controlled value
-            onChangeText: setName // update state
+            value: name,
+            onChangeText: setName,
           },
         },
 
         {
-          // Button field
+          /**
+           * Button field
+           */
           type: "button",
           label: "Submit",
 
-          // Button behavior goes inside buttonProps
+          /**
+           * All TouchableOpacity behavior lives inside buttonProps
+           */
           buttonProps: {
             buttonText: "Submit",
             onPress: () => {
-              // Access state directly
               console.log("Name:", name);
             },
           },
@@ -50,9 +76,11 @@ export default function App() {
 
   return (
     <View style={{ padding: 16 }}>
-      {/* 
-        👉 Form only renders what the schema describes
-        👉 No internal state, no validation, no logic
+      {/*
+        ✅ Form is just a renderer
+        - No internal state
+        - No validation
+        - No logic
       */}
       <Form schema={formSchema} />
     </View>

package/package.json

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