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

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

License

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

Package detail