RN Components NPM

A collection of reusable React Native components and utilities built with TypeScript, designed to be easily integrated into any React Native project.

Features

• 🎨 Modern Design: Clean, consistent UI components following modern design principles
• 📱 React Native Optimized: Built specifically for React Native with performance in mind
• 🔧 TypeScript Support: Full TypeScript support with comprehensive type definitions
• 🎯 Highly Customizable: Extensive customization options for all components
• 🧪 Well Tested: Comprehensive test coverage for all components and utilities
• 📦 Tree Shakeable: Optimized for tree shaking to reduce bundle size
• 🚀 Ready for Production: Production-ready components with proper error handling

Installation

npm install rn-components-npm
# or
yarn add rn-components-npm

Quick Start

import React, { useRef } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { AlertView, AlertViewRef } from 'rn-components-npm';

const App = () => {
  const alertRef = useRef<AlertViewRef>(null);

  const showAlert = () => {
    alertRef.current?.setValues(
      'success',
      'Success!',
      'Your action was completed successfully.',
      [
        { title: 'Cancel', onPress: () => console.log('Cancelled') },
        { title: 'OK', onPress: () => console.log('Confirmed') }
      ]
    );
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity onPress={showAlert}>
        <Text>Show Alert</Text>
      </TouchableOpacity>
      
      <AlertView ref={alertRef} />
    </View>
  );
};

Components

AlertView

A highly customizable alert/modal component with multiple themes, animations, and styling options.

Basic Usage

import React, { useRef } from 'react';
import { AlertView, AlertViewRef } from 'rn-components-npm';

const MyComponent = () => {
  const alertRef = useRef<AlertViewRef>(null);

  const showSuccessAlert = () => {
    alertRef.current?.setValues(
      'success',
      'Success!',
      'Operation completed successfully.'
    );
  };

  const showErrorAlert = () => {
    alertRef.current?.setValues(
      'alert',
      'Error!',
      'Something went wrong. Please try again.',
      [
        { title: 'Cancel' },
        { title: 'Retry', onPress: () => console.log('Retrying...') }
      ]
    );
  };

  return (
    <>
      <AlertView ref={alertRef} />
      {/* Your other components */}
    </>
  );
};

Advanced Customization

import React, { useRef } from 'react';
import { AlertView, AlertViewRef, ThemeType } from 'rn-components-npm';

const MyComponent = () => {
  const alertRef = useRef<AlertViewRef>(null);

  // Custom theme
  const customThemes: Record<string, ThemeType> = {
    warning: {
      icon: {
        backgroundColor: '#FF9500',
        icon: 'warning',
        color: '#FFFFFF',
      },
      titleColor: '#FF9500',
      descriptionColor: '#666666',
      backgroundColor: '#FFFFFF',
      borderColor: '#FFE0B2',
    },
  };

  const showCustomAlert = () => {
    alertRef.current?.setValues(
      'warning',
      'Warning',
      'This is a custom themed alert.',
      [
        {
          title: 'Custom Button',
          buttonStyle: {
            backgroundColor: '#FF9500',
            textStyle: {
              color: '#FFFFFF',
              fontSize: 16,
              fontWeight: '600',
            },
          },
          onPress: () => console.log('Custom button pressed'),
        },
      ]
    );
  };

  return (
    <AlertView
      ref={alertRef}
      customThemes={customThemes}
      width={350}
      borderRadius={20}
      animationType="slide"
      overlayColor="rgba(0, 0, 0, 0.7)"
      shadowColor="#000000"
      shadowOpacity={0.3}
      shadowRadius={10}
      elevation={8}
      iconSize={40}
      closeOnBackdropPress={true}
    />
  );
};

