@hitesh0009/react-native-basic-form 1.0.0

package/README.MD

@@ -0,0 +1,26 @@
+# react-native-basic-form
+
+A lightweight, data-driven form renderer for React Native with fully controlled inputs and flexible styling.
+
+This library helps you render simple forms using a declarative data structure, without managing internal state or enforcing opinions about validation or submission.
+
+---
+
+## ✨ Features
+
+- 📦 **JS-only** (no native code, no linking)
+- 🎛 **Fully controlled inputs**
+- 🧩 **Data-driven rendering**
+- 🎨 **Style overrides supported**
+- ⚡ Built on `FlatList` for performance
+- 🧠 Unopinionated and easy to extend
+
+---
+
+## 📦 Installation
+
+```sh
+npm install react-native-basic-form
+or
+yarn add react-native-basic-form
+

package/basic_usage/example.js

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import { View } from "react-native";
+import { Form } from "react-native-basic-form";
+
+export default function App() {
+  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: () => {},
+            },
+          },
+        ]}
+      />
+    </View>
+  );
+}

package/index.js

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

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@hitesh0009/react-native-basic-form",
+  "version": "1.0.0",
+  "description": "A lightweight, data-driven form renderer for React Native with fully controlled inputs and flexible styling.",
+  "keywords": [
+    "\"react-native\""
+  ],
+  "homepage": "https://github.com/hiteshjangir0009/react-native-basic-form#readme",
+  "bugs": {
+    "url": "https://github.com/hiteshjangir0009/react-native-basic-form/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hiteshjangir0009/react-native-basic-form.git"
+  },
+  "license": "ISC",
+  "author": "Hitesh Jangir",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "react": "19.1.1",
+    "react-native": "0.82.0"
+  }
+}

package/src/Form.js

@@ -0,0 +1,91 @@
+import {
+  FlatList,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import React from "react";
+
+const Form = ({
+  data = [
+    {
+      lable: "",
+      inputtext: { placeholder: "", value: "", onchangetext: () => {} },
+      button: { lable: "", onPress: () => {} },
+    },
+  ],
+  gap_bwt_keyValue,
+  gap_bwt_keys,
+  lable_style,
+  inputtext_style,
+  button_container_style,
+  buttontext_style,
+  placeholderTextColor,
+  multiline_input,
+  textAlignVertical_input,
+}) => {
+  return (
+    <View>
+      <FlatList
+        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>
+            )}
+
+            {item.inputtext && (
+              <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)}
+              />
+            )}
+            {item.button && (
+              <TouchableOpacity
+                onPress={item.button.onPress}
+                style={[styles.button_container, button_container_style]}
+              >
+                <Text style={[styles.button_text, buttontext_style]}>
+                  {item.button.lable}
+                </Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        )}
+      />
+    </View>
+  );
+};
+
+export default Form;
+
+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,
+  },
+});