OTA Components Module

A reusable UI components library for React Native applications.

Features

• TypeScript support
• React Native components
• Cross-platform compatibility (iOS, Android, Web)
• Easy to integrate
• Consistent styling

Installation

# Using npm
npm install ota-components-module

# Using yarn
yarn add ota-components-module

Local Development

You can use this module locally by adding it to your package.json:

"dependencies": {
  "ota-components-module": "file:app-modules/ota-components-module"
}

Then run:

npm install

Available Components

Button Components

• ThemedButton: A customizable button with primary and secondary styles

Image Components

• MultipleImagePreview: A gallery component for viewing multiple images with pagination
• ImagePickerView: A component for selecting images from camera or gallery
• ImagePickerBottomSheet: A bottom sheet implementation of the image picker
• StackedImage: A component for displaying stacked images

Input Components

• CustomInput: A basic text input component
• FormField: A form field component with label and validation
• CustomDropdown: A dropdown selection component
• SearchViewInput: A search input with clear functionality
• KeyboardScrollView: A scrollview that adjusts for keyboard

Layout Components

• BottomTwoButtonLayoutComponent: A layout with two buttons at the bottom
• PropertyHeaderComponent: A header component for property screens
• BottomSheetDialog: A customizable bottom sheet dialog

Feedback Components

• ActivityLoader: A loading indicator
• ProgressBar: A progress bar component
• CustomAlert: A custom alert dialog
• Dialog: A general purpose dialog component
• DeleteImageConfirmationDialog: A confirmation dialog for deleting images

Typography Components

• Label: A text component with various styles and variants

List Components

• SearchableList: A searchable list component

Component Structure

app-modules/ota-components-module/
├── src/
│   ├── button/
│   │   └── ThemedButton.tsx
│   ├── feedback/
│   │   ├── ActivityLoader.tsx
│   │   ├── CustomAlert.tsx
│   │   ├── DeleteImageConfirmationDialog.tsx
│   │   ├── Dialog.tsx
│   │   └── ProgressBar.tsx
│   ├── image/
│   │   ├── ImagePickerBottomSheet.tsx
│   │   ├── ImagePickerView.tsx
│   │   ├── MultipleImagePreview.tsx
│   │   └── StackedImage.tsx
│   ├── input/
│   │   ├── CustomDropdown.tsx
│   │   ├── CustomInput.tsx
│   │   ├── FormField.tsx
│   │   ├── KeyboardScrollView.tsx
│   │   └── SearchViewInput.tsx
│   ├── layout/
│   │   ├── BottomSheetDialog.tsx
│   │   ├── BottomTwoButtonLayoutComponent.tsx
│   │   └── PropertyHeaderComponent.tsx
│   ├── list/
│   │   └── SearchableList.tsx
│   ├── models/
│   │   └── PropertyImage.ts
│   ├── typography/
│   │   └── Label.tsx
│   ├── utils/
│   │   ├── BaseStyle.ts
│   │   └── TextConstants.ts
│   └── index.ts

Usage Examples

ThemedButton

import { ThemedButton } from 'ota-components-module';

const MyComponent = () => {
  return (
    <ThemedButton
      title="Press Me"
      onPress={() => console.log('Button pressed')}
      type="primary" // or "secondary"
      size="regular" // or "small"
    />
  );
};

MultipleImagePreview

import { MultipleImagePreview } from 'ota-components-module';

const MyComponent = () => {
  const images = [
    { id: '1', imageBlobUrl: 'https://example.com/image1.jpg' },
    { id: '2', imageBlobUrl: 'https://example.com/image2.jpg' },
  ];

  return (
    <MultipleImagePreview
      images={images}
      initialIndex={0}
      onClose={() => console.log('Closed')}
      onDelete={(index) => console.log(`Delete image at index ${index}`)}
    />
  );
};

Label

import { Label, TextSize, TextWeight } from 'ota-components-module';

const MyComponent = () => {
  return (
    <Label
      text="Hello World"
      size={TextSize.LARGE}
      weight={TextWeight.BOLD}
      textColorType="primary"
    />
  );
};

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request