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

package/README.md

@@ -350,5 +350,3 @@ Please keep PRs:
 
 MIT
 
-```
-

package/basic_usage/example.js

@@ -3,27 +3,58 @@ 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
   const [name, setName] = useState("");
 
-  return (
-    <View style={{ padding: 16 }}>
-      <Form
-        data={[
-          {
-            id: "name",
-            label: "Name",
-            input: {
-              placeholder: "Enter your name",
-              value: name,
-              onChangeText: ()=>{},
-            },
-            button: {
-              lable: "name",
-              onPress: () => {},
+  // 👉 Schema controls the entire form UI
+  // Changing this JSON changes the form
+  const formSchema = [
+    {
+      // Layout block: controls how children are arranged
+      layout: "column",
+      spacing: 16, // space between fields
+
+      // Children = actual form fields
+      children: [
+        {
+          // Input field
+          type: "input",
+          label: "Name",
+
+          // All TextInput behavior goes inside inputProps
+          inputProps: {
+            placeholder: "Enter your name",
+            value: name,          // controlled value
+            onChangeText: setName // update state
+          },
+        },
+
+        {
+          // Button field
+          type: "button",
+          label: "Submit",
+
+          // Button behavior goes inside buttonProps
+          buttonProps: {
+            buttonText: "Submit",
+            onPress: () => {
+              // Access state directly
+              console.log("Name:", name);
             },
           },
-        ]}
-      />
+        },
+      ],
+    },
+  ];
+
+  return (
+    <View style={{ padding: 16 }}>
+      {/* 
+        👉 Form only renders what the schema describes
+        👉 No internal state, no validation, no logic
+      */}
+      <Form schema={formSchema} />
     </View>
   );
 }

package/dist/Form.js

@@ -6,9 +6,9 @@ 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;
         }

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

@@ -29,12 +29,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 +42,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.1",
+  "version": "1.3.3",
   "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 || {})}
           />
         );

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,
@@ -41,16 +40,16 @@ 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 +60,7 @@ export type InputProps = {
   placeholder?:TextInputProps['placeholder'],
   value?:TextInputProps['value'],
   onChangeText?:TextInputProps['onChangeText'],
-};
+}& TextInputProps;
 
 // Icon.types.ts
 export type IconProps = {