AlertView Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | titleStyle | TextStyleType | - | Custom title text styling | | descriptionStyle | TextStyleType | - | Custom description text styling | | defaultButtonStyle | ButtonStyleType | - | Default button styling | | width | number \| string | 320 | Alert container width | | maxWidth | number \| string | 320 | Maximum alert container width | | height | number \| string | - | Alert container height | | padding | number | 24 | Internal padding | | borderRadius | number | 12 | Corner radius | | animationType | 'none' \| 'slide' \| 'fade' | 'fade' | Modal animation type | | transparent | boolean | true | Modal transparency | | overlayColor | string | 'rgba(0, 0, 0, 0.5)' | Background overlay color | | overlayOpacity | number | 1 | Background overlay opacity | | closeOnBackdropPress | boolean | true | Close on backdrop press | | shadowColor | string | '#000000' | Shadow color | | shadowOpacity | number | 0.25 | Shadow opacity | | shadowRadius | number | 3.84 | Shadow radius | | shadowOffset | {width: number, height: number} | {0, 2} | Shadow offset | | elevation | number | 5 | Android elevation | | iconSize | number | 32 | Icon size | | customIcons | Record<string, Component> | - | Custom icon components | | customThemes | Record<string, ThemeType> | - | Custom theme definitions | | containerStyle | ViewStyle | - | Main container styles | | alertContainerStyle | ViewStyle | - | Alert container styles | | iconContainerStyle | ViewStyle | - | Icon container styles | | titleContainerStyle | ViewStyle | - | Title container styles | | descriptionContainerStyle | ViewStyle | - | Description container styles | | buttonContainerStyle | ViewStyle | - | Button container styles | | testID | string | - | Test identifier |

AlertViewRef Methods

| Method | Parameters | Description | |--------|------------|-------------| | setValues | (theme, title, description, buttons?) | Show alert with specified content | | dismiss | () | Hide the alert |

Built-in Themes

• alert: Red theme for errors/warnings
• success: Green theme for success messages
• info: Blue theme for informational messages

Custom Themes

const customThemes: Record<string, ThemeType> = {
  custom: {
    icon: {
      backgroundColor: '#FF0000',
      icon: 'custom',
      color: '#FFFFFF',
    },
    titleColor: '#FF0000',
    descriptionColor: '#666666',
    backgroundColor: '#FFFFFF',
    borderColor: '#FFE0E0',
  },
};

Button Configuration

const buttons = [
  {
    title: 'Cancel',
    buttonStyle: {
      backgroundColor: '#F2F2F7',
      textStyle: {
        color: '#666666',
        fontSize: 16,
      },
    },
    onPress: () => console.log('Cancelled'),
  },
  {
    title: 'Confirm',
    buttonStyle: {
      backgroundColor: '#007AFF',
      textStyle: {
        color: '#FFFFFF',
        fontSize: 16,
        fontWeight: '600',
      },
    },
    onPress: () => console.log('Confirmed'),
  },
];

Utilities

The library also provides utility functions for consistent styling:

Colors

import { colors, getColor } from 'rn-components-npm';

// Using predefined colors
const primaryColor = colors.primary; // '#007AFF'
const gray100 = colors.gray[100]; // '#F2F2F7'

// Using color getter
const color = getColor('primary'); // '#007AFF'
const grayColor = getColor('100'); // '#F2F2F7'

Spacing

import { spacing, getSpacing } from 'rn-components-npm';

// Using predefined spacing
const margin = spacing.md; // 16
const padding = spacing.padding.md; // 16

// Using spacing getter
const space = getSpacing('md'); // 16

Typography

import { typography, getTypographyStyle } from 'rn-components-npm';

// Using predefined typography styles
const headingStyle = typography.h1;
const bodyStyle = typography.body1;

// Using typography getter
const textStyle = getTypographyStyle('h1');

Development

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• React Native development environment

Setup

1. Clone the repository:

git clone https://gitlab.armiasystems.com/mobilelearningprojects/base-and-components/rncomponentsnpm.git
cd rncomponentsnpm

2. Install dependencies:

npm install

3. Build the project:

npm run build

Available Scripts

• npm run build - Build the TypeScript code
• npm run test - Run tests
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint issues
• npm run clean - Clean build directory
• npm run prepare - Build before publishing

Testing

npm test

Run tests with coverage:

npm test -- --coverage

Linting

npm run lint

Fix linting issues:

npm run lint:fix

Publishing

1. Update the version in package.json
2. Build the project: npm run build
3. Publish to npm: npm publish

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests for new functionality
5. Ensure all tests pass
6. Submit a pull request

License

MIT License - see the LICENSE file for details.

Support

For support and questions, please open an issue in the GitLab repository or contact the development team.

Changelog

v1.0.0

• Initial release
• AlertView component with comprehensive customization options
• Multiple themes (alert, success, info) with custom theme support
• Advanced styling options (shadows, borders, animations)
• Icon customization with custom icon support
• Button configuration with individual styling
• Modal customization (animation, backdrop, transparency)
• Utility functions for colors, spacing, and typography
• Comprehensive TypeScript support
• Full test coverage