@aimit/native-ui

UI component library for React Native by AimIT Company.

Installation

npm install @aimit/native-ui
# or
yarn add @aimit/native-ui

Optional Dependencies

If you want to use theme persistence (saving user's theme choice), you'll need to install @react-native-async-storage/async-storage:

npm install @react-native-async-storage/async-storage
# or
yarn add @react-native-async-storage/async-storage

Usage

Basic Usage (Default Theme)

import React from 'react';
import { View } from 'react-native';
import { Button } from '@aimit/native-ui';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
      <Button
        title="Hello World"
        onPress={() => console.log('Button pressed!')}
        variant="primary"
        size="medium"
      />
    </View>
  );
};

export default App;

Using Theme Provider (Light/Dark Theme)

import React from 'react';
import { View } from 'react-native';
import { Button, ThemeProvider, useTheme, theme, darkTheme } from '@aimit/native-ui';

const AppContent = () => {
  const { theme: currentTheme, toggleTheme, isDark, setTheme } = useTheme();
  
  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 20, backgroundColor: currentTheme.colors.background }}>
      <Button
        title={isDark ? "Switch to Light" : "Switch to Dark"}
        onPress={toggleTheme}
        variant="primary"
        size="medium"
      />
      <Button
        title="Set Light Theme"
        onPress={() => setTheme('light')}
        variant="outline"
        size="medium"
        style={{ marginTop: 8 }}
      />
      <Button
        title="Set Dark Theme"
        onPress={() => setTheme('dark')}
        variant="outline"
        size="medium"
        style={{ marginTop: 8 }}
      />
      <Button
        title="Hello World"
        onPress={() => console.log('Button pressed!')}
        variant="secondary"
        size="large"
        style={{ marginTop: 16 }}
      />
    </View>
  );
};

// With built-in themes
const App = () => {
  return (
    <ThemeProvider lightTheme={theme} darkTheme={darkTheme}>
      <AppContent />
    </ThemeProvider>
  );
};

// With dark theme as default
const AppDark = () => {
  return (
    <ThemeProvider 
      lightTheme={theme} 
      darkTheme={darkTheme}
      currentTheme="dark"
    >
      <AppContent />
    </ThemeProvider>
  );
};

export default App;

Custom Theme

import React from 'react';
import { View } from 'react-native';
import { Button, ThemeProvider, createTheme, useTheme } from '@aimit/native-ui';

// Create custom themes with style overrides
const customLightTheme = createTheme({
  colors: {
    primary: '#FF6B6B',  // Only primary color
    // other colors remain default
  },
  components: {
    Button: {
      styleOverrides: {
        root: {
          borderRadius: 12,  // Override border radius
        },
        primary: {
          backgroundColor: '#FF6B6B',  // Override primary color
        },
        small: {
          padding: 8,  // Styles for small size
        },
        disabled: {
          opacity: 0.3,  // Styles for disabled state
        }
      }
    }
  }
});

const customDarkTheme = createTheme({
  colors: {
    primary: '#FF9999',  // Different primary for dark theme
    background: '#1a1a1a',  // Dark background
    // other colors remain default
  },
  components: {
    Button: {
      styleOverrides: {
        root: {
          borderRadius: 12,
        },
        primary: {
          backgroundColor: '#FF9999',
        }
      }
    }
  }
});

const AppContent = () => {
  const { theme, setTheme } = useTheme();
  
  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
      <Button
        title="Custom Theme Button"
        onPress={() => console.log('Button pressed!')}
        variant="primary"
        size="medium"
      />
      <Button
        title="Switch to Light"
        onPress={() => setTheme('light')}
        variant="outline"
        size="medium"
        style={{ marginTop: 8 }}
      />
      <Button
        title="Switch to Dark"
        onPress={() => setTheme('dark')}
        variant="outline"
        size="medium"
        style={{ marginTop: 8 }}
      />
    </View>
  );
};

// With custom themes (only needed parts)
const App = () => {
  return (
    <ThemeProvider 
      lightTheme={customLightTheme} 
      darkTheme={customDarkTheme}
    >
      <AppContent />
    </ThemeProvider>
  );
};

