react-native-components-lib

🧩 React Native Form Manager & Custom Buttons

This package provides:

• ✅ A reusable useFormManager hook to handle form state, input refs, validation (using Joi), and submission.
• 🎨 A flexible LinearGradientButton for visually rich buttons with gradient backgrounds.
• 🔵 A minimalist SimpleButton with customizable styles.

📦 Installation

Install required dependencies:

npm install joi

For TypeScript:

npm install --save-dev @types/joi

📁 Directory Structure

this-project/
│
├── components/
│   ├── buttons/
│   │   ├── LinearGradientButton.tsx
│   │   └── SimpleButton.tsx
│   │
│   ├── inputs/
│   │   ├── SimpleTextInput.tsx
│   │   ├── SearchTextInput.tsx
│   │   └── SimpleSecureInput.tsx
│
├── hooks/
│   └── useFormManager.ts

🔧 useFormManager Hook

✅ Features

• Handles form state and updates.
• Validates with Joi.
• Tracks and clears field-specific errors.
• Auto-focus to the next input field.
• Handles async submissions and displays server errors.

📘 Usage Example

Step 1: Define Joi Schema

import Joi from "joi";

const bankAccountSchema = Joi.object({
  bankName: Joi.string().required().label("Bank Name"),
  accountNumber: Joi.string()
    .pattern(/^\d+$/)
    .min(9)
    .max(18)
    .required()
    .label("Account Number"),
  ifscCode: Joi.string().required().label("IFSC Code"),
});

Step 2: Use the Hook

import { useFormManager } from "react-native-components-lib";
import { Alert } from "react-native";

const {
  form,
  errors,
  inputRefs,
  handleChange,
  handleSubmit,
  focusNext,
  serverError,
} = useFormManager({
  initialForm: {
    bankName: "",
    accountNumber: "",
    ifscCode: "",
  },
  schema: bankAccountSchema,
  onSubmit: async (data) => {
    try {
      console.log("Submitted Data:", data);
      // You can make an API call here
    } catch (error) {
      Alert.alert("Error", "Something went wrong during submission.");
    }
  },
});

Step 3: Bind to Inputs

<TextInput
  ref={inputRefs.bankName}
  value={form.bankName}
  placeholder="Bank Name"
  onChangeText={(text) => handleChange("bankName", text)}
  onSubmitEditing={() => focusNext("bankName")}
/>;
{
  errors.bankName && <Text style={{ color: "red" }}>{errors.bankName}</Text>;
}

🎨 LinearGradientButton

A fully customizable gradient button.

✨ Props

GradientDirection Enum Options

type GradientDirection = | "top-bottom" | "bottom-top" | "left-right" | "right-left" | "topRight-bottomLeft" | "topLeft-bottomRight"; // default

FontWeight Options type FontWeight = | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "normal" | "bold";

| Prop | Type | Default | Description | | ---------------- | ------------------- | ------------------------ | ------------------------ | | title | string | — | Button label | | onPress | function | — | Handler for button press | | colors | string[] | ["#F97794", "#623AA2"] | Gradient colors | | type | GradientDirection | "topLeft-bottomRight" | Direction of gradient | | width/height | number | — | Custom dimensions | | textColor | string | "#FFFFFF" | Text color | | textWeight | FontWeight | "600" | Font weight | | textSize | number | 16 | Font size |

📘 Usage

import { LinearGradientButton } from "react-native-components-lib";

<LinearGradientButton
  title="Submit"
  onPress={handleSubmit}
  colors={["#00c6ff", "#0072ff"]}
  width={300}
  height={50}
  textColor="#fff"
  textSize={18}
/>;

🔵 SimpleButton

A clean, solid-colored button with shadow and customization.

✨ Props

| Prop | Type | Default | Description | | -------------- | ------------ | ----------- | ---------------- | | title | string | — | Button label | | onPress | function | — | Click handler | | bgColor | string | "#007AFF" | Background color | | textColor | string | "#FFFFFF" | Text color | | textSize | number | 16 | Font size | | textWeight | FontWeight | "600" | Font weight | | borderRadius | number | 8 | Border radius |

📘 Usage

import { SimpleButton } from "react-native-components-lib";

<SimpleButton
  title="Cancel"
  onPress={() => console.log("Cancelled")}
  bgColor="#FF3B30"
  textSize={16}
  textWeight="bold"
/>;

🔐 Error Handling Example

If an error is thrown from onSubmit, it will be caught and shown via serverError.

