Related RN Component Library

Introduction

Internal React Native component library designed to streamline development across all company mobile applications. This library implements our design system with ready-to-use, customizable components that maintain consistency while accelerating development.

Table of Contents

• Installation
• Components
• Theming

Installation

Prerequisites

• React Native ≥ 0.66.0
• React ≥ 17.0.2
• Node.js ≥ 14.0.0

Setup

# Using yarn
yarn add @related/ui-components

# Using npm
npm install @related/ui-components

Components

Our component library includes a comprehensive set of pre-built UI components designed for React Native applications. Each component is fully documented with examples, props, and customization options.

| Component | Description | |-----------|-------------| | Badges | Reward badges | | Banner | Advertisement banner with multiple themes | | BrandIcon | Display brand-specific icons with consistent styling. | | Card | Container component for grouping related content with multiple themes. | | CloseIcon | Standard close button for modals, popups, and other dismissible elements. | | Filters | Interactive filtering components for data lists and collections. | | Input | Text input components with validation and styling options. | | LockOverlay | Overlay component to indicate locked content or functionality. | | Popup | Modal dialog components for alerts, confirmations, and user interactions. | | ProgressBar | Visual indicators for progress tracking. | | RedemptionOption | Components for displaying and selecting redemption options. | | ScratchCard | Interactive scratch card component for revealing hidden content. | | UnlockRewards | Components for displaying and interacting with reward unlocking functionality. | | Wheel | Spin the wheel component |

Theming

Our component library supports a flexible theming system through the ThemeProvider. The system automatically detects and applies the user's system color preference (light or dark mode) while allowing for custom theme overrides.

Theme Structure

Themes are defined using the ThemeType interface which includes colors for:

• Core UI elements (background, surface, primary, secondary, etc.)
• Text and icons
• Borders and dividers
• UI states
• Form-specific elements

Using the Theme Provider

Wrap your application with the ThemeProvider component:

import { ThemeProvider } from '@related/ui-components';

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

Customizing Themes

You can customize the light and dark themes by providing customLightTheme and/or customDarkTheme props:

import { ThemeProvider, ThemeType } from '@related/ui-components';

// Create custom theme overrides
const customLightTheme: Partial<ThemeType> = {
  primary: '#0066CC',
  secondary: '#FF6B00',
  // Override any other properties as needed
};

const customDarkTheme: Partial<ThemeType> = {
  primary: '#4D94FF',
  secondary: '#FF9E4D',
  // Override any other properties as needed
};

export default function App() {
  return (
    <ThemeProvider 
      customLightTheme={customLightTheme}
      customDarkTheme={customDarkTheme}
    >
      {/* Your application */}
    </ThemeProvider>
  );
}

Accessing Theme in Components

Use the useTheme hook to access the current theme within your components:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useTheme } from '@related/ui-components';

const MyComponent = () => {
  const theme = useTheme();
  
  return (
    <View style={[styles.container, { backgroundColor: theme.background }]}>
      <Text style={{ color: theme.text }}>
        Themed Component
      </Text>
      <View style={[styles.card, { 
        backgroundColor: theme.surface,
        borderColor: theme.border 
      }]}>
        <Text style={{ color: theme.text }}>
          This card uses theme colors
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  card: {
    borderWidth: 1,
    borderRadius: 8,
    padding: 16,
    marginTop: 8,
  },
});

export default MyComponent;

System Theme Detection

The ThemeProvider automatically detects the user's system color scheme preference using React Native's useColorScheme hook and applies the appropriate theme. No additional configuration is required for this behavior.

Available Theme Properties

The full list of available theme properties can be found in the ThemeType interface:

interface ThemeType {
  // Core
  background: string;    // Main screen background
  surface: string;       // Background for components like cards, dialogs, sheets
  primary: string;       // Main accent color for interactive elements
  secondary: string;     // Secondary accent color
  error: string;         // Error states, destructive actions
  success: string;       // Success states
  warning: string;       // Warning states
  info: string;          // Informational states

  // Text & Icons
  text: string;          // Default text color
  onPrimary: string;     // Text/icon color on primary background
  onSecondary: string;   // Text/icon color on secondary background
  onError: string;       // Text/icon color on error background
  onBackground: string;  // Text/icon color explicitly for background
  onSurface: string;     // Text/icon color explicitly for surface

  // Borders & Dividers
  border: string;        // Borders for inputs, cards, etc.
  divider: string;       // Separators, lines

  // UI States
  disabled: string;      // Disabled state elements

  // Form Specific
  inputBackground: string;    // Background of text inputs
  inputText: string;          // Color of text entered into inputs
  labelText: string;          // Color of labels for inputs
  placeholderText: string;    // Color of placeholder text in inputs
  helper: string;             // Helper text below inputs
}