// Example with your case - only colors
const myTheme = {
  colors: {
    primary: '#ff0000',
    primaryDark: '#2027AB',
    primaryLight: '#4DA6FF',
    secondary: '#6C757D',
    secondaryDark: '#495057',
    secondaryLight: '#ADB5BD',
    white: '#FFFFFF',
    black: '#000000',
  },
} as const;

const AppWithMyTheme = () => {
  return (
    <ThemeProvider 
      lightTheme={myTheme} 
      darkTheme={myTheme}  // Can use one theme for both
      currentTheme="light"
    >
      <AppContent />
    </ThemeProvider>
  );
};

// With custom themes + dark mode as default
const AppDark = () => {
  return (
    <ThemeProvider 
      lightTheme={customLightTheme} 
      darkTheme={customDarkTheme}
      currentTheme="dark"
    >
      <AppContent />
    </ThemeProvider>
  );
};

export default App;

Style Overrides (Material-UI style)

import React from 'react';
import { View } from 'react-native';
import { Button, ThemeProvider, createTheme } from '@aimit/native-ui';

// Create theme with style overrides
const theme = createTheme({
  components: {
    Button: {
      styleOverrides: {
        // Base styles for all buttons
        root: {
          borderRadius: 12,
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 2 },
          shadowOpacity: 0.1,
          shadowRadius: 4,
          elevation: 3,
        },
        // Styles for variants
        primary: {
          backgroundColor: '#FF6B6B',
          borderColor: '#FF6B6B',
        },
        secondary: {
          backgroundColor: '#4ECDC4',
          borderColor: '#4ECDC4',
        },
        outline: {
          backgroundColor: 'transparent',
          borderWidth: 2,
        },
        // Styles for sizes
        small: {
          paddingHorizontal: 12,
          paddingVertical: 6,
          minHeight: 28,
        },
        large: {
          paddingHorizontal: 24,
          paddingVertical: 12,
          minHeight: 52,
        },
        // Styles for states
        disabled: {
          opacity: 0.4,
        },
        // Sizes and states apply to all variants
        small: {
          padding: 6,
        },
        large: {
          padding: 16,
        },
        disabled: {
          backgroundColor: '#CCCCCC',
          borderColor: '#CCCCCC',
        }
      }
    }
  }
});

const App = () => {
  return (
    <ThemeProvider lightTheme={theme} darkTheme={theme}>
      <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
        <Button title="Primary Small" variant="primary" size="small" onPress={() => {}} />
        <Button title="Primary Large" variant="primary" size="large" onPress={() => {}} />
        <Button title="Secondary Disabled" variant="secondary" disabled onPress={() => {}} />
        <Button title="Outline Small" variant="outline" size="small" onPress={() => {}} />
      </View>
    </ThemeProvider>
  );
};

export default App;

Utilities

The library provides utility functions for common tasks:

Color Utilities

import { withOpacity, adjustBrightness, createColorScale, rgbToHex } from '@aimit/native-ui';

// Create colors with transparency
const transparentBlue = withOpacity('#007AFF', 0.5); // 'rgba(0, 122, 255, 0.5)'

// Adjust brightness
const lighterBlue = adjustBrightness('#007AFF', 50); // Lighter blue
const darkerBlue = adjustBrightness('#007AFF', -50); // Darker blue

// Generate color scale variations
const blueScale = createColorScale('#007AFF', 5); // Array of 5 blue variations

// Convert RGB to HEX
const hexColor = rgbToHex(0, 122, 255); // '#007AFF'

Date Utilities

import { 
  formatDate, 
  timestampToDate, 
  dateToTimestamp, 
  timestampToDateString,
  dateStringToTimestamp,
  addDays, 
  addMonths, 
  addYears,
  getDaysDifference,
  getMonthsDifference,
  getYearsDifference
} from '@aimit/native-ui';

