Welcome to React Native Components Theme

About React Native Components Theme

React Native Components Theme is a comprehensive React Native UI component library and theme system designed to accelerate your mobile application development. With a focus on customization, performance, and exceptional developer experience. The primary goal of these components is to empower full-stack developers and rapid application developers to streamline their mobile app development process, allowing them to focus more on core features and business logic rather than UI implementation details. This library serves as your ultimate companion in building sophisticated mobile applications with remarkable speed and efficiency.

Key Features

Dynamic Theme Switching

Seamlessly switch between light and dark modes, or create your own custom themes.

Type-Safe

Complete TypeScript support with comprehensive type definitions for a safe development experience.

Highly Customizable

Easily customize every aspect of components using a flexible theme system.

React Native Optimized

Built specifically for React Native with optimal performance and perfect native experience.

Persistent Storage

Automatically saves user theme preferences for consistent experience.

Multiple Presets

Comes with various built-in theme presets that are ready to use and customizable.

Quick Installation

npm

    npm install rnc-theme

yarn

    yarn add rnc-theme

pnpm

    pnpm add install rnc-theme

bun

    bun add rnc-theme

Basic Usage

import React from 'react';
import { View } from 'react-native';
import { RNCProvider, Button, Typography } from 'rnc-theme';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

const App = () => {
  return (
    <GestureHandlerRootView>
      <RNCProvider>
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Typography variant="h1">Welcome!</Typography>
          <Button onPress={() => console.log('Button pressed!')}>
            <Typography color="white">Press Me</Typography>
          </Button>
        </View>
      </RNCProvider>
    </GestureHandlerRootView>
  );
};

export default App;

Available Components

rnc-theme provides more than 30+ UI components ready to use:

Button & FAB

Customizable buttons with various variants, sizes, and Floating Action Button.

Typography

Complete typography system with various heading, body, and caption variants.

Form Controls

Input, Checkbox, Radio, Switcher, Toggle, Slider, and integrated Form Control.

Layout & Navigation

Card, Divider, Layout components, Modal, Bottom Sheet, and Accordion.

Data Display

Table, Badge, Avatar, Progress, Rating, and Skeleton loading.

Feedback & Interaction

Toast notifications, Tooltip, Spinner, and various other interactive components.

Media & Content

Image Carousel, Calendar, Date Picker for displaying multimedia content.

Advanced Features

Combobox, Scroll components, and Internationalization (i18n) support.

Explore Documentation

Getting Started

Complete guide to start using rnc-theme in your project.

Theming Guide

Learn how to create and customize themes according to your brand.

Components

Explore all available components with complete usage examples.

Examples

See real implementation examples and best practices.