A comprehensive React Native component library with modern, customizable, and accessible components.
🌐 Complete Documentation Website - Interactive documentation with examples and API references
- 🎯 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
Before you install rn-base-component, make sure you have the following prerequisites installed:
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-handlerOr
yarn add react-native-reanimated styled-components react-native-gesture-handlerThen
npm install rn-base-componentimport 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>
)
}🔗 📚 Complete Component Documentation - Comprehensive guide to all components with examples, API references, and best practices.
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 />Enhanced text input with multiple variants, validation, and icon support.
<TextInput.Outlined label="Email" placeholder="Enter email" errorText={error} />Animated checkbox component with custom styling and label support.
<Checkbox label="Accept terms" onChange={setAccepted} />Radio button component for mutually exclusive selections.
<RadioButton text="Option 1" value={selected === 'option1'} onPressButton={() => setSelected('option1')} />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})} />Customizable button component with multiple variants and icon support.
<Button onPress={handlePress}>Primary Button</Button>
<ButtonOutline onPress={handlePress}>Outline Button</ButtonOutline>Flexible card container for content organization with optional touch interactions.
<Card onPress={navigateToDetails}>
<Text>Card content</Text>
</Card>Versatile icon component with touch interactions and customizable styling.
<Icon source={require('./icon.png')} size={24} onPress={handlePress} />Collapsible content sections with smooth animations and custom rendering.
<Accordion sections={faqSections} expandMultiple={false} />Progress indicators for loading states with determinate and indeterminate modes.
<Progress value={65} filledTrackColor="#4CAF50" />
<Progress isIndeterminateProgress />Enhanced text component with theme integration and multiple variants.
<Text color="#007AFF">Colored text</Text>
<TextBold>Bold text</TextBold>Consistent typography system with predefined variants.
<Typography variant="h1">Large Heading</Typography>
<Typography variant="regular">Body text</Typography>yarn bootstrap
yarn example ios/androidTo update Storybook after running it on the Simulator and adding new components or updating existing ones, run the following command.
yarn example update-stories🔗 Complete Components Guide - Comprehensive overview of all components
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
- Jest Configuration - Testing setup and configuration
- Theme System - Theming and customization guide
- Component Text - Text component guidelines
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>
}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()
}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
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT