onebi-rn-ui

A pure React Native component library with zero external dependencies. Built entirely with core react-native APIs and TypeScript.

Installation

Method 1: Component CLI (Recommended)

This method allows you to own and customize the code by adding components individually to your project.

# Initialize your project
npx onebi-rn-ui@latest init -t

# Add specific components
npx onebi-rn-ui@latest add button
npx onebi-rn-ui@latest add card

Method 2: NPM Package

Install the entire library as a traditional dependency.

npm install onebi-rn-ui
# or
yarn add onebi-rn-ui

Core React Native Exports

To simplify your development, we re-export essential React Native components and types. This allows you to import almost everything from a single package.

import { 
  View, 
  Pressable, 
  TouchableOpacity, 
  Animated, 
  Easing, 
  StyleSheet, 
  SafeAreaView,
  Text // Our custom Text replaces the standard RN one
} from 'onebi-rn-ui';

Included Types: ViewStyle, TextStyle, ImageStyle, StyleProp, ColorValue, LayoutChangeEvent.

Peer Dependencies

Make sure you have react and react-native installed in your project:

{
  "react": ">=17.0.0",
  "react-native": ">=0.65.0"
}

Quick Start

Wrap your app with ThemeProvider (optional — components use a sensible default theme):

import { ThemeProvider } from 'onebi-rn-ui';

export default function App() {
  return (
    <ThemeProvider>
      {/* Your app */}
    </ThemeProvider>
  );
}

Custom Theme

import { ThemeProvider } from 'onebi-rn-ui';

const customTheme = {
  colors: {
    primary: '#FF6B35',
    secondary: '#004E64',
  },
};

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

Components

Button

import { Button } from 'onebi-rn-ui';

// Basic
<Button title="Primary" onPress={() => {}} />

// With Custom Styles
<Button 
  title="Bold Action" 
  style={{ borderRadius: 20, paddingHorizontal: 40 }}
  textStyle={{ fontSize: 18, fontWeight: 'bold' }}
/>

Props: title, variant, size, loading, disabled, onPress, leftIcon, rightIcon, fullWidth, style, textStyle

Text

import { Text } from 'onebi-rn-ui';

<Text variant="h1">Heading</Text>
<Text variant="body" color="#666" style={{ marginTop: 10 }}>Body with Margin</Text>
<Text variant="caption" weight="bold" style={{ opacity: 0.8 }}>Low Opacity Caption</Text>

Props: variant, weight, color, align, numberOfLines, style

TextInput

import { TextInput } from 'onebi-rn-ui';

<TextInput label="Email" placeholder="Enter email" variant="outlined" />

// Customized Example
<TextInput 
  label="Custom Password" 
  type="password"
  containerStyle={{ marginVertical: 15 }}
  inputStyle={{ color: '#2c3e50', fontSize: 18 }}
  labelStyle={{ color: '#3498db' }}
/>

Props: label, type, otpLength, error, helperText, variant, activeBorderColor, disabled, leftIcon, rightIcon, containerStyle, inputStyle, labelStyle, otpBoxStyle, errorStyle, helperStyle

Modal

import { Modal, Button } from 'onebi-rn-ui';

<Modal 
  visible={isOpen} 
  onDismiss={() => setOpen(false)} 
  title="Details"
  headerStyle={{ backgroundColor: '#f5f5f5' }}
  contentStyle={{ minHeight: 150 }}
>
  <Text>Modal content here</Text>
</Modal>

Props: visible, onDismiss, title, children, footer, dismissible, style, contentStyle, headerStyle, footerStyle

Card

import { Card } from 'onebi-rn-ui';

<Card variant="elevated">
  <Text>Card content</Text>
</Card>

Props: variant (elevated/outlined/filled), padding, borderRadius, onPress, style

Avatar

import { Avatar } from 'onebi-rn-ui';

<Avatar name="John Doe" size="lg" status="online" />

// With Custom Styles
<Avatar 
  source={{ uri: 'https://...' }} 
  imageStyle={{ borderWidth: 2, borderColor: '#fff' }}
  style={{ elevation: 5 }}
/>

Props: source, name, size, status, backgroundColor, textColor, style, imageStyle, textStyle, onPress

Badge

import { Badge } from 'onebi-rn-ui';

<Badge count={5} status="error">
  <Avatar name="User" />
</Badge>

// Dot with custom style
<Badge 
  variant="dot" 
  status="success" 
  style={{ top: -2, right: -2 }}
/>

Props: count, maxCount, variant, status, textColor, color, visible, children, style, textStyle

Checkbox

import { Checkbox } from 'onebi-rn-ui';

<Checkbox checked={true} onValueChange={() => {}} label="Default" />

