@teamnhz/rn-ui-toolkit

A customizable React Native UI Toolkit containing prebuilt components like Buttons, Typography (T), Input, CheckBox, RadioButton, DocumentPicker, ImagePicker, DropDown, Toast, Dividers, Accordion, Modal, VStack, and HStack.
This toolkit helps you build consistent, reusable, and modern UI components for your React Native applications. 🚀

📦 Installation

Install via npm or yarn:

# Using npm
npm install @teamnhz/rn-ui-toolkit

# Using yarn
yarn add @teamnhz/rn-ui-toolkit

🚀 Quick Usage

import React, { useState } from "react";
import { View, ScrollView, Alert, StyleSheet } from "react-native";
import {
  Buttons,
  T,
  Input,
  CheckBox,
  RadioButton,
  DocumentPicker,
  ImagePicker,
  Toast,
  DropDown,
  Dividers,
  Accordion,
  Modal,
  VStack,
  HStack,
  HorizontalFlatList,
  AppHeader,
  Image
} from "@teamnhz/rn-ui-toolkit";

export default function App() {
  const [name, setName] = useState("");
  const [accepted, setAccepted] = useState(false);
  const [selected, setSelected] = useState("option1");
  const [visible, setVisible] = useState(false);

  const close = () => setVisible(!visible);

  const categories: any = [
    { id: 1, name: "Man Shirt", image: "https://img.icons8.com/ios/100/shirt.png" },
    { id: 2, name: "Dress", image: "https://img.icons8.com/ios/100/shirt.png" },
    { id: 3, name: "Work Equipment", image: "https://img.icons8.com/ios/100/briefcase.png" },
  ];

  const dropdownData = [
    { label: "United States", value: "United States" },
    { label: "United Kingdom", value: "United Kingdom" },
    { label: "Afghanistan", value: "Afghanistan" },
  ];

  return (
    <ScrollView contentContainerStyle={{ padding: 20 }}>
      {/* Typography */}
      <T size="xl" weight="bold">Welcome to RN UI Toolkit 🚀</T>

      {/* Input */}
      <Input placeholder="Enter your name" value={name} onChangeText={setName} error="Please Enter you name/>

      {/* Checkbox */}
      <CheckBox label="Accept Terms" checked={accepted} onChange={setAccepted} />

      {/* Radio Buttons */}
      <RadioButton label="Option 1" selected={selected === "option1"} onPress={() => setSelected("option1")} />
      <RadioButton label="Option 2" selected={selected === "option2"} onPress={() => setSelected("option2")} />

      {/* Document Picker */}
      <DocumentPicker onPick={(docs) => Alert.alert("Docs", JSON.stringify(docs))} />

      {/* Image Picker */}
      <ImagePicker mediaType="photo" onPick={(img) => Alert.alert("Image", JSON.stringify(img))} />

      {/* Button */}
      <Buttons title="Submit" onPress={() => Alert.alert("Submitted", `Name: ${name}`)} />

      {/* Divider */}
      <Dividers small />

      {/* DropDown */}
      <DropDown
        value={"United States"}
        data={dropdownData}
        onChange={(item) => console.log("Selected:", item.value)}
      />

      {/* Toast */}
      <Toast visible={true} message="Welcome to the toolkit!" />

      {/* Accordion */}
      <Accordion title="Profile Info" initiallyExpanded>
        <T title="Name: John Doe" />
        <T title="Email: [email protected]" />
      </Accordion>

      <Accordion title="Settings" showIcon>
        <T title="🔔 Notifications: Enabled" />
        <T title="🌙 Dark Mode: Off" />
      </Accordion>

      {/* Modal Example */}
      <Buttons title="Open Modal" onPress={() => setVisible(true)} />
      <Modal visible={visible} onClose={close}>
        <T size="lg">This is a modal content 🎉</T>
        <Buttons title="Close" onPress={close} />
      </Modal>

      {/* VStack (Vertical Layout) */}
      <VStack spacing={12}>
        <T size="lg">This is VStack</T>
        <Buttons title="Button 1" onPress={() => {}} />
        <Buttons title="Button 2" onPress={() => {}} />
      </VStack>

      {/* HStack (Horizontal Layout) */}
      <HStack spacing={16}>
        <Buttons title="Yes" onPress={() => {}} />
        <Buttons title="No" onPress={() => {}} />
      </HStack>

      {/* Horizontal FlatList */}
      <HorizontalFlatList
        horizontal
        data={categories}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Image source={{ uri: item.image }} style={styles.image} />
            <T>{item.name}</T>
          </View>
        )}
      />

      {/* App Header */}
      <AppHeader title="Header" onLeftPress={() => Alert.alert("Back pressed")} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  image: { width: 60, height: 60, marginRight: 10 },
  item: { alignItems: "center", marginRight: 15 },
});

⚙️ Android Permissions

Required for ImagePicker and DocumentPicker:

 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32"/>
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32"/>
 <uses-permission android:name="android.permission.CAMERA"/>
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 <uses-permission android:name="android.permission.RECORD_AUDIO"/>

📚 Components Overview

• Typography (T) → Consistent text styles.
• Input → Styled text input field.
• Buttons → Primary action button.
• CheckBox → Toggle for true/false.
• RadioButton → Choose between options.
• DocumentPicker → Select and upload documents.
• ImagePicker → Select single/multiple images.
• Toast → Show quick messages.
• DropDown → Select from a list.
• Dividers → Spacing/separator lines.
• Accordion → Expandable/collapsible sections.
• Modal → Popup dialog.
• VStack / HStack → Easy vertical/horizontal layout wrappers.
• HorizontalFlatList → Prebuilt horizontal list with custom render support.
• AppHeader → Customizable header with back/extra icons.

🤝 Contribution

Feel free to open issues and submit PRs to improve this toolkit!

📄 License

MIT © 2025 [Team NHZ]