// Format dates with multiple locales
formatDate(new Date('2023-12-25'), 'DD.MM.YYYY'); // '25.12.2023'
formatDate(new Date('2023-12-25'), 'MMMM DD, YYYY', 'en'); // 'December 25, 2023'
formatDate(new Date('2023-12-25'), 'DD MMMM YYYY', 'ru'); // '25 декабря 2023'

// Convert between timestamps and dates
const timestamp = dateToTimestamp(new Date('2023-12-25')); // 1703520000000
const date = timestampToDate(1703520000000); // Date object
const dateString = timestampToDateString(1703520000000, 'DD.MM.YYYY'); // '25.12.2023'

// Date calculations
const futureDate = addDays(new Date('2023-12-25'), 5); // 2023-12-30
const pastMonth = addMonths(new Date('2023-12-25'), -1); // 2023-11-25
const nextYear = addYears(new Date('2023-12-25'), 1); // 2024-12-25

// Date differences
const daysDiff = getDaysDifference(new Date('2023-12-25'), new Date('2023-12-20')); // 5
const monthsDiff = getMonthsDifference(new Date('2023-12-25'), new Date('2023-10-25')); // 2
const yearsDiff = getYearsDifference(new Date('2023-12-25'), new Date('2020-12-25')); // 3

Supported Date Formats:

• YYYY, YY: Year (2023, 23)
• MM, MMM, MMMM: Month (12, Dec, December)
• DD, D: Day (25, 5)
• HH, H, hh, h: Hours (14, 14, 02, 2)
• mm, m: Minutes (30, 30)
• ss, s: Seconds (45, 45)
• A, a: AM/PM (PM, pm)

Supported Locales:

• en: English (January, February...)
• ru: Russian (Январь, Февраль...)
• hy: Armenian (Հունվար, Փետրվար...)

Components

Button

A customizable button component with multiple variants and sizes.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | string | - | Text to display inside the button | | onPress | () => void | - | Function to call when button is pressed | | variant | 'primary' \| 'secondary' \| 'outline' | 'primary' | Visual style variant | | size | 'small' \| 'medium' \| 'large' | 'medium' | Size of the button | | disabled | boolean | false | Whether the button is disabled | | fullWidth | boolean | false | Whether the button should take full width |

Examples

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

// Secondary button
<Button title="Secondary" onPress={() => {}} variant="secondary" />

// Outline button
<Button title="Outline" onPress={() => {}} variant="outline" />

// Large button
<Button title="Large" onPress={() => {}} size="large" />

// Disabled button
<Button title="Disabled" onPress={() => {}} disabled />

// Full width button
<Button title="Full Width" onPress={() => {}} fullWidth />

Theme System

The library includes a powerful theme system with three usage modes:

1. Default Theme (No Setup Required)

import { Button } from '@aimit/native-ui';
// Uses default light theme automatically
<Button title="Default Theme" onPress={() => {}} />

2. Light/Dark Theme Toggle

import { ThemeProvider, useTheme } from '@aimit/native-ui';

const App = () => {
  const { theme, toggleTheme, isDark } = useTheme();
  
  return (
    <ThemeProvider>
      <Button 
        title={isDark ? "Dark Mode" : "Light Mode"} 
        onPress={toggleTheme} 
      />
    </ThemeProvider>
  );
};

3. Custom Theme

import { createTheme, ThemeProvider } from '@aimit/native-ui';

const customTheme = createTheme({
  colors: {
    primary: '#FF6B6B',
    secondary: '#4ECDC4',
  },
  spacing: {
    md: 20,
  }
});

<ThemeProvider initialTheme={customTheme}>
  <App />
</ThemeProvider>

Accessing Theme Values

import { useTheme } from '@aimit/native-ui';

const MyComponent = () => {
  const { theme } = useTheme();
  
  return (
    <View style={{ 
      backgroundColor: theme.colors.background,
      padding: theme.spacing.md,
    }}>
      <Text style={{ 
        color: theme.colors.text,
        fontSize: theme.typography.fontSize.md 
      }}>
        Themed Text
      </Text>
    </View>
  );
};

Development

# Install dependencies
npm install

# Build the library
npm run build

# Watch for changes during development
npm run dev

# Type check
npm run type-check

License

MIT