@hitesh0009/react-native-basic-form 1.2.6 → 1.2.7

package/dist/Form.d.ts

@@ -1,2 +1,3 @@
-import type { FormProps } from "./types";
+import React from "react";
+import { FormProps } from "./types";
 export declare const Form: React.FC<FormProps>;

package/dist/Form.js

@@ -1,105 +1,24 @@
-import { FlatList, Image, StyleSheet, Text, TextInput, TouchableOpacity, View, } from "react-native";
-export const Form = ({ data, gap_bwt_keyValue = 10, gap_bwt_keys = 12, lableStyle, inputTextStyle, buttonContainerStyle, buttonTextStyle, headerIcon, headerIconStyle, headerTextStyle, imageProps, flatlistProps, textInputProps, textProp, headerText, headerContainerStyle, containerStyle, imageContainerStyle, touchableOpacityProp, inputTextContainerStyle, inputTextGroupContainerStyle, ButtonContainerStyle, buttonGroupContainerStyle, buttonGroupStyle, buttonGroupTextStyle, inputButtonGroupContainerStyle, inputButtonGroupInputStyle, inputButtonGroupButtonStyle, inputButtonGroupButtonTextStyle, }) => {
-    return (<View style={[{ gap: 20 }, containerStyle]}>
-      {(headerIcon || headerText) && (<View style={[{ flexDirection: "row", gap: 10 }, headerContainerStyle]}>
-          {headerIcon && (<View style={imageContainerStyle}>
-              <Image source={headerIcon} style={[styles.headericon, headerIconStyle]} {...imageProps}/>
-            </View>)}
-          {headerText && (<Text style={[styles.headertext, headerTextStyle]} {...textProp}>
-              {headerText}
-            </Text>)}
-        </View>)}
-
-      <FlatList data={data} {...flatlistProps} ItemSeparatorComponent={() => <View style={{ height: gap_bwt_keys }}/>} renderItem={({ item }) => (<View style={{ gap: gap_bwt_keyValue }}>
-            {item.label && (<Text style={[styles.lable, lableStyle]}>{item.label}</Text>)}
-
-            {item.input && (<View style={inputTextContainerStyle}>
-                <TextInput {...textInputProps} style={[styles.inputtext, inputTextStyle]} placeholder={item.input.placeholder} value={item.input.value} onChangeText={item.input.onChangeText} keyboardType={item.input.keyboardType}/>
-              </View>)}
-
-            {item.inputTextGroup &&
-                item.inputTextGroup.map((inp, index) => (<View key={index} style={inputTextGroupContainerStyle}>
-                  <TextInput {...textInputProps} style={[styles.inputtext, inputTextStyle]} placeholder={inp.placeholder} value={inp.value} onChangeText={inp.onChangeText} keyboardType={inp.keyboardType}/>
-                </View>))}
-
-            {item.button && (<View style={ButtonContainerStyle}>
-                <TouchableOpacity {...touchableOpacityProp} onPress={item.button.onPress} style={[styles.button_container, buttonContainerStyle]}>
-                  <Text style={[styles.button_text, buttonTextStyle]}>
-                    {item.button.label}
-                  </Text>
-                </TouchableOpacity>
-              </View>)}
-
-            {item.buttonGroup && (<View style={[
-                    { flexDirection: "row", gap: 10 },
-                    buttonGroupContainerStyle,
-                ]}>
-                {item.buttonGroup.map((btn, index) => (<TouchableOpacity key={index} onPress={btn.onPress} style={[styles.button_container, buttonGroupStyle]}>
-                    <Text style={[styles.button_text, buttonGroupTextStyle]}>
-                      {btn.label}
-                    </Text>
-                  </TouchableOpacity>))}
-              </View>)}
-
-            {item.inputButtonGroup && (<View style={[
-                    { flexDirection: "row", gap: 10 },
-                    inputButtonGroupContainerStyle,
-                ]}>
-                <View style={[inputTextContainerStyle, { gap: gap_bwt_keyValue }]}>
-                  <Text style={[styles.lable, lableStyle]}>
-                    {item.inputButtonGroup.input.header}
-                  </Text>
-
-                  <TextInput {...textInputProps} style={[styles.inputtext, inputButtonGroupInputStyle]} placeholder={item.inputButtonGroup.input.placeholder} value={item.inputButtonGroup.input.value} onChangeText={item.inputButtonGroup.input.onChangeText} keyboardType={item.inputButtonGroup.input.keyboardType}/>
-                </View>
-
-                <View style={{ gap: gap_bwt_keyValue }}>
-                  <Text style={[styles.lable, lableStyle]}>
-                    {item.inputButtonGroup.button.header}
-                  </Text>
-
-                  <TouchableOpacity onPress={item.inputButtonGroup.button.onPress} style={[
-                    styles.button_container,
-                    inputButtonGroupButtonStyle,
-                ]}>
-                    <Text style={[
-                    styles.button_text,
-                    inputButtonGroupButtonTextStyle,
-                ]}>
-                      {item.inputButtonGroup.button.label}
-                    </Text>
-                  </TouchableOpacity>
-                </View>
-              </View>)}
-          </View>)}/>
-    </View>);
+import { View } from "react-native";
+import React from "react";
+import InputText from "./components/InputText";
+import Buttons from "./components/Buttons";
+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} gap={13} {...(field.buttonProps || {})}/>);
+            case "input":
+                return (<InputText key={index} label={field.label} style={field.style} gap={13} {...(field.inputProps || {})}/>);
+            default:
+                return null;
+        }
+    };
+    return (<>
+      {schema.map((block, blockIndex) => (<View key={blockIndex} style={{
+                flexDirection: block.layout || "column",
+                gap: block.gap || 20,
+            }}>
+          {block.children.map(RenderField)}
+        </View>))}
+    </>);
 };
