rn-base-component

A comprehensive React Native component library with modern, customizable, and accessible components.

📖 Documentation

🌐 Complete Documentation Website - Interactive documentation with examples and API references

Features

• 🎯 Modern Components - Built with the latest React Native patterns
• 🎨 Highly Customizable - Extensive theming and styling options
• ♿ Accessible - Full accessibility support with screen readers
• 🎮 TypeScript Ready - Complete type safety and IntelliSense
• 📱 Mobile Optimized - Optimized for both iOS and Android
• 🎪 Storybook Integration - Interactive component playground

Installation

Before you install rn-base-component, make sure you have the following prerequisites installed:

• react-native-reanimated
• styled-components
• react-native-gesture-handler

You can install these dependencies using npm or yarn (note: Current, we dont support react-native-reanimated v3 and styled-components 6.*):

npm install react-native-reanimated styled-components react-native-gesture-handler

Or

yarn add react-native-reanimated styled-components react-native-gesture-handler

Then

npm install rn-base-component

Quick Start

import React from 'react'
import {BaseProvider, Button, CodeInput} from 'rn-base-component'

export default function App() {
  return (
    <BaseProvider>
      <Button onPress={() => console.log('Pressed!')}>Click Me</Button>

      <CodeInput length={6} onSubmit={code => console.log('Code:', code)} autoFocus />
    </BaseProvider>
  )
}

Components

🔗 📚 Complete Component Documentation - Comprehensive guide to all components with examples, API references, and best practices.

Input Components

CodeInput

A highly customizable and accessible code input component for OTP, PIN, and verification codes.

Features:

• 🎯 Flexible length (1-20 digits) • 🔒 Secure text entry mode • 🎨 Extensive styling options
• ♿ Full accessibility support • 🎮 Controlled/uncontrolled modes • 📱 Mobile-optimized keyboard handling

<CodeInput length={6} onSubmit={code => verifyOTP(code)} placeholderAsDot secureTextEntry autoFocus />

📖 CodeInput Documentation

TextInput

Enhanced text input with multiple variants, validation, and icon support.

<TextInput.Outlined label="Email" placeholder="Enter email" errorText={error} />

📖 TextInput Documentation

Checkbox

Animated checkbox component with custom styling and label support.

<Checkbox label="Accept terms" onChange={setAccepted} />

📖 Checkbox Documentation

RadioButton

Radio button component for mutually exclusive selections.

<RadioButton text="Option 1" value={selected === 'option1'} onPressButton={() => setSelected('option1')} />

📖 RadioButton Documentation

Slider

Interactive slider for value selection with single and range variants.

<Slider minimumValue={0} maximumValue={100} onValueChange={setValue} />
<Slider.Range initialLowValue={20} initialHighValue={80} onValueChange={(low, high) => setRange({low, high})} />

📖 Slider Documentation

UI Components

Button

Customizable button component with multiple variants and icon support.

<Button onPress={handlePress}>Primary Button</Button>
<ButtonOutline onPress={handlePress}>Outline Button</ButtonOutline>

📖 Button Documentation

Card

Flexible card container for content organization with optional touch interactions.

<Card onPress={navigateToDetails}>
  <Text>Card content</Text>
</Card>

📖 Card Documentation

Icon

Versatile icon component with touch interactions and customizable styling.

<Icon source={require('./icon.png')} size={24} onPress={handlePress} />

📖 Icon Documentation

Layout Components

Accordion

Collapsible content sections with smooth animations and custom rendering.

<Accordion sections={faqSections} expandMultiple={false} />

📖 Accordion Documentation

Feedback Components

Progress

Progress indicators for loading states with determinate and indeterminate modes.

<Progress value={65} filledTrackColor="#4CAF50" />
<Progress isIndeterminateProgress />

📖 Progress Documentation

Typography Components

Text

Enhanced text component with theme integration and multiple variants.

<Text color="#007AFF">Colored text</Text>
<TextBold>Bold text</TextBold>

📖 Text Documentation

Typography

Consistent typography system with predefined variants.

<Typography variant="h1">Large Heading</Typography>
<Typography variant="regular">Body text</Typography>

📖 Typography Documentation

Development

Preview/Debug Components

yarn bootstrap
yarn example ios/android

Update Storybook (Debug purpose only)

To update Storybook after running it on the Simulator and adding new components or updating existing ones, run the following command.

yarn example update-stories

Documentation

📚 Component Documentation

🔗 Complete Components Guide - Comprehensive overview of all components

Individual Component Documentation

Input Components:

• CodeInput - OTP/PIN code input component
• TextInput - Enhanced text input with variants
• Checkbox - Animated checkbox component
• RadioButton - Radio button for single selection
• Slider - Interactive value slider

UI Components:

• Button - Customizable button with variants
• Card - Flexible content container
• Icon - Versatile icon component

Layout Components:

• Accordion - Collapsible content sections

Feedback Components:

• Progress - Progress indicators

Typography Components:

• Text - Enhanced text component
• Typography - Typography system

🛠️ Development Guides

• Jest Configuration - Testing setup and configuration
• Theme System - Theming and customization guide
• Component Text - Text component guidelines

Theming

The library includes a comprehensive theming system:

import {BaseProvider, extendTheme} from 'rn-base-component'

const customTheme = extendTheme({
  colors: {
    primary: '#007AFF',
    secondary: '#5856D6',
  },
  spacing: {
    small: 8,
    medium: 16,
    large: 24,
  },
})

export default function App() {
  return <BaseProvider theme={customTheme}>{/* Your app components */}</BaseProvider>
}

TypeScript Support

All components are built with TypeScript and include comprehensive type definitions:

import {CodeInputRef, CodeInputProps} from 'rn-base-component'

const codeInputRef = useRef<CodeInputRef>(null)

const handleSubmit = (code: string) => {
  // Full type safety
  codeInputRef.current?.clear()
}

Accessibility

All components follow accessibility best practices:

• Screen reader support with proper labels
• Keyboard navigation where applicable
• Focus management with clear indicators
• ARIA attributes for complex components
• High contrast support

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT