@hitesh0009/react-native-basic-form 1.3.2 → 1.3.4

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

@@ -6,18 +6,18 @@ export const Form = ({ schema = [] }) => {
     const RenderField = (field, index) => {
         switch (field.type) {
             case "button":
-                return (<Buttons key={index} label={field.label} style={field.style} textStyle={field.textStyle} spacing={field.spacing} {...(field.buttonProps || {})}/>);
+                return (<Buttons key={index} label={field.label} style={field.style} textStyle={field.textStyle} spacing={field.spacing} labelStyle={field.labelStyle} {...(field.buttonProps || {})}/>);
             case "input":
-                return (<InputText key={index} label={field.label} style={field.style} spacing={field.spacing} {...(field.inputProps || {})}/>);
+                return (<InputText key={index} label={field.label} style={field.style} spacing={field.spacing} labelStyle={field.labelStyle} {...(field.inputProps || {})}/>);
             default:
                 return null;
         }
     };
     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/components/Buttons.js

@@ -1,11 +1,11 @@
 import { Text, TouchableOpacity, View } from "react-native";
 import React from "react";
 import FormText from "./Text";
-const Buttons = ({ label, buttonText, onPress, style, textStyle, spacing, labelStyle, }) => {
+const Buttons = ({ label, buttonText, onPress, style, textStyle, spacing, labelStyle, ...touchableProps }) => {
     return (<View style={{ gap: spacing !== null && spacing !== void 0 ? spacing : 13 }}>
       <FormText label={label || " "} style={labelStyle}/>
 
-      <TouchableOpacity onPress={onPress} style={[
+      <TouchableOpacity {...touchableProps} onPress={onPress} style={[
             {
                 backgroundColor: "#2563eb",
                 padding: 14,

package/dist/components/InputText.js

@@ -1,18 +1,11 @@
 import { StyleSheet, TextInput, View } from 'react-native';
 import React from 'react';
 import FormText from './Text';
-const InputText = ({ label, placeholder, value, onChangeText, style, spacing, labelStyle, }) => {
+const InputText = ({ label, style, spacing = 13, labelStyle, ...textInputProps }) => {
     return (<View style={{ gap: spacing || 13 }}>
       <FormText label={label || ' '} style={labelStyle}/>
-      <TextInput placeholder={placeholder} value={value} onChangeText={onChangeText} style={[
-            {
-                borderWidth: 1,
-                borderColor: '#ccc',
-                padding: 10,
-                borderRadius: 6,
-            },
-            style,
-        ]}/>
+      <TextInput {...textInputProps} // 👈 forward EVERYTHING
+     style={style}/>
     </View>);
 };
 export default InputText;

package/dist/types.d.ts

@@ -22,6 +22,7 @@ export type FormItem = {
     layout?: ViewStyle['flexDirection'];
     spacing?: number;
     children: FormField[];
+    style: ViewStyle;
 };
 export type FormProps = {
     schema: FormItem[];
@@ -29,12 +30,11 @@ export type FormProps = {
 export type ButtonProps = {
     label?: string;
     buttonText?: string;
-    onPress?: TouchableOpacityProps['onPress'];
     style?: ViewStyle;
     textStyle?: TextStyle;
     spacing?: number;
     labelStyle?: TextStyle;
-};
+} & TouchableOpacityProps;
 export type InputProps = {
     label?: string;
     style?: TextInputProps['style'];
@@ -43,7 +43,7 @@ export type InputProps = {
     placeholder?: TextInputProps['placeholder'];
     value?: TextInputProps['value'];
     onChangeText?: TextInputProps['onChangeText'];
-};
+} & TextInputProps;
 export type IconProps = {
     icon?: ImageProps['source'];
     style?: ImageStyle;

package/package.json

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

package/src/Form.tsx

@@ -4,8 +4,8 @@ import InputText from "./components/InputText";
 import Buttons from "./components/Buttons";
 import { FormField, FormProps } from "./types";
 
-export const Form:React.FC<FormProps> = ({ schema = [] }) => {
-  const RenderField = (field:FormField, index:number) => {
+export const Form: React.FC<FormProps> = ({ schema = [] }) => {
+  const RenderField = (field: FormField, index: number) => {
     switch (field.type) {
       case "button":
         return (
@@ -15,6 +15,7 @@ export const Form:React.FC<FormProps> = ({ schema = [] }) => {
             style={field.style}
             textStyle={field.textStyle}
             spacing={field.spacing}
+            labelStyle={field.labelStyle}
             {...(field.buttonProps || {})}
           />
         );
@@ -26,6 +27,7 @@ export const Form:React.FC<FormProps> = ({ schema = [] }) => {
             label={field.label}
             style={field.style}
             spacing={field.spacing}
+            labelStyle={field.labelStyle}
             {...(field.inputProps || {})}
           />
         );
@@ -40,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/components/Buttons.tsx

@@ -11,12 +11,14 @@ const Buttons: React.FC<ButtonProps> = ({
   textStyle,
   spacing,
   labelStyle,
+  ...touchableProps
 }) => {
   return (
     <View style={{ gap: spacing ?? 13 }}>
       <FormText label={label || " "} style={labelStyle} />
 
       <TouchableOpacity
+        {...touchableProps}
         onPress={onPress}
         style={[
           {

package/src/components/InputText.tsx

@@ -4,30 +4,18 @@ import FormText from './Text';
 import { InputProps } from '../types';
 
 const InputText:React.FC<InputProps> = ({
-  label,
-  placeholder,
-  value,
-  onChangeText,
+ label,
   style,
-  spacing,
+  spacing = 13,
   labelStyle,
+  ...textInputProps
 }) => {
   return (
     <View style={{ gap: spacing || 13 }}>
       <FormText label={label || ' '} style={labelStyle} />
       <TextInput
-        placeholder={placeholder}
-        value={value}
-        onChangeText={onChangeText}
-        style={[
-          {
-            borderWidth: 1,
-            borderColor: '#ccc',
-            padding: 10,
-            borderRadius: 6,
-          },
-          style,
-        ]}
+        {...textInputProps}     // 👈 forward EVERYTHING
+        style={style}
       />
     </View>
   );

package/src/types.ts

@@ -1,7 +1,6 @@
-// types.ts
 import type {
-    ImageProps,
-    ImageStyle,
+  ImageProps,
+  ImageStyle,
   TextInputProps,
   TextStyle,
   TouchableOpacityProps,
@@ -35,22 +34,23 @@ export type FormItem = {
   layout?: ViewStyle['flexDirection'];
   spacing?: number;
   children: FormField[];
+  style:ViewStyle
 };
 
 export type FormProps = {
   schema: FormItem[];
 };
 
+
 // Buttons.types.ts
 export type ButtonProps = {
   label?: string;
   buttonText?: string;
-  onPress?: TouchableOpacityProps['onPress'];
   style?: ViewStyle;
   textStyle?: TextStyle;
   spacing?: number;
   labelStyle?: TextStyle;
-};
+} & TouchableOpacityProps;
 
 // Input.types.ts
 export type InputProps = {
@@ -61,7 +61,7 @@ export type InputProps = {
   placeholder?:TextInputProps['placeholder'],
   value?:TextInputProps['value'],
   onChangeText?:TextInputProps['onChangeText'],
-};
+}& TextInputProps;
 
 // Icon.types.ts
 export type IconProps = {