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

package/dist/Form.js

@@ -2,23 +2,39 @@ import { View } from "react-native";
 import React from "react";
 import InputText from "./components/InputText";
 import Buttons from "./components/Buttons";
+import FormText from "./components/Text";
 export const Form = ({ schema = [] }) => {
-    const RenderField = (field, index) => {
+    const renderField = (field, index) => {
+        var _a, _b;
         switch (field.type) {
+            case "text":
+                return (<FormText key={index} label={field.label} style={field.labelStyle}/>);
             case "button":
-                return (<Buttons key={index} label={field.label} style={field.style} textStyle={field.textStyle} spacing={field.spacing} labelStyle={field.labelStyle} {...(field.buttonProps || {})}/>);
+                return (<View key={index} style={{ gap: (_a = field.spacing) !== null && _a !== void 0 ? _a : 13 }}>
+            {field.label && (<FormText label={field.label} style={field.labelStyle}/>)}
+            <Buttons style={field.style} textStyle={field.textStyle} {...(field.buttonProps || {})}/>
+          </View>);
             case "input":
-                return (<InputText key={index} label={field.label} style={field.style} spacing={field.spacing} labelStyle={field.labelStyle} {...(field.inputProps || {})}/>);
+                return (<View key={index} style={{ gap: (_b = field.spacing) !== null && _b !== void 0 ? _b : 13 }}>
+            {field.label && (<FormText label={field.label} style={field.labelStyle}/>)}
+            <InputText style={field.style} {...(field.inputProps || {})}/>
+          </View>);
             default:
                 return null;
         }
     };
     return (<>
-      {schema.map((block, blockIndex) => (<View key={blockIndex} style={[{
-                    flexDirection: block.layout || "column",
-                    gap: block.spacing || 20,
-                }, block.style]}>
-          {block.children.map(RenderField)}
-        </View>))}
+      {schema.map((block, blockIndex) => {
+            var _a, _b;
+            return (<View key={blockIndex} style={[
+                    {
+                        flexDirection: (_a = block.layout) !== null && _a !== void 0 ? _a : "column",
+                        gap: (_b = block.spacing) !== null && _b !== void 0 ? _b : 20,
+                    },
+                    block.style,
+                ]}>
+          {block.children.map(renderField)}
+        </View>);
+        })}
     </>);
 };

package/dist/components/Buttons.js

@@ -1,10 +1,7 @@
 import { Text, TouchableOpacity, View } from "react-native";
 import React from "react";
-import FormText from "./Text";
 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}/>
