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

$3

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

$3

``bash

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.

$3

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

$3

Wrap your application with the ThemeProvider component:

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

export default function App() {
return (

{/ Your application /}

);
}
`

$3

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

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

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

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

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

);
}
`

$3

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

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

const MyComponent = () => {
const theme = useTheme();

return (


Themed Component

backgroundColor: theme.surface,
borderColor: theme.border
}]}>

This card uses theme colors



);
};

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

export default MyComponent;
`

$3

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.

$3

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

`ts
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
}
``