// Filled Custom Checkbox
<Checkbox 
  checked={true} 
  onValueChange={() => {}} 
  color="#27ae60"
  boxStyle={{ borderRadius: 4, transform: [{ scale: 1.2 }] }}
  labelStyle={{ fontWeight: '700' }}
/>

Props: checked, onValueChange, label, disabled, color, size, style, boxStyle, labelStyle, checkStyle, checkColor

RadioButton

import { RadioButton } from 'onebi-rn-ui';

<RadioButton selected={true} onSelect={() => {}} label="Option A" />

// Styled Radio
<RadioButton 
  selected={true} 
  onSelect={() => {}} 
  color="#8e44ad"
  outerStyle={{ borderWidth: 3 }}
  innerStyle={{ width: 14, height: 14 }}
/>

Props: selected, onSelect, label, disabled, color, size, style, outerStyle, innerStyle, labelStyle, dotColor

Divider

import { Divider } from 'onebi-rn-ui';

<Divider />
<Divider orientation="vertical" thickness={2} />

Props: orientation (horizontal/vertical), thickness, color, inset, style

Spacer

import { Spacer } from 'onebi-rn-ui';

<Spacer size={16} />
<Spacer flex={1} />

Props: size, flex, style

Chip

import { Chip } from 'onebi-rn-ui';

<Chip label="React Native" selected onPress={() => {}} />
<Chip label="Removable" onClose={() => {}} variant="outlined" />

Props: label, variant (filled/outlined), selected, disabled, onPress, onClose, icon

Switch

import { Switch } from 'onebi-rn-ui';

<Switch value={true} onValueChange={() => {}} />

// Custom Sized and Styled
<Switch 
  value={true} 
  size="lg" 
  activeTrackColor="#e67e22" 
  trackStyle={{ height: 40, width: 70 }}
  thumbStyle={{ backgroundColor: '#f39c12' }}
/>

Props: value, onValueChange, size, disabled, activeTrackColor, inactiveTrackColor, thumbColor, style, trackStyle, thumbStyle

List & ListItem

import { List, ListItem } from 'onebi-rn-ui';

<List style={{ backgroundColor: '#f9f9f9' }}>
  <ListItem 
    title="Profile" 
    subtitle="Account settings" 
    left={<Avatar name="JD" />}
    leftStyle={{ paddingRight: 15 }}
    titleStyle={{ fontWeight: 'bold' }}
  />
</List>

ListItem Props: title, subtitle, left, right, onPress, onLongPress, divider, disabled, style, titleStyle, subtitleStyle, leftStyle, rightStyle

Section

import { Section } from 'onebi-rn-ui';

<Section 
  title="Display" 
  subtitle="Manage screen settings"
  titleStyle={{ color: 'blue' }}
  contentStyle={{ padding: 10 }}
>
  {/* Content */}
</Section>

Props: title, subtitle, headerRight, children, style, titleStyle, subtitleStyle, contentStyle

SkeletonLoader

import { SkeletonLoader } from 'onebi-rn-ui';

<SkeletonLoader variant="text" count={3} />

// Circle with border
<SkeletonLoader 
  variant="circular" 
  height={60} 
  style={{ borderWidth: 1, borderColor: '#eee' }} 
/>

Props: variant, width, height, borderRadius, speed, backgroundColor, highlightColor, count, spacing, style

SplashScreen

import { SplashScreen } from 'onebi-rn-ui';

// Enterprise Example
<SplashScreen
  logoSource={require('./logo.png')}
  title="Enterprise App"
  subtitle="V3.0 Released"
  loaderType="bar"
  progressValue={80}
  style={{ padding: 40 }}
  titleStyle={{ fontSize: 32, letterSpacing: 2 }}
/>

Props: logoSource, logoSize, logoStyle, title, subtitle, titleStyle, subtitleStyle, versionText, versionStyle, footerText, footerStyle, loaderType, loaderColor, loaderSize, progressValue, logoPosition, textPosition, loaderPosition, backgroundColor, backgroundGradient, backgroundImage, backgroundOverlayOpacity, fadeIn, fadeInDuration, duration, onFinish, containerStyle, style, children

Theme Structure

interface Theme {
  colors: ThemeColors;      // primary, secondary, error, text, etc.
  spacing: ThemeSpacing;     // xs(4), sm(8), md(12), lg(16), xl(24), xxl(32)
  borderRadius: ThemeBorderRadius;
  typography: ThemeTypography;
  shadows: ThemeShadows;     // none, sm, md, lg
}

Use useTheme() hook in your own components:

import { useTheme } from 'onebi-rn-ui';

const MyComponent = () => {
  const theme = useTheme();
  return <View style={{ padding: theme.spacing.lg }} />;
};

License

MIT