@hitesh0009/react-native-basic-form 1.1.0 → 1.1.2

package/dist/Form.d.ts

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

package/dist/Form.js

@@ -0,0 +1,35 @@
+import { FlatList, StyleSheet, Text, TextInput, TouchableOpacity, View, } from "react-native";
+export const Form = ({ data, gap_bwt_keyValue = 10, gap_bwt_keys = 12, lable_style, inputtext_style, button_container_style, buttontext_style, placeholderTextColor = "#999", multiline_input = false, textAlignVertical_input = "center", scrollEnabled = true, showsHorizontalScrollIndicator = true }) => {
+    return (<View>
+      <FlatList scrollEnabled={scrollEnabled} showsHorizontalScrollIndicator={showsHorizontalScrollIndicator} data={data} keyExtractor={(item) => item.id} ItemSeparatorComponent={() => <View style={{ height: gap_bwt_keys }}/>} renderItem={({ item }) => (<View style={{ gap: gap_bwt_keyValue }}>
+            {item.label && (<Text style={[styles.lable, lable_style]}>{item.label}</Text>)}
+
+            {item.input && (<TextInput style={[styles.inputtext, inputtext_style]} placeholder={item.input.placeholder} placeholderTextColor={placeholderTextColor} multiline={multiline_input} textAlignVertical={textAlignVertical_input} value={item.input.value} onChangeText={item.input.onChangeText}/>)}
+
+            {item.button && (<TouchableOpacity onPress={item.button.onPress} style={[styles.button_container, button_container_style]}>
+                <Text style={[styles.button_text, buttontext_style]}>
+                  {item.button.label}
+                </Text>
+              </TouchableOpacity>)}
+          </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,
+    },
+});

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/types.d.ts

@@ -0,0 +1,30 @@
+import type { TextStyle, ViewStyle } from "react-native";
+export type FormInput = {
+    placeholder?: string;
+    value: string;
+    onChangeText: (text: string) => void;
+};
+export type FormButton = {
+    label: string;
+    onPress: () => void;
+};
+export type FormItem = {
+    id: string;
+    label?: string;
+    input?: FormInput;
+    button?: FormButton;
+};
+export type FormProps = {
+    data: FormItem[];
+    gap_bwt_keyValue?: number;
+    gap_bwt_keys?: number;
+    lable_style?: TextStyle;
+    inputtext_style?: TextStyle;
+    button_container_style?: ViewStyle;
+    buttontext_style?: TextStyle;
+    placeholderTextColor?: string;
+    scrollEnabled?: boolean;
+    showsHorizontalScrollIndicator?: boolean;
+    multiline_input?: boolean;
+    textAlignVertical_input?: "top" | "center" | "bottom" | "auto" | undefined;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitesh0009/react-native-basic-form",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "A lightweight, data-driven form renderer for React Native with fully controlled inputs and flexible styling.",
   "keywords": [
     "react-native",
@@ -22,15 +22,22 @@
     "type": "git",
     "url": "git+https://github.com/hiteshjangir0009/react-native-basic-form.git"
   },
-  "license": "ISC",
+  "license": "MIT",
   "author": "Hitesh Jangir",
   "type": "module",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "react": "19.1.1",
-    "react-native": "0.82.0"
+    "react": ">=17",
+    "react-native": ">=0.70"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.10",
+    "react-native": "*",
+    "typescript": "^5.3.0"
   }
-}
+}

package/src/{Form.js → Form.tsx}

@@ -6,58 +6,56 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
-import React from "react";
+import type { FormProps, FormItem } from "./types";
 
