@hitesh0009/react-native-basic-form 1.3.3 → 1.3.5

package/README.md

@@ -1,4 +1,3 @@
-
 # 🚀 React Native Basic Form
 
 ### Control your entire form using JSON — not JSX.
@@ -57,7 +56,7 @@ A **schema-driven, fully customizable form renderer for React Native**.
 
 - 🧩 **Schema-based rendering**
 - 📐 **Row / Column layouts**
-- 🎨 **Fully customizable styles**
+- 🎨 **Field-level & block-level styling**
 - 🧠 **No internal state** (you control values & handlers)
 - 🌍 **Language-agnostic** (i18n handled by user)
 - 🛡 **Type-safe** with TypeScript
@@ -96,6 +95,7 @@ const formSchema = [
   {
     layout: 'column',
     spacing: 20,
+    style: { padding: 16 }, // 👈 block-level styling
     children: [
       {
         type: 'input',
@@ -157,12 +157,13 @@ The form renderer handles **how** it is rendered.
 
 ### 2. Layout Blocks
 
-Each schema block controls layout only.
+Each schema block controls layout and grouping.
 
 ```ts
 {
   layout: 'row',
   spacing: 12,
+  style: { alignItems: 'center' },
   children: [...]
 }
 ```
@@ -194,6 +195,7 @@ Supported field types:
   type: 'input',
   label: 'Age',
   spacing: 8,
+  style: { borderColor: '#16a34a' },
   inputProps: {
     placeholder: 'Enter age',
     keyboardType: 'numeric',
@@ -222,7 +224,7 @@ All standard **React Native `TextInputProps`** are supported via `inputProps`.
 }
 ```
 
-All standard **`TouchableOpacity` behavior** is supported via `buttonProps`.
+All standard **`TouchableOpacity` props** are supported via `buttonProps`.
 
 ---
 
@@ -232,19 +234,20 @@ Styling is **fully user-controlled**.
 
 ### Field-level props
 
-| Prop         | Description                              |
-| ------------ | ---------------------------------------- |
-| `style`      | Container style                          |
-| `textStyle`  | Button text style                        |
-| `labelStyle` | Label text style                         |
-| `spacing`    | Vertical spacing between label and field |
+| Prop         | Description                   |
+| ------------ | ----------------------------- |
+| `style`      | Field container style         |
+| `textStyle`  | Button text style             |
+| `labelStyle` | Label text style              |
+| `spacing`    | Space between label and field |
 
 ### Block-level props
 
-| Prop      | Description          |
-| --------- | -------------------- |
-| `layout`  | `row` or `column`    |
-| `spacing` | Space between fields |
+| Prop      | Description                        |
+| --------- | ---------------------------------- |
+| `layout`  | `row` or `column`                  |
+| `spacing` | Space between fields               |
+| `style`   | Wrapper `View` style for the block |
 
 ---
 
@@ -266,20 +269,13 @@ No translation logic is included.
 
 The library exposes a **strict schema contract**.
 
-### Types Overview
-
 ```ts
-export type FormField = FormInput | FormButton;
-
 export type FormItem = {
   layout?: 'row' | 'column';
   spacing?: number;
+  style?: ViewStyle;
   children: FormField[];
 };
-
-export type FormProps = {
-  schema: FormItem[];
-};
 ```
 
 TypeScript will:
@@ -349,4 +345,3 @@ Please keep PRs:
 ## 📄 License
 
 MIT
-

package/dist/Form.js

@@ -14,10 +14,10 @@ export const Form = ({ schema = [] }) => {
         }
     };
     return (<>
-      {schema.map((block, blockIndex) => (<View key={blockIndex} style={{
-                flexDirection: block.layout || "column",
-                gap: block.spacing || 20,
-            }}>
+      {schema.map((block, blockIndex) => (<View key={blockIndex} style={[{
+                    flexDirection: block.layout || "column",
+                    gap: block.spacing || 20,
+                }, block.style]}>
           {block.children.map(RenderField)}
         </View>))}
     </>);

package/dist/types.d.ts

@@ -21,6 +21,7 @@ export type FormField = FormInput | FormButton;
 export type FormItem = {
     layout?: ViewStyle['flexDirection'];
     spacing?: number;
+    style?: ViewStyle;
     children: FormField[];
 };
 export type FormProps = {

package/package.json

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

@@ -42,10 +42,10 @@ export const Form: React.FC<FormProps> = ({ schema = [] }) => {
       {schema.map((block, blockIndex) => (
         <View
           key={blockIndex}
-          style={{
+          style={[{
             flexDirection: block.layout || "column",
             gap: block.spacing || 20,
-          }}
+          },block.style]}
         >
           {block.children.map(RenderField)}
         </View>

package/src/types.ts

@@ -33,6 +33,7 @@ export type FormField = FormInput | FormButton;
 export type FormItem = {
   layout?: ViewStyle['flexDirection'];
   spacing?: number;
+  style?:ViewStyle
   children: FormField[];
 };