{
  serverError && <Text style={{ color: "red" }}>{serverError}</Text>;
}

🔍 SearchTextInput

A stylized input with left/right icons, label, and error handling — great for search or filtering inputs.

Props

| Prop | Type | Default | Description | | ----------------- | --------------------------------- | ----------- | --------------------------------------- | | label | string | — | Label above the input | | value | string | — | Input value | | onChangeText | (text: string) => void | — | Callback when input changes | | placeholder | string | — | Placeholder text | | error | string | — | Error message shown below input | | labelStyle | StyleProp<TextStyle> | — | Style for the label | | errorTextStyle | StyleProp<TextStyle> | — | Style for the error message | | leftIcon | ReactNode | — | Optional left icon (e.g. search icon) | | rightIcon | ReactNode | — | Optional right icon (e.g. clear button) | | rightIconPress | () => void | — | Press handler for right icon | | leftIconActive | boolean | false | Enable left icon interactivity | | rightIconActive | boolean | false | Enable right icon interactivity | | size | "small" \| "default" \| "large" | "default" | Input size variant | | style | StyleProp<ViewStyle> | — | Wrapper style | | inputStyle | StyleProp<TextStyle> | — | Style for TextInput | | disabled | boolean | false | Disable the input | | ...TextInputProps | All native TextInput props | | |

📘 Usage

import { SearchTextInput } from "react-native-components-lib";

<SearchTextInput
  label="Search"
  value={search}
  onChangeText={setSearch}
  placeholder="Search here"
  leftIcon={<Icon name="search" size={20} />}
  rightIcon={<Icon name="close" size={20} />}
  rightIconPress={() => setSearch("")}
  error={errors.search}
/>;

🔐 SimpleSecureInput

Password-style input with show/hide toggle, optional icons, and validation error styling.

Props

| Prop | Type | Default | Description | | -------------------- | --------------------------------- | ----------- | -------------------------- | | label | string | — | Label above the input | | value | string | — | Input value | | onChangeText | (text: string) => void | — | Change handler | | placeholder | string | — | Placeholder text | | error | string | — | Error text | | showPasswordToggle | boolean | true | Enables show/hide eye icon | | rightIcon | ReactNode | — | Custom right icon | | rightIconColor | string | — | Color of right icon | | leftIcon | ReactNode | — | Optional left icon | | size | "small" \| "default" \| "large" | "default" | Input size | | disabled | boolean | false | Disables the input | | style | StyleProp<ViewStyle> | — | Container style | | inputStyle | StyleProp<TextStyle> | — | Style for TextInput | | ...TextInputProps | All native TextInput props | | |

📘 Usage

import { SimpleSecureInput } from "react-native-components-lib";

<SimpleSecureInput
  label="Password"
  value={password}
  onChangeText={setPassword}
  placeholder="Enter your password"
  error={errors.password}
/>;

✏️ SimpleTextInput

A reusable, styled input field with optional label, error text, and icon support.

✨ Props

| Prop | Type | Default | Description | | ----------------- | --------------------------------- | ----------- | ------------------------- | | label | string | — | Label above the input | | value | string | — | Input value | | onChangeText | (text: string) => void | — | Handler for text changes | | placeholder | string | — | Placeholder text | | error | string | — | Optional error message | | leftIcon | ReactNode | — | Icon on the left | | size | "small" \| "default" \| "large" | "default" | Input size variant | | disabled | boolean | false | Disable the input | | style | StyleProp<ViewStyle> | — | Container styling | | inputStyle | StyleProp<TextStyle> | — | Input-specific style | | labelStyle | StyleProp<TextStyle> | — | Optional label style | | errorTextStyle | StyleProp<TextStyle> | — | Optional error text style | | ...TextInputProps | All native TextInput props | | |

📘 Usage

import { SimpleTextInput } from "react-native-components-lib";
<SimpleTextInput
  label="Full Name"
  value={fullName}
  onChangeText={setFullName}
  placeholder="John Doe"
  error={errors.fullName}
/>;

💡 Tips

• Pair useFormManager with custom input components for better reusability.
• Use focusNext to automatically shift to the next input on submit.
• Customize LinearGradientButton for CTA buttons and SimpleButton for secondary actions.

🧪 Testing

For testing forms using this hook, mock onSubmit and trigger handleSubmit() in your test cases. You can also simulate input changes using handleChange().

📄 License

MIT © 2025 react-native-components-lib