-const Form = ({
-  data = [
-    {
-      lable: "",
-      inputtext: { placeholder: "", value: "", onchangetext: () => {} },
-      button: { lable: "", onPress: () => {} },
-    },
-  ],
-  gap_bwt_keyValue,
-  gap_bwt_keys,
+export const Form: React.FC<FormProps> = ({
+  data,
+  gap_bwt_keyValue = 10,
+  gap_bwt_keys = 12,
   lable_style,
   inputtext_style,
   button_container_style,
   buttontext_style,
-  placeholderTextColor,
-  multiline_input,
-  textAlignVertical_input,
+  placeholderTextColor = "#999",
+  multiline_input = false,
+  textAlignVertical_input = "center",
+  scrollEnabled= true,
+  showsHorizontalScrollIndicator= true
+  
 }) => {
   return (
     <View>
-      <FlatList
+      <FlatList<FormItem>
+        scrollEnabled={scrollEnabled}
+        showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
         data={data}
-        keyExtractor={(_, index) => index.toString()}
-        ItemSeparatorComponent={() => (
-          <View style={{ height: gap_bwt_keys || 12 }} />
-        )}
-        renderItem={({ item, index }) => (
-          <View style={{ gap: gap_bwt_keyValue || 10 }}>
-            {item.lable && (
-              <Text style={[styles.lable, lable_style]}>{item.lable}</Text>
+        keyExtractor={(item) => item.id}
+        ItemSeparatorComponent={() => <View style={{ height: gap_bwt_keys }} />}
+        renderItem={({ item }) => (
+          <View style={{ gap: gap_bwt_keyValue }}>
+            {item.label && (
+              <Text style={[styles.lable, lable_style]}>{item.label}</Text>
             )}
 
-            {item.inputtext && (
+            {item.input && (
               <TextInput
                 style={[styles.inputtext, inputtext_style]}
-                placeholderTextColor={placeholderTextColor || "#999"}
-                placeholder={item.inputtext.placeholder}
-                multiline={multiline_input || false}
-                textAlignVertical={textAlignVertical_input || "center"}
-                value={item.inputtext.value}
-                onChangeText={(val) => item.inputtext.onchangetext(val)}
+                placeholder={item.input.placeholder}
+                placeholderTextColor={placeholderTextColor}
+                multiline={multiline_input}
+                textAlignVertical={textAlignVertical_input}
+                value={item.input.value}
+                onChangeText={item.input.onChangeText}
               />
             )}
+
             {item.button && (
               <TouchableOpacity
                 onPress={item.button.onPress}
                 style={[styles.button_container, button_container_style]}
               >
                 <Text style={[styles.button_text, buttontext_style]}>
-                  {item.button.lable}
+                  {item.button.label}
                 </Text>
               </TouchableOpacity>
             )}
@@ -68,8 +66,6 @@ const Form = ({
   );
 };
 
-export default Form;
-
 const styles = StyleSheet.create({
   lable: {
     color: "#000",

package/src/index.ts

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

package/src/types.ts

@@ -0,0 +1,39 @@
+import type { TextStyle, ViewStyle } from "react-native";
+
+export type FormInput = {
+  placeholder?: string;
+  value: string;
+  onChangeText: (text: string) => void;
+};
+
+export type FormButton = {
+  label: string;
+  onPress: () => void;
+};
+
+export type FormItem = {
+  id: string;
+  label?: string;
+  input?: FormInput;
+  button?: FormButton;
+};
+
+export type FormProps = {
+  data: FormItem[];
+
+  gap_bwt_keyValue?: number;
+  gap_bwt_keys?: number;
+
+  lable_style?: TextStyle;
+  inputtext_style?: TextStyle;
+  button_container_style?: ViewStyle;
+  buttontext_style?: TextStyle;
+
+  placeholderTextColor?: string;
+
+  scrollEnabled?: boolean;
+  showsHorizontalScrollIndicator?: boolean;
+  
+  multiline_input?: boolean;
+  textAlignVertical_input?: "top" | "center" | "bottom" | "auto" | undefined;
+};

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2019",
+    "module": "ESNext",
+    "jsx": "react-native",
+
+    "rootDir": "src",
+    "outDir": "dist",
+
+    "declaration": true,
+    "declarationMap": false,
+    "emitDeclarationOnly": false,
+
+    "strict": true,
+    "skipLibCheck": true,
+
+    "moduleResolution": "node",
+
+    "lib": ["ES2019"],
+    "types": ["react", "react-native"],
+
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src"]
+}

package/index.js

@@ -1,3 +0,0 @@
-import Form from "./src/Form";
-
-export const basic_form = Form;