-
+    return (<View style={{}}>
       <TouchableOpacity {...touchableProps} onPress={onPress} style={[
             {
                 backgroundColor: "#2563eb",

package/dist/components/InputText.js

@@ -1,9 +1,7 @@
 import { StyleSheet, TextInput, View } from 'react-native';
 import React from 'react';
-import FormText from './Text';
-const InputText = ({ label, style, spacing = 13, labelStyle, ...textInputProps }) => {
-    return (<View style={{ gap: spacing || 13 }}>
-      <FormText label={label || ' '} style={labelStyle}/>
+const InputText = ({ label, style, labelStyle, ...textInputProps }) => {
+    return (<View>
       <TextInput {...textInputProps} // 👈 forward EVERYTHING
      style={style}/>
     </View>);

package/dist/components/Text.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { TextProps } from '../types';
-declare const FormText: React.FC<TextProps>;
+import React from "react";
+import { FormTextProps } from "../types";
+declare const FormText: React.FC<FormTextProps>;
 export default FormText;

package/dist/components/Text.js

@@ -1,14 +1,14 @@
-import { StyleSheet, Text, View } from 'react-native';
-import React from 'react';
-const FormText = ({ label, style }) => {
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+const FormText = ({ label, style, ...textProps }) => {
     return (<View>
-      <Text style={[
+      <Text {...textProps} style={[
             {
-                color: '#000',
+                color: "#000",
             },
             style,
         ]}>
-        {label || ' '}
+        {label || " "}
       </Text>
     </View>);
 };

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import type { ImageProps, ImageStyle, TextInputProps, TextStyle, TouchableOpacityProps, ViewStyle } from 'react-native';
+import type { ImageProps, ImageStyle, TextInputProps, TextProps, TextStyle, TouchableOpacityProps, ViewStyle } from "react-native";
 type BaseField = {
     label?: string;
     spacing?: number;
@@ -6,23 +6,27 @@ type BaseField = {
     labelStyle?: TextStyle;
 };
 export type FormInput = BaseField & {
-    type: 'input';
+    type: "input";
     inputProps?: TextInputProps;
 };
+export type FormText = BaseField & {
+    type: "text";
+    textProps?: TextProps;
+};
 export type FormButton = BaseField & {
-    type: 'button';
+    type: "button";
     textStyle?: TextStyle;
     buttonProps?: {
         buttonText?: string;
-        onPress?: TouchableOpacityProps['onPress'];
+        onPress?: TouchableOpacityProps["onPress"];
     };
 };
-export type FormField = FormInput | FormButton;
+export type FormField = FormInput | FormButton | FormText;
 export type FormItem = {
-    layout?: ViewStyle['flexDirection'];
+    layout?: ViewStyle["flexDirection"];
     spacing?: number;
+    style?: ViewStyle;
     children: FormField[];
-    style: ViewStyle;
 };
 export type FormProps = {
     schema: FormItem[];
@@ -37,19 +41,19 @@ export type ButtonProps = {
 } & TouchableOpacityProps;
 export type InputProps = {
     label?: string;
-    style?: TextInputProps['style'];
+    style?: TextInputProps["style"];
     spacing?: number;
     labelStyle?: TextStyle;
-    placeholder?: TextInputProps['placeholder'];
-    value?: TextInputProps['value'];
-    onChangeText?: TextInputProps['onChangeText'];
+    placeholder?: TextInputProps["placeholder"];
+    value?: TextInputProps["value"];
+    onChangeText?: TextInputProps["onChangeText"];
 } & TextInputProps;
 export type IconProps = {
-    icon?: ImageProps['source'];
+    icon?: ImageProps["source"];
     style?: ImageStyle;
 };
-export type TextProps = {
+export type FormTextProps = {
     label?: string;
     style?: TextStyle;
-};
+} & TextProps;
 export {};

package/package.json

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

package/src/Form.tsx

@@ -3,33 +3,45 @@ import React from "react";
 import InputText from "./components/InputText";
 import Buttons from "./components/Buttons";
 import { FormField, FormProps } from "./types";
+import FormText from "./components/Text";
 
 export const Form: React.FC<FormProps> = ({ schema = [] }) => {
-  const RenderField = (field: FormField, index: number) => {
+  const renderField = (field: FormField, index: number) => {
     switch (field.type) {
-      case "button":
+      case "text":
         return (
-          <Buttons
+          <FormText
             key={index}
             label={field.label}
-            style={field.style}
-            textStyle={field.textStyle}
-            spacing={field.spacing}
-            labelStyle={field.labelStyle}
-            {...(field.buttonProps || {})}
+            style={field.labelStyle}
           />
         );
 
+      case "button":
+        return (
+          <View key={index} style={{ gap: field.spacing ?? 13 }}>
+            {field.label && (
+              <FormText label={field.label} style={field.labelStyle} />
+            )}
+            <Buttons
+              style={field.style}
+              textStyle={field.textStyle}
+              {...(field.buttonProps || {})}
+            />
+          </View>
+        );
+
       case "input":
         return (
-          <InputText
-            key={index}
-            label={field.label}
-            style={field.style}
-            spacing={field.spacing}
-            labelStyle={field.labelStyle}
-            {...(field.inputProps || {})}
-          />
+          <View key={index} style={{ gap: field.spacing ?? 13 }}>
+            {field.label && (
+              <FormText label={field.label} style={field.labelStyle} />
+            )}
+            <InputText
+              style={field.style}
+              {...(field.inputProps || {})}
+            />
+          </View>
         );
 
       default:
@@ -42,12 +54,15 @@ export const Form: React.FC<FormProps> = ({ schema = [] }) => {
       {schema.map((block, blockIndex) => (
         <View
           key={blockIndex}
-          style={[{
-            flexDirection: block.layout || "column",
-            gap: block.spacing || 20,
-          },block.style]}
+          style={[
+            {
+              flexDirection: block.layout ?? "column",
+              gap: block.spacing ?? 20,
+            },
+            block.style,
+          ]}
         >
-          {block.children.map(RenderField)}
+          {block.children.map(renderField)}
         </View>
       ))}
     </>

package/src/components/Buttons.tsx

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

package/src/components/InputText.tsx

@@ -6,13 +6,11 @@ import { InputProps } from '../types';
 const InputText:React.FC<InputProps> = ({
  label,
   style,
-  spacing = 13,
   labelStyle,
   ...textInputProps
 }) => {
   return (
-    <View style={{ gap: spacing || 13 }}>
-      <FormText label={label || ' '} style={labelStyle} />
+    <View>
       <TextInput
         {...textInputProps}     // 👈 forward EVERYTHING
         style={style}

package/src/components/Text.tsx

@@ -1,19 +1,20 @@
-import { StyleSheet, Text, View } from 'react-native';
-import React from 'react';
-import { TextProps } from '../types';
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+import { FormTextProps } from "../types";
 
-const FormText:React.FC<TextProps> = ({ label, style }) => {
+const FormText: React.FC<FormTextProps> = ({ label, style, ...textProps }) => {
   return (
     <View>
       <Text
+        {...textProps}
         style={[
           {
-            color: '#000',
+            color: "#000",
           },
           style,
         ]}
       >
-        {label || ' '}
+        {label || " "}
       </Text>
     </View>
   );

package/src/types.ts

@@ -2,10 +2,11 @@ import type {
   ImageProps,
   ImageStyle,
   TextInputProps,
+  TextProps,
   TextStyle,
   TouchableOpacityProps,
   ViewStyle,
-} from 'react-native';
+} from "react-native";
 
 type BaseField = {
   label?: string;
@@ -15,33 +16,36 @@ type BaseField = {
 };
 
 export type FormInput = BaseField & {
-  type: 'input';
+  type: "input";
   inputProps?: TextInputProps;
 };
+export type FormText = BaseField & {
+  type: "text";
+  textProps?: TextProps;
+};
 
 export type FormButton = BaseField & {
-  type: 'button';
+  type: "button";
   textStyle?: TextStyle;
   buttonProps?: {
     buttonText?: string;
-    onPress?: TouchableOpacityProps['onPress'];
+    onPress?: TouchableOpacityProps["onPress"];
   };
 };
 
-export type FormField = FormInput | FormButton;
+export type FormField = FormInput | FormButton | FormText;
 
 export type FormItem = {
-  layout?: ViewStyle['flexDirection'];
+  layout?: ViewStyle["flexDirection"];
   spacing?: number;
+  style?: ViewStyle;
   children: FormField[];
-  style:ViewStyle
 };
 
 export type FormProps = {
   schema: FormItem[];
 };
 
-
 // Buttons.types.ts
 export type ButtonProps = {
   label?: string;
@@ -55,22 +59,22 @@ export type ButtonProps = {
 // Input.types.ts
 export type InputProps = {
   label?: string;
-  style?: TextInputProps['style'];
+  style?: TextInputProps["style"];
   spacing?: number;
   labelStyle?: TextStyle;
-  placeholder?:TextInputProps['placeholder'],
-  value?:TextInputProps['value'],
-  onChangeText?:TextInputProps['onChangeText'],
-}& TextInputProps;
+  placeholder?: TextInputProps["placeholder"];
+  value?: TextInputProps["value"];
+  onChangeText?: TextInputProps["onChangeText"];
+} & TextInputProps;
 
 // Icon.types.ts
 export type IconProps = {
-  icon?: ImageProps['source'];
+  icon?: ImageProps["source"];
   style?: ImageStyle;
 };
 
 // Text.types.ts
-export type TextProps = {
+export type FormTextProps = {
   label?: string;
   style?: TextStyle;
-};
+} & TextProps;