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 developmen
npm install related-ui-componentsbash
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
}
``