-const styles = StyleSheet.create({
-    lable: {
-        color: "#000",
-        fontSize: 14,
-    },
-    inputtext: {
-        color: "#000",
-        fontSize: 12,
-        borderWidth: 1,
-        borderColor: "#b1b0b0",
-        borderRadius: 10,
-        padding: 10,
-    },
-    button_container: {},
-    button_text: {
-        color: "#000",
-        fontSize: 14,
-    },
-    headericon: {
-        height: 30,
-        width: 30,
-        resizeMode: "contain",
-    },
-    headertext: {
-        color: "#000",
-        fontSize: 18,
-        fontWeight: "400",
-    },
-});

package/dist/components/Buttons.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ButtonProps } from "../types";
+declare const Buttons: React.FC<ButtonProps>;
+export default Buttons;

package/dist/components/Buttons.js

@@ -0,0 +1,23 @@
+import { Text, TouchableOpacity, View } from "react-native";
+import React from "react";
+import FormText from "./Text";
+const Buttons = ({ label, buttonText, onPress, style, textStyle, gap, labelStyle, }) => {
+    return (<View style={{ gap: gap !== null && gap !== void 0 ? gap : 13 }}>
+      <FormText label={label || " "} style={labelStyle}/>
+
+      <TouchableOpacity onPress={onPress} style={[
+            {
+                backgroundColor: "#2563eb",
+                padding: 14,
+                borderRadius: 8,
+                alignItems: "center",
+            },
+            style,
+        ]}>
+        <Text style={[{ color: "#fff", fontWeight: "600" }, textStyle]}>
+          {buttonText !== null && buttonText !== void 0 ? buttonText : label}
+        </Text>
+      </TouchableOpacity>
+    </View>);
+};
+export default Buttons;

package/dist/components/Icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from '../types';
+declare const Icon: React.FC<IconProps>;
+export default Icon;

package/dist/components/Icon.js

@@ -0,0 +1,13 @@
+import { Image, StyleSheet, View } from 'react-native';
+import React from 'react';
+const Icon = ({ icon, style }) => {
+    return (<View>
+      <Image style={[{
+                height: 30,
+                width: 30,
+                objectFit: 'contain',
+            }, style]} source={icon}/>
+    </View>);
+};
+export default Icon;
+const styles = StyleSheet.create({});

package/dist/components/InputText.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { InputProps } from '../types';
+declare const InputText: React.FC<InputProps>;
+export default InputText;

package/dist/components/InputText.js

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

package/dist/components/Text.d.ts

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

package/dist/components/Text.js

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

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { Form } from './Form';
-export { FormProps, FormItem, FormInput, FormButton } from './types.js';
+export { Form } from "./Form";
+export { FormProps, FormItem, FormInput, FormButton, ButtonProps, InputProps, } from "./types.js";

package/dist/index.js

@@ -1 +1 @@
-export { Form } from './Form';
+export { Form } from "./Form";

package/dist/types.d.ts

@@ -1,72 +1,55 @@
-import type { FlatListProps, ImageProps, ImageSourcePropType, ImageStyle, TextInputProps, TextProps, TextStyle, TouchableOpacityProps, ViewStyle } from "react-native";
-export type FormInput = {
-    placeholder?: string;
-    value: string;
-    onChangeText: TextInputProps["onChangeText"];
-    multiline?: TextInputProps["multiline"];
-    textAlignVertical?: TextInputProps["textAlignVertical"];
-    keyboardType?: TextInputProps["keyboardType"];
+import type { ImageProps, ImageStyle, TextInputProps, TextStyle, TouchableOpacityProps, ViewStyle } from 'react-native';
+type BaseField = {
+    label?: string;
+    gap?: number;
+    style?: ViewStyle;
+    labelStyle?: TextStyle;
 };
-export type FormButton = {
-    label: string;
-    onPress: () => void;
+export type FormInput = BaseField & {
+    type: 'input';
+    inputProps?: TextInputProps;
 };
-export type ForminputButtonGroupInput = {
-    header: string;
-    placeholder?: string;
-    value: string;
-    onChangeText: TextInputProps["onChangeText"];
-    multiline?: TextInputProps["multiline"];
-    textAlignVertical?: TextInputProps["textAlignVertical"];
-    keyboardType?: TextInputProps["keyboardType"];
+export type FormButton = BaseField & {
+    type: 'button';
+    textStyle?: TextStyle;
+    buttonProps?: {
+        buttonText?: string;
+        onPress?: TouchableOpacityProps['onPress'];
+    };
 };
-export type ForminputButtonGroupButton = {
-    header: string;
-    label: string;
-    onPress: () => void;
+export type FormField = FormInput | FormButton;
+export type FormItem = {
+    layout?: ViewStyle['flexDirection'];
+    gap?: number;
+    children: FormField[];
 };
-export type ForminputButtonGroup = {
-    input: ForminputButtonGroupInput;
-    button: ForminputButtonGroupButton;
+export type FormProps = {
+    schema: FormItem[];
 };
-export type FormItem = {
-    id: string;
+export type ButtonProps = {
     label?: string;
-    input?: FormInput;
-    button?: FormButton;
-    buttonGroup?: FormButton[];
-    inputTextGroup?: FormInput[];
-    inputButtonGroup?: ForminputButtonGroup;
+    buttonText?: string;
+    onPress?: TouchableOpacityProps['onPress'];
+    style?: ViewStyle;
+    textStyle?: TextStyle;
+    gap?: number;
+    labelStyle?: TextStyle;
 };
-export type FormProps = {
-    data: FormItem[];
-    gap_bwt_keyValue?: number;
-    gap_bwt_keys?: number;
-    lableStyle?: TextStyle;
-    inputTextStyle?: TextStyle;
-    buttonContainerStyle?: ViewStyle;
-    buttonTextStyle?: TextStyle;
-    headerIcon?: ImageSourcePropType | undefined;
-    headerIconStyle?: ImageStyle;
-    imageProps?: ImageProps;
-    numColumns?: number;
-    flatlistProps?: FlatListProps<FormItem>;
-    textProp?: TextProps;
-    headerText?: string | undefined;
-    headerTextStyle?: TextStyle;
-    headerContainerStyle?: ViewStyle;
-    containerStyle?: ViewStyle;
-    textInputProps?: TextInputProps;
-    imageContainerStyle?: ViewStyle;
-    touchableOpacityProp?: TouchableOpacityProps;
-    inputTextContainerStyle?: ViewStyle;
-    ButtonContainerStyle?: ViewStyle;
-    buttonGroupContainerStyle?: ViewStyle;
-    buttonGroupStyle?: ViewStyle;
-    inputTextGroupContainerStyle?: ViewStyle;
-    inputButtonGroupContainerStyle?: ViewStyle;
-    inputButtonGroupInputStyle?: ViewStyle;
-    inputButtonGroupButtonStyle?: ViewStyle;
-    inputButtonGroupButtonTextStyle?: ViewStyle;
-    buttonGroupTextStyle?: TextStyle;
+export type InputProps = {
+    label?: string;
+    style?: TextInputProps['style'];
+    gap?: number;
+    labelStyle?: TextStyle;
+    placeholder?: TextInputProps['placeholder'];
+    value?: TextInputProps['value'];
+    onChangeText?: TextInputProps['onChangeText'];
+};
+export type IconProps = {
+    icon?: ImageProps['source'];
+    style?: ImageStyle;
+};
+export type TextProps = {
+    label?: string;
+    style?: TextStyle;
 };
+export {};

package/package.json

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

package/src/Form.tsx

@@ -1,225 +1,53 @@
-import {
-  FlatList,
-  Image,
-  StyleSheet,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import type { FormProps, FormItem } from "./types";
+import { View } from "react-native";
+import React from "react";
+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) => {
+    switch (field.type) {
+      case "button":
+        return (
+          <Buttons
+            key={index}
+            label={field.label}
+            style={field.style}
+            textStyle={field.textStyle}
+            gap={13}
+            {...(field.buttonProps || {})}
+          />
+        );
+
+      case "input":
+        return (
+          <InputText
+            key={index}
+            label={field.label}
+            style={field.style}
+            gap={13}
+            {...(field.inputProps || {})}
+          />
+        );
+
+      default:
+        return null;
+    }
+  };
 
-export const Form: React.FC<FormProps> = ({
-  data,
-  gap_bwt_keyValue = 10,
-  gap_bwt_keys = 12,
-  lableStyle,
-  inputTextStyle,
-  buttonContainerStyle,
-  buttonTextStyle,
-  headerIcon,
-
-  headerIconStyle,
-  headerTextStyle,
-
-  imageProps,
-  flatlistProps,
-  textInputProps,
-  textProp,
-  headerText,
-  headerContainerStyle,
-  containerStyle,
-  imageContainerStyle,
-  touchableOpacityProp,
-
-  inputTextContainerStyle,
-  inputTextGroupContainerStyle,
-
-  ButtonContainerStyle,
-
-  buttonGroupContainerStyle,
-  buttonGroupStyle,
-  buttonGroupTextStyle,
-
-  inputButtonGroupContainerStyle,
-  inputButtonGroupInputStyle,
-  inputButtonGroupButtonStyle,
-  inputButtonGroupButtonTextStyle,
-}) => {
   return (
-    <View style={[{ gap: 20 }, containerStyle]}>
-      {(headerIcon || headerText) && (
-        <View style={[{ flexDirection: "row", gap: 10 }, headerContainerStyle]}>
-          {headerIcon && (
-            <View style={imageContainerStyle}>
-              <Image
-                source={headerIcon}
-                style={[styles.headericon, headerIconStyle]}
-                {...imageProps}
-              />
-            </View>
-          )}
-          {headerText && (
-            <Text style={[styles.headertext, headerTextStyle]} {...textProp}>
-              {headerText}
-            </Text>
-          )}
+    <>
+      {schema.map((block, blockIndex) => (
+        <View
+          key={blockIndex}
+          style={{
+            flexDirection: block.layout || "column",
+            gap: block.gap || 20,
+          }}
+        >
+          {block.children.map(RenderField)}
         </View>
-      )}
-
-      <FlatList<FormItem>
-        data={data}
-        {...flatlistProps}
-        ItemSeparatorComponent={() => <View style={{ height: gap_bwt_keys }} />}
-        renderItem={({ item }) => (
-          <View style={{ gap: gap_bwt_keyValue }}>
-            {item.label && (
-              <Text style={[styles.lable, lableStyle]}>{item.label}</Text>
-            )}
-
-            {item.input && (
-              <View style={inputTextContainerStyle}>
-                <TextInput
-                  {...textInputProps}
-                  style={[styles.inputtext, inputTextStyle]}
-                  placeholder={item.input.placeholder}
-                  value={item.input.value}
-                  onChangeText={item.input.onChangeText}
-                  keyboardType={item.input.keyboardType}
-                />
-              </View>
-            )}
-
-            {item.inputTextGroup &&
-              item.inputTextGroup.map((inp, index) => (
-                <View key={index} style={inputTextGroupContainerStyle}>
-                  <TextInput
-                    {...textInputProps}
-                    style={[styles.inputtext, inputTextStyle]}
-                    placeholder={inp.placeholder}
-                    value={inp.value}
-                    onChangeText={inp.onChangeText}
-                    keyboardType={inp.keyboardType}
-                  />
-                </View>
-              ))}
-
-            {item.button && (
-              <View style={ButtonContainerStyle}>
-                <TouchableOpacity
-                  {...touchableOpacityProp}
-                  onPress={item.button.onPress}
-                  style={[styles.button_container, buttonContainerStyle]}
-                >
-                  <Text style={[styles.button_text, buttonTextStyle]}>
-                    {item.button.label}
-                  </Text>
-                </TouchableOpacity>
-              </View>
-            )}
-
-            {item.buttonGroup && (
-              <View
-                style={[
-                  { flexDirection: "row", gap: 10 },
-                  buttonGroupContainerStyle,
-                ]}
-              >
-                {item.buttonGroup.map((btn, index) => (
-                  <TouchableOpacity
-                    key={index}
-                    onPress={btn.onPress}
-                    style={[styles.button_container, buttonGroupStyle]}
-                  >
-                    <Text style={[styles.button_text, buttonGroupTextStyle]}>
-                      {btn.label}
-                    </Text>
-                  </TouchableOpacity>
-                ))}
-              </View>
-            )}
-
-            {item.inputButtonGroup && (
-              <View
-                style={[
-                  { flexDirection: "row", gap: 10 },
-                  inputButtonGroupContainerStyle,
-                ]}
-              >
-                <View
-                  style={[inputTextContainerStyle, { gap: gap_bwt_keyValue }]}
-                >
-                  <Text style={[styles.lable, lableStyle]}>
-                    {item.inputButtonGroup.input.header}
-                  </Text>
-
-                  <TextInput
-                    {...textInputProps}
-                    style={[styles.inputtext, inputButtonGroupInputStyle]}
-                    placeholder={item.inputButtonGroup.input.placeholder}
-                    value={item.inputButtonGroup.input.value}
-                    onChangeText={item.inputButtonGroup.input.onChangeText}
-                    keyboardType={item.inputButtonGroup.input.keyboardType}
-                  />
-                </View>
-
-                <View style={{ gap: gap_bwt_keyValue }}>
-                  <Text style={[styles.lable, lableStyle]}>
-                    {item.inputButtonGroup.button.header}
-                  </Text>
-
-                  <TouchableOpacity
-                    onPress={item.inputButtonGroup.button.onPress}
-                    style={[
-                      styles.button_container,
-                      inputButtonGroupButtonStyle,
-                    ]}
-                  >
-                    <Text
-                      style={[
-                        styles.button_text,
-                        inputButtonGroupButtonTextStyle,
-                      ]}
-                    >
-                      {item.inputButtonGroup.button.label}
-                    </Text>
-                  </TouchableOpacity>
-                </View>
-              </View>
-            )}
-          </View>
-        )}
-      />
-    </View>
+      ))}
+    </>
   );
 };
-
-const styles = StyleSheet.create({
-  lable: {
-    color: "#000",
-    fontSize: 14,
-  },
-  inputtext: {
-    color: "#000",
-    fontSize: 12,
-    borderWidth: 1,
-    borderColor: "#b1b0b0",
-    borderRadius: 10,
-    padding: 10,
-  },
-  button_container: {},
-  button_text: {
-    color: "#000",
-    fontSize: 14,
-  },
-  headericon: {
-    height: 30,
-    width: 30,
-    resizeMode: "contain",
-  },
-  headertext: {
-    color: "#000",
-    fontSize: 18,
-    fontWeight: "400",
-  },
-});

package/src/components/Buttons.tsx

@@ -0,0 +1,39 @@
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import React from "react";
+import FormText from "./Text";
+import type { ButtonProps } from "../types";
+
+const Buttons: React.FC<ButtonProps> = ({
+  label,
+  buttonText,
+  onPress,
+  style,
+  textStyle,
+  gap,
+  labelStyle,
+}) => {
+  return (
+    <View style={{ gap: gap ?? 13 }}>
+      <FormText label={label || " "} style={labelStyle} />
+
+      <TouchableOpacity
+        onPress={onPress}
+        style={[
+          {
+            backgroundColor: "#2563eb",
+            padding: 14,
+            borderRadius: 8,
+            alignItems: "center",
+          },
+          style,
+        ]}
+      >
+        <Text style={[{ color: "#fff", fontWeight: "600" }, textStyle]}>
+          {buttonText ?? label}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default Buttons;

package/src/components/Icon.tsx

@@ -0,0 +1,22 @@
+import { Image, StyleSheet, Text, View } from 'react-native';
+import React from 'react';
+import { IconProps } from '../types';
+
+const Icon:React.FC<IconProps> = ({ icon,style }) => {
+  return (
+    <View>
+      <Image
+        style={[{
+          height: 30,
+          width: 30,
+          objectFit: 'contain',
+        },style]}
+        source={icon}
+      />
+    </View>
+  );
+};
+
+export default Icon;
+
+const styles = StyleSheet.create({});

package/src/components/InputText.tsx

@@ -0,0 +1,38 @@
+import { StyleSheet, Text, TextInput, View } from 'react-native';
+import React from 'react';
+import FormText from './Text';
+import { InputProps } from '../types';
+
+const InputText:React.FC<InputProps> = ({
+  label,
+  placeholder,
+  value,
+  onChangeText,
+  style,
+  gap,
+  labelStyle,
+}) => {
+  return (
+    <View style={{ gap: gap || 13 }}>
+      <FormText label={label || ' '} style={labelStyle} />
+      <TextInput
+        placeholder={placeholder}
+        value={value}
+        onChangeText={onChangeText}
+        style={[
+          {
+            borderWidth: 1,
+            borderColor: '#ccc',
+            padding: 10,
+            borderRadius: 6,
+          },
+          style,
+        ]}
+      />
+    </View>
+  );
+};
+
+export default InputText;
+
+const styles = StyleSheet.create({});

package/src/components/Text.tsx

@@ -0,0 +1,24 @@
+import { StyleSheet, Text, View } from 'react-native';
+import React from 'react';
+import { TextProps } from '../types';
+
+const FormText:React.FC<TextProps> = ({ label, style }) => {
+  return (
+    <View>
+      <Text
+        style={[
+          {
+            color: '#000',
+          },
+          style,
+        ]}
+      >
+        {label || ' '}
+      </Text>
+    </View>
+  );
+};
+
+export default FormText;
+
+const styles = StyleSheet.create({});

package/src/index.ts

@@ -1,3 +1,9 @@
-
-export { Form } from './Form';
-export { FormProps, FormItem, FormInput, FormButton } from './types.js';
+export { Form } from "./Form";
+export {
+  FormProps,
+  FormItem,
+  FormInput,
+  FormButton,
+  ButtonProps,
+  InputProps,
+} from "./types.js";

package/src/types.ts

@@ -1,95 +1,76 @@
-import { TouchableOpacity } from "./../node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.d";
+// types.ts
 import type {
-  FlatListProps,
-  ImageProps,
-  ImageSourcePropType,
-  ImageStyle,
+    ImageProps,
+    ImageStyle,
   TextInputProps,
-  TextProps,
   TextStyle,
   TouchableOpacityProps,
   ViewStyle,
-} from "react-native";
+} from 'react-native';
 
-export type FormInput = {
-  placeholder?: string;
-  value: string;
-  onChangeText: TextInputProps["onChangeText"];
-  multiline?: TextInputProps["multiline"];
-  textAlignVertical?: TextInputProps["textAlignVertical"];
-  keyboardType?: TextInputProps["keyboardType"];
-};
-
-export type FormButton = {
-  label: string;
-  onPress: () => void;
+type BaseField = {
+  label?: string;
+  gap?: number;
+  style?: ViewStyle;
+  labelStyle?: TextStyle;
 };
 
-export type ForminputButtonGroupInput = {
-  header: string;
-  placeholder?: string;
-  value: string;
-  onChangeText: TextInputProps["onChangeText"];
-  multiline?: TextInputProps["multiline"];
-  textAlignVertical?: TextInputProps["textAlignVertical"];
-  keyboardType?: TextInputProps["keyboardType"];
+export type FormInput = BaseField & {
+  type: 'input';
+  inputProps?: TextInputProps;
 };
 
-export type ForminputButtonGroupButton = {
-  header: string;
-  label: string;
-  onPress: () => void;
+export type FormButton = BaseField & {
+  type: 'button';
+  textStyle?: TextStyle;
+  buttonProps?: {
+    buttonText?: string;
+    onPress?: TouchableOpacityProps['onPress'];
+  };
 };
 
-export type ForminputButtonGroup = {
-  input: ForminputButtonGroupInput;
-  button: ForminputButtonGroupButton;
-};
+export type FormField = FormInput | FormButton;
 
 export type FormItem = {
-  id: string;
-  label?: string;
-  input?: FormInput;
-  button?: FormButton;
-  buttonGroup?: FormButton[];
-  inputTextGroup?: FormInput[];
-  inputButtonGroup?: ForminputButtonGroup;
+  layout?: ViewStyle['flexDirection'];
+  gap?: number;
+  children: FormField[];
 };
 
 export type FormProps = {
-  data: FormItem[];
-
-  gap_bwt_keyValue?: number;
-  gap_bwt_keys?: number;
+  schema: FormItem[];
+};
 
-  lableStyle?: TextStyle;
-  inputTextStyle?: TextStyle;
-  buttonContainerStyle?: ViewStyle;
-  buttonTextStyle?: TextStyle;
+// Buttons.types.ts
+export type ButtonProps = {
+  label?: string;
+  buttonText?: string;
+  onPress?: TouchableOpacityProps['onPress'];
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+  gap?: number;
+  labelStyle?: TextStyle;
+};
 
-  headerIcon?: ImageSourcePropType | undefined;
-  headerIconStyle?: ImageStyle;
-  imageProps?: ImageProps;
-  numColumns?: number;
-  flatlistProps?: FlatListProps<FormItem>;
+// Input.types.ts
+export type InputProps = {
+  label?: string;
+  style?: TextInputProps['style'];
+  gap?: number;
+  labelStyle?: TextStyle;
+  placeholder?:TextInputProps['placeholder'],
+  value?:TextInputProps['value'],
+  onChangeText?:TextInputProps['onChangeText'],
+};
 
-  textProp?: TextProps;
-  headerText?: string | undefined;
-  headerTextStyle?: TextStyle;
+// Icon.types.ts
+export type IconProps = {
+  icon?: ImageProps['source'];
+  style?: ImageStyle;
+};
 
-  headerContainerStyle?: ViewStyle;
-  containerStyle?: ViewStyle;
-  textInputProps?: TextInputProps;
-  imageContainerStyle?: ViewStyle;
-  touchableOpacityProp?: TouchableOpacityProps;
-  inputTextContainerStyle?: ViewStyle;
-  ButtonContainerStyle?: ViewStyle;
-  buttonGroupContainerStyle?: ViewStyle;
-  buttonGroupStyle?: ViewStyle;
-  inputTextGroupContainerStyle?: ViewStyle;
-  inputButtonGroupContainerStyle?: ViewStyle;
-   inputButtonGroupInputStyle?:ViewStyle,
-  inputButtonGroupButtonStyle?:ViewStyle,
-  inputButtonGroupButtonTextStyle?:ViewStyle
-  buttonGroupTextStyle?:TextStyle
+// Text.types.ts
+export type TextProps = {
+  label?: string;
+  style?: TextStyle;
 };