Geeky Hawks React Native UI Components

Build consistent, theme-aware React Native apps faster.

A lightweight and reusable React Native UI components library — providing not just components, but also a full theming system (colors, spacing, typography) for building consistent designs in your React Native apps.

Includes StatusBar, AppBar, Text, TextInput, FloatingLabelTextInput, Button, Radio, CheckBox, Switch, ActivityIndicator, LoaderModal, and more — fully typed with TypeScript, theme-ready, and easy to integrate into any React Native project.

✨ Developed & Maintained by Geeky Hawks.

Features

• 🎨 Theming system out of the box
  Define global colors, spacing, and typography to ensure consistent design across your app.

  • Full light/dark mode support.
  • Customize and extend themes for your brand.

• 🧩 Pre-styled, customizable components
  Includes:

  • StatusBar, AppBar
  • Text, TextInput, FloatingLabelTextInput, Button
  • Radio, CheckBox, Switch
  • ActivityIndicator, LoaderModal
    (with more components coming soon).

• 📱 Consistent cross-platform UI
  Components work seamlessly on both iOS and Android with a unified design language.

• 🔒 TypeScript-first
  Strongly typed for safer and faster development.

• ⚡ Lightweight & easy to integrate
  Add to new or existing React Native projects with minimal setup.

🚀 Get Started

1. Install

# npm
npm install @geekyhawks/react-native-ui-components

# yarn
yarn add @geekyhawks/react-native-ui-components

2. Wrap your app with ThemeProvider

import React from "react";
import { ThemeProvider } from "@geekyhawks/react-native-ui-components";

export default function App() {
  return (
    <ThemeProvider>
      {/* Your App Components (HomeScreen, AppNavigator, NavigationContainer, etc.) */}
      <HomeScreen />
    </ThemeProvider>
  );
}

⚠️ Important: The ThemeProvider should wrap your entire app (usually in App.tsx), so that all components can access the theme consistently.

3. Use a component

import { useState } from "react";
import { ActivityIndicator, AppBar, Button, CheckBox, FloatingLabelTextInput, Radio, RadioGroup, StatusBar, Switch, Text, TextInput } from "@geekyhawks/react-native-ui-components";

export default function HomeScreen() {
  const [selectedValue, setSelectedValue] = useState<string | number>("apple");
  const [checked, setChecked] = useState(false);
  const [allowed, setAllowed] = useState(false);

  return (
    <>
      <StatusBar />

      <AppBar title="Home" />

      <Text>Hello, World! 👋</Text>

      <Text variant="h1">Heading Text</Text>

      <TextInput
        label="Name"
        placeholder="John Doe"
        onChangeText={(text) => {
          // Do something with text
        }}
      />

      <FloatingLabelTextInput
        label="Email Address"
        keyboardType="email-address"
        autoCapitalize="none"
        onChangeText={(text) => {
          // Do something with text
        }}
      />

      <RadioGroup selectedValue={selectedValue} onValueChange={setSelectedValue}>
        <Radio value="apple" label="Apple" />
        <Radio value="banana" label="Banana" />
        <Radio value="orange" label="Orange" />
      </RadioGroup>

      <CheckBox
        value="terms"
        label="I agree to the Terms & Conditions"
        selectedValues={checked ? ["terms"] : []}
        onChange={(_, isChecked) => setChecked(isChecked)}
      />

      <Switch
        value={allowed}
        onValueChange={setAllowed}
        label="Enable notifications"
      />

      <ActivityIndicator
        text="Please wait..."
        textPosition="right"
        textColor={"primary"}
        variant="large" />

      <Button onPress={() => console.log("Pressed!")}>
        Default Button
      </Button>
    </>
  );
}

Demo

Theme & Components

This library provides a growing set of theme-ready UI components:

• Theme – Global theming system (colors, typography, spacing, light/dark).
• StatusBar – Theme-aware wrapper for the native status bar with predefined variants.
• AppBar – Customizable, theme-ready top app bar with left, and right icons.
• Text – Customizable wrapper around React Native's Text.
• TextInput – Styled input field with theme integration.
• FloatingLabelTextInput – TextInput with floating label.
• Button – Enhanced button with default styles, theme support and much more.
• Radio – Themed radio button for single-choice selection, with group support and variant styling.
• CheckBox – Themed checkbox for multi-choice selection, supporting groups and custom variants.
• Switch – Themed toggle control with color variants and optional labeling.
• ActivityIndicator – Flexible loading spinner with text, size, and position options.
• LoaderModal – Full-screen modal loader with spinner, text, and theme variants.
  (more coming soon)

🖌️ All components support style overrides, theming, and common React Native props. Customize fonts, colors, and variants globally using the ThemeProvider.

📘 Documentation

Comprehensive documentation for each component lives in the docs folder.

Each doc file includes:

• 📖 Prop reference – all available props with types.
• ⚡ Usage examples – from basic to advanced.
• 🎨 Customization guides – how to style with themes, spacing, and typography.
• 🌗 Theming examples – light/dark mode and custom themes in action.

👉 Dive into the docs to learn each component’s features and how to adapt them to your app with ease.

📱 Example App

A fully working example app is included in the repo to help you explore the components in action.

• Browse and test components with real usage
• See theming and customization applied live
• Use it as a reference for integrating into your project

👉 Try the example app to see components in action and quickly understand how they fit into a real-world React Native setup.

Contributing

1. Fork the repository
2. Create a new branch for your feature or fix
3. Commit your changes with clear messages
4. Push to your branch and create a Pull Request

License

This project is licensed under the MIT License. See the LICENSE file for details.