open-index/open-npm huggingface dataset:
npm package: @rn-common/action-sheet
Description: This library provides a cross-platform action sheet component for React Native, leveraging native `ActionSheetIOS` for iOS and a custom bottom sheet for other platforms.
Latest version: 53.0.3

# [`@rn-common/action-sheet`](./packages/action-sheet)

This library provides a cross-platform action sheet component for React Native, leveraging native `ActionSheetIOS` for iOS and a custom bottom sheet for other platforms.

## Installation

Install using npm:

```sh
npm install @rn-common/action-sheet
```

or yarn:

```sh
yarn add @rn-common/action-sheet
```

## Usage

### Showing an Action Sheet

To display an action sheet, use the `showActionSheet` function:

```javascript
import { showActionSheet } from '@rn-common/action-sheet'

const actionSheet = {
  title: 'Title',
  message: 'Message',
  buttons: [
    { text: 'Option 1', onPress: () => console.log('Option 1 selected') },
    { text: 'Option 2', onPress: () => console.log('Option 2 selected') },
    {
      text: 'Cancel',
      onPress: () => console.log('Cancel selected'),
      type: 'cancel',
    },
  ],
}

showActionSheet(actionSheet)
```

### Button Types

- **default**: Standard button style.
- **cancel**: Typically used to cancel the action sheet; positioned separately.
- **destructive**: Used for actions that may have negative consequences.

### `showActionSheet` Function

The `showActionSheet` function takes an `ActionSheet` object with the following structure:

- `title` (optional): A title for the action sheet.
- `message` (optional): A message displayed below the title.
- `buttons`: An array of buttons, each with a `text`, `onPress`, and an optional `type` ('default', 'cancel', 'destructive').
npm package: @rn-common/bottom-sheet
Description: ## Overview
Latest version: 53.0.3

# [`@rn-common/bottom-sheet`](./packages/bottom-sheet)

## Overview

The `BottomSheet` component is a reusable React Native component that provides a modal bottom sheet UI by using react-native-reanimated. It includes a provider, registration method for custom bottom sheets, and methods to show and hide sheets.

## Installation

Install using:

```sh
npx expo install @rn-common/bottom-sheet react-native-reanimated
```

## Usage

### 1. **Provider**

Wrap your app or a section of your app with the `Provider` component to enable bottom sheet functionality.

```jsx
import BottomSheet from '@rn-common/bottom-sheet'

const App = () => {
  const config = {
    backgroundColor: '#FFFFFF',
  } // optional
  return (
    <BottomSheet.Provider config={config}>
      {/* Your app components */}
    </BottomSheet.Provider>
  )
}
```

### 2. **Registering a Bottom Sheet Component**

Register your custom bottom sheet component using the `BottomSheet.register` method.

```jsx
const CustomBottomSheet = ({ data, close }) => {
  return <View>{/* Custom content */}</View>
}

BottomSheet.register('customSheet', CustomBottomSheet)
```

### 3. **Showing a Bottom Sheet**

To display a bottom sheet, use the `BottomSheet.show` method.

```jsx
BottomSheet.show(
  'customSheet',
  { someData: 'value' },
  { backgroundColor: '#FF0000' }, // this will override the provider's config
)
```

### 4. **Hiding a Bottom Sheet**

To hide a bottom sheet, use the `BottomSheet.hide` method.

```jsx
BottomSheet.hide('customSheet')
```

or use the `close` function provided in the custom bottom sheet component.:

```jsx
const CustomBottomSheet = ({
  data,
  close,
  type,
}: SheetProps<{ someData: string }>) => {
  return (
    <View>
      {/* Custom content */}
      <Button title="Close" onPress={close} />
    </View>
  )
}
```

## Custom Bottom Sheet Component Props

- `type`: A string indicating the type of the bottom sheet.
- `data`: Data passed when showing the bottom sheet.
- `close`: A function to close the bottom sheet.
npm package: @rn-common/device-info
Description: ## Overview
Latest version: 53.0.3

# [`@rn-common/device-info`](./packages/device-info)

## Overview

This module provides utility functions to retrieve information about the device and the application. It leverages the `expo-device` and `expo-application` libraries to access various details such as device name, model, operating system, app version, and more.

## Installation

Install using:

```sh
npx expo install @rn-common/device-info expo-application expo-device
```

## Functions

### 1. `getDeviceInfo`

Retrieves detailed information about the device.

**Returns:**

- `DeviceInfo`: An object containing device-related information.

**Structure of `DeviceInfo` object:**

- `deviceName` (string): The name of the device.
- `modelName` (string): The model name of the device.
- `os` (string): The operating system of the device.
- `osVersion` (string): The version of the operating system.

**Example:**

```javascript
import { getDeviceInfo } from '@rn-common/device-info'

const deviceInfo = getDeviceInfo()
console.log(deviceInfo)
```

### 2. `getAppInfo`

Retrieves detailed information about the application.

**Returns:**

- `AppInfo`: An object containing application-related information.

**Structure of `AppInfo` object:**

- `name` (string): The name of the application.
- `version` (string): The native version of the application.
- `buildNumber` (string): The native build version of the application.
- `appId` (string): The application ID.

**Example:**

```javascript
import { getAppInfo } from '@rn-common/device-info'

const appInfo = getAppInfo()
console.log(appInfo)
```
npm package: @rn-common/dialog
Description: The `Dialog` component is a customizable modal dialog built with React Native and Reanimated. It provides smooth animations, a backdrop overlay, and the ability to handle user interactions like hardware back button presses.
Latest version: 53.0.3

# Dialog Component

The `Dialog` component is a customizable modal dialog built with React Native and Reanimated. It provides smooth animations, a backdrop overlay, and the ability to handle user interactions like hardware back button presses.

## Features

- **Customizable Backdrop**: Set the backdrop color and transparency.
- **Cancelable**: Allow users to close the dialog by tapping the backdrop or pressing the back button.
- **Smooth Animations**: Powered by `react-native-reanimated` for seamless transitions.
- **Keyboard Avoidance**: Automatically adjusts for keyboard appearance.

## Installation

Install using:

```bash
yarn @rn-common/dialog
```

## Usage

```tsx
import React from 'react'
import { Button, Text, View } from 'react-native'
import { Dialog } from './Dialog'

export default function App() {
  const [visible, setVisible] = React.useState(false)

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Dialog" onPress={() => setVisible(true)} />
      <Dialog
        show={visible}
        onRequestClose={() => setVisible(false)}
        backdropColor="rgba(0, 0, 0, 0.7)"
      >
        <View
          style={{
            padding: 20,
            backgroundColor: 'white',
            borderRadius: 10,
            alignItems: 'center',
          }}
        >
          <Text>Hello, this is a dialog!</Text>
          <Button title="Close" onPress={() => setVisible(false)} />
        </View>
      </Dialog>
    </View>
  )
}
```

## Props

| Prop             | Type         | Default             | Description                                                                 |
| ---------------- | ------------ | ------------------- | --------------------------------------------------------------------------- |
| `cancelable`     | `boolean`    | `true`              | Whether the dialog can be dismissed by tapping the backdrop or back button. |
| `children`       | `ReactNode`  | **Required**        | The content to display inside the dialog.                                   |
| `show`           | `boolean`    | `false`             | Controls the visibility of the dialog.                                      |
| `onRequestClose` | `() => void` | `undefined`         | Callback invoked when the dialog is requested to close.                     |
| `backdropColor`  | `string`     | `'rgba(0,0,0,0.5)'` | Color of the backdrop overlay.                                              |

## Customization

You can customize the dialog further by modifying the styles or providing additional props to the `children`.

## License

This project is licensed under the MIT License.
npm package: @rn-common/event-emitter
Description: ## Overview
Latest version: 53.0.3

# [`@rn-common/event-emitter`](./packages/event-emitter)

## Overview

This module provides a simple event emitter utility for subscribing to and emitting events. It includes types for defining event callbacks, an event registration array, and functions for subscribing to and emitting events.

## Installation

Install using npm:

```sh
npm install @rn-common/event-emitter
```

or yarn:

```sh
yarn add @rn-common/event-emitter
```

## Functions

### `subscribe`

Registers a callback function for a specific event type.

**Parameters:**

- `type` (string): The event type to subscribe to.
- `callback` (CallBack<T>): The function to be executed when the event is emitted.

**Returns:**

- A function to unsubscribe from the event.

**Example:**

```javascript
import { subscribe } from '@rn-common/event-emitter'

const unsubscribe = subscribe('eventType', (data) => {
  console.log(data)
})

// To unsubscribe
unsubscribe()
```

### `emit`

Emits an event, triggering all registered callbacks for that event type.

**Parameters:**

- `type` (string): The event type to emit.
- `data` (T): The data to be passed to the callback functions.

**Example:**

```javascript
import { emit } from '@rn-common/event-emitter'

emit('eventType', { key: 'value' })
```
npm package: @rn-common/image-picker
Description: This utility provides a convenient way to pick and resize images using the camera or photo library in a React Native application. It leverages `expo-image-picker` for image selection and `expo-image-manipulator` for resizing images, with additional UI sup
Latest version: 53.0.3

# [`@rn-common/image-picker`](./packages/image-picker)

This utility provides a convenient way to pick and resize images using the camera or photo library in a React Native application. It leverages `expo-image-picker` for image selection and `expo-image-manipulator` for resizing images, with additional UI support via `@rn-common/action-sheet`.

## Installation

Install using:

```sh
npx expo install @rn-common/image-picker expo-image-manipulator expo-image-picker
```

## Features

- **Cross-Platform Support**: Works on both iOS and Android.
- **Action Sheet Integration**: Presents options to the user in an action sheet format.
- **Permission Handling**: Manages camera and media library permissions.

## Usage

### Configuration Options

The utility functions accept a `ImagePickerConfig` object with the following optional properties:

- `title` (optional): Title of the action sheet.
- `photoLibraryTitle` (optional): Title for the option to choose from the gallery. Default to 'Choose from gallery'.
- `cameraTitle` (optional): Title for the option to take a photo. Default to 'Take a photo'.
- `cancelButtonTitle` (optional): Title for the cancel button. Default to 'Cancel'.
- `maxWidth` (optional): Maximum width for the resized image.
- `maxHeight` (optional): Maximum height for the resized image.
- `aspect` (optional): Aspect ratio for the image. Default to [4, 3].
- `quality` (optional): Quality of the resized image (0 to 1). Default to 0.8.
- `allowsMultipleSelection` (optional): Boolean indicating if multiple images can be selected.

### Open Image Picker

To open an action sheet and allow the user to pick an image from the camera or photo library:

```javascript
import { openImagePicker } from '@rn-common/image-picker'

const config = {
  title: 'Select an option',
  cameraTitle: 'Take a Photo',
  photoLibraryTitle: 'Choose from Gallery',
  cancelButtonTitle: 'Cancel',
  maxWidth: 800,
  maxHeight: 600,
  aspect: [4, 3],
  quality: 0.8,
}

openImagePicker(config)
  .then((images) => {
    console.log('Selected images:', images)
  })
  .catch((error) => {
    console.error('Error picking images:', error)
  })
```

## Functions

### `openImageCameraPicker`

Launches the camera for image capture.

### `openImageLibraryPicker`

Opens the media library for image selection.

### `openImagePicker`

Displays an action sheet with options to either take a photo or choose from the gallery.

### Error Handling

- `PERMISSION_DENIED`: Thrown if the necessary permissions are not granted.
- `CANCELLED`: Thrown if the user cancels the image picking process.
npm package: @rn-common/locale
Description: This module provides a simple and flexible way to manage localization (i18n) in a React/React Native application using Redux Toolkit. It allows for dynamic language switching and provides a hook to access localized strings based on the current language.
Latest version: 53.0.3

# [`@rn-common/locale`](./packages/locale)

This module provides a simple and flexible way to manage localization (i18n) in a React/React Native application using Redux Toolkit. It allows for dynamic language switching and provides a hook to access localized strings based on the current language.

## Installation

Install using npm:

```sh
npm install @rn-common/locale
```

or yarn:

```sh
yarn add @rn-common/locale
```

## Features

- **Language Management**: Easily set and switch between languages.
- **Localization Support**: Define localized strings for multiple languages.
- **Redux Integration**: Uses Redux Toolkit's `createSlice` for state management.
- **React Hook**: Provides a custom hook for accessing localized strings in components.

## Usage

### 1. Define Your Localized Strings

Create a map of localized strings for each supported language.

```javascript
const languageMap = {
  en: {
    greeting: 'Hello',
    farewell: 'Goodbye',
  },
  es: {
    greeting: 'Hola',
    farewell: 'Adiós',
  },
}
```

### 2. Create the Locale Reducer

Use the `createLocaleReducer` function to create a slice and associated actions.

```javascript
import { createLocaleReducer } from '@rn-common/locale'

const config = {
  languageMap,
  initialLanguage: 'en',
}

const { slice, setLanguage, useStrings } = createLocaleReducer(config)
```

### 3. Integrate with Redux Store

Add the created slice to your Redux store.

```javascript
import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({
  reducer: {
    [slice.name]: slice.reducer,
  },
})
```

### 4. Access Localized Strings in Components

Use the `useStrings` hook to access localized strings in your React components.

```javascript
import React from 'react'
import { useStrings, setLanguage } from './localeSlice'
import { useDispatch } from 'react-redux'

const MyComponent = () => {
  const strings = useStrings()
  const dispatch = useDispatch()

  return (
    <div>
      <p>{strings.greeting}</p>
      <button onClick={() => dispatch(setLanguage('es'))}>
        Switch to Spanish
      </button>
    </div>
  )
}
```
npm package: @rn-common/logger
Description: This module provides a logging utility for React Native applications, leveraging `react-native-logs` and `expo-file-system` for storing logs in a file. It allows you to log messages with various severity levels and save them to a designated directory.
Latest version: 53.0.3

# [`@rn-common/logger`](./packages/logger)

This module provides a logging utility for React Native applications, leveraging `react-native-logs` and `expo-file-system` for storing logs in a file. It allows you to log messages with various severity levels and save them to a designated directory.

## Installation

Install using:

```sh
npx expo install @rn-common/logger expo-file-system
```

## Usage

### `logger`

The `logger` object provides methods to log messages with different severity levels.

#### Methods

- **`setSeverity(severity: 'debug' | 'info' | 'warn' | 'error')`**

  - Sets the severity level of the logger. Messages with a lower severity level than the set level will be ignored.

- **`debug(message: any)`**

  - Logs a debug message.

- **`info(message: any)`**

  - Logs an informational message.

- **`warn(message: any)`**

  - Logs a warning message.

- **`error(message: any)`**
  - Logs an error message.

#### Example

```javascript
import { logger } from '@rn-common/logger'

// Set severity level
logger.setSeverity('info')

// Log messages with different severity levels
logger.debug('This is a debug message')
logger.info('This is an info message')
logger.warn('This is a warning message')
logger.error('This is an error message')
```
npm package: @rn-common/string-util
Description: This module provides utilities for generating universally unique identifiers (UUIDs) and formatting strings with placeholders using the Expo Crypto library.
Latest version: 53.0.3

# [`@rn-common/string-util`](./packages/string-util)

This module provides utilities for generating universally unique identifiers (UUIDs) and formatting strings with placeholders using the Expo Crypto library.

## Installation

Install using:

```sh
npx expo install @rn-common/string-util expo-crypto
```

## Utilities

### `uuid()`

Generates a universally unique identifier (UUID). This function utilizes `Crypto.randomUUID()` to produce a UUID, a standardized 128-bit identifier commonly used for uniquely identifying information in computing systems.

#### Returns

- `string`: A string representation of the generated UUID.

#### Example

```javascript
import { uuid } from '@rn-common/string-util'

const id = uuid()
console.log(`Generated UUID: ${id}`)
```

### `formatTemplate(template: string, args: Record<string, any>)`

Formats a string by replacing placeholders with corresponding values from an arguments object. Placeholders in the string should be enclosed in double curly braces (e.g., `{{key}}`), where `key` corresponds to a property name in the `args` object. The function replaces these placeholders with their respective values from `args`.

#### Parameters

- `template` (`string`): The string containing placeholders to be replaced.
- `args` (`Record<string, any>`): An object containing key-value pairs where keys correspond to placeholders in the text and values are the replacement values.

#### Returns

- `string`: The formatted string with placeholders replaced by their corresponding values from `args`.

#### Example

```javascript
import { formatTemplate } from '@rn-common/string-util'

const template = 'Hello, {{name}}! Welcome to {{place}}.'
const values = { name: 'Alice', place: 'Wonderland' }
const result = formatTemplate(template, values)
console.log(result) // "Hello, Alice! Welcome to Wonderland."
```
npm package: @rn-common/toast
Description: This component provides a simple and customizable toast notification system for React Native applications. It uses `react-native-reanimated` for animations and `react-native-screens` for overlay support.
Latest version: 53.0.3

# [`@rn-common/toast`](./packages/toast)

This component provides a simple and customizable toast notification system for React Native applications. It uses `react-native-reanimated` for animations and `react-native-screens` for overlay support.

## Features

- **Customizable Toast Styles:** Define custom styles for different types of toasts.
- **Animation Support:** Includes slide-in and slide-out animations using `react-native-reanimated`.
- **Auto Dismiss:** Toasts automatically dismiss after a specified duration.
- **Cross-Platform Support:** Works on both iOS and Android with platform-specific optimizations.

## Installation

Install using:

```bash
npx expo install @rn-common/toast react-native-reanimated react-native-safe-area-context react-native-screens
```

## Usage

### Importing the Component

```javascript
import Toast from '@rn-common/toast'
```

### Setting Up the Toast Provider

Place the `Toast.Provider` component at the root of your app, preferably at a high level in the component tree.
Make sure to wrap the `Toast.Provider` component inside a `SafeAreaProvider` from `react-native-safe-area-context` to ensure the toast is displayed correctly.

```javascript
import React from 'react'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import Toast from '@rn-common/toast'

export default function App() {
  const toastConfig = {
    duration: 4000,
    toastMap: {
      success: {
        indicatorStyle: { backgroundColor: 'green' },
        textStyle: { color: 'white' },
      },
      error: {
        indicatorStyle: { backgroundColor: 'red' },
        textStyle: { color: 'white' },
      },
    },
  }

  return (
    <SafeAreaProvider>
      {/* Your other app components */}
      <Toast.Provider config={toastConfig} />
    </SafeAreaProvider>
  )
}
```

### Showing a Toast

To show a toast, call the `Toast.show` method with the desired type and message:

```javascript
import Toast from '@rn-common/toast'

// Example usage:
Toast.show('success', 'This is a success message!')
Toast.show('error', 'This is an error message!')
```

## Configuration

The `Toast.Provider` accepts a `config` prop to customize toast behavior:

- `duration` (optional): Duration in milliseconds for how long the toast should be visible. Defaults to 3000 ms.
- `toastMap`: An object mapping toast types to their styles. Each entry can have `indicatorStyle` and `textStyle` properties.

## Styling

Customize the styles by modifying the `toastMap` configuration:

- `indicatorStyle`: Style for the indicator on the left side of the toast.
- `textStyle`: Style for the toast message text.
npm package: @rn-components-kit/deck-swiper
Description: Deck Swiper helps you evaluate one option at a time, instead of selecting from a set of options.
Author: SmallStoneSK
Latest version: 1.0.0

# DeckSwiper

[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/deck-swiper.svg)](https://www.npmjs.com/package/@rn-components-kit/deck-swiper)

[English](./README.md) | 中文

Deck Swiper helps you evaluate one option at a time, instead of selecting from a set of options.

## How to use

```bash
npm install @rn-components-kit/deck-swiper --save
```

|Preview|Code|
|------------|:---------:|
|<img width="375" src="./preview/basic-usage.gif"/>|[Demo1 Code](./demos/Demo1.js)|

## Props

- [`style`](#style)
- [`data`](#data)
- [`cardWidth`](#cardWidth)
- [`cardHeight`](#cardHeight)
- [`renderCard`](#renderCard)
- [`renderBottom`](#renderBottom)
- [`onSwipeLeft`](#onSwipeLeft)
- [`onSwipeRight`](#onSwipeRight)
- [`onBeginDragging`](#onBeginDragging)
- [`onEndDragging`](#onEndDragging)

## Methods

- [`prev`](#prev)
- [`next`](#next)

## Reference

### Props

#### `style`

Allow you to customizr style

|Type|Required|Default|
|----|--------|-------|
|object|no|-|

#### `data`

Data source of cards

|Type|Required|Default|
|----|--------|-------|
|T[]|yes|-|

#### `cardWidth`

Width of card (it is important to help calculate animation)

|Type|Required|Default|
|----|--------|-------|
|number|yes|-|

#### `cardHeight`

Height of card (it is important to help calculate animation)

|Type|Required|Default|
|----|--------|-------|
|number|yes|-|

#### `renderCard`

```js
(params: {item: T, index: number}) => React.ReactElement | null
```

Takes an item from data and renders it into the swiper

|Type|Required|Default|
|----|--------|-------|
|function|yes|-|

#### `renderBottom`

```js
() => React.ReactElement | null
```

When all cards are swiped, it will be called and returns bottom layer component

|Type|Required|Default|
|----|--------|-------|
|function|no|-|

#### `onSwipeLeft`

```js
(from: number, to: number) => void
```

A callback will be triggered when card is swiped left

|Type|Required|Default|
|----|--------|-------|
|function|no|() => {}|

#### `onSwipeRight`

```js
(from: number, to: number) => void
```

A callback will be triggered when card is swiped right

|Type|Required|Default|
|----|--------|-------|
|function|no|() => {}|

#### `onBeginDragging`

```js
() => void
```

A callback will be triggered when you begin to drag DeckSwiper

|Type|Required|Default|
|----|--------|-------|
|function|no|() => {}|

#### `onEndDragging`

```js
() => void
```

A callback will be triggered when dragging operation ends

|Type|Required|Default|
|----|--------|-------|
|function|no|() => {}|

### Methods

#### `prev`

```js
prev()
```

Swipes to previous card

#### `next`

```js
next()
```

Swipes to next card
npm package: @rn-components-kit/divider
Description: Dividers are visual separators of content.
Author: SmallStoneSK
Latest version: 1.0.1

# Divider

[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/divider.svg)](https://www.npmjs.com/package/@rn-components-kit/divider)

English | [中文](./README.zh-CN.md)

Dividers are visual separators of content. It supports two orientations: `horizontal` and `vertical`.

## How to use

```bash
npm install @rn-components-kit/divider --save
```

|Preview|Code|
|------------|:---------:|
|<img width="375" src="./preview/horizontal-divider.png"/>|[Demo1 Code](./demos/Demo1.js)|
|<img width="375" src="./preview/vertical-divider.png"/>|[Demo2 Code](./demos/Demo2.js)|

## Props

- [`style`](#style)
- [`color`](#color)
- [`orientation`](#orientation)
- [`margin`](#margin)
- [`padding`](#padding)

## Reference

### Props

#### `style`

Allow you to customize style

|Type|Required|Default|
|----|--------|-------|
|object|no|-|

#### `color`

Determines the divider's color

|Type|Required|Default|
|----|--------|-------|
|string|no|'#DFDFDF'|

#### `orientation`

Determines the divider's orientation

|Type|Required|Default|
|----|--------|-------|
|enum(`'horizontal'`, `'vertical'`)|no|'horizontal'|

#### `margin`

Space between two sides on cross axis

|Type|Required|Default|
|----|--------|-------|
|number|no|0|

#### `padding`

Space inside two sides on main axis

|Type|Required|Default|
|----|--------|-------|
|number|no|0|
npm package: @rn-components-kit/icon
Description: Semantic vector graphics.
Author: SmallStoneSK
Latest version: 1.0.3

# Icon

[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/icon.svg)](https://www.npmjs.com/package/@rn-components-kit/icon)

English | [中文](./README.zh-CN.md)

Semantic vector graphics. It supports the following features:

- customize size
- customize color
- integrated in [Ant-Design Preset](https://ant.design/components/icon/)

:warning: **NOTE: Make sure your project has integrated in ART module.**

If you encounter the problem like **No component found for view with name "ARTXXX"**, that's because the `ART` module has not been integrated in your project. You should:

1. Use Xcode to open your ios project, `Libraries` -> `Add Files to` -> `node_modules/react-native/Libraries/ART/ART.xcodeproj`.
2. Click the root of project, find `Linked Frameworks and Libraries`, click `+` to add `libART.a` and rebuild the project.
3. After having rebuilded, re-run command `react-native run-ios/android` to start your project.

## How to use

```bash
npm install @rn-components-kit/icon --save
```

|Preview|Code|
|------------|:---------:|
|<img width="375" src="./preview/various-sizes-icon.png"/>|[Demo1 Code](./demos/Demo1.js)|
|<img width="375" src="./preview/various-types-icon.png"/>|[Demo2 Code](./demos/Demo2.js)|
|<img width="375" src="./preview/various-colors-icon.png"/>|[Demo3 Code](./demos/Demo3.js)|

## Props

- [`style`](#style)
- [`color`](#color)
- [`size`](#size)
- [`type`](#type)

## Reference

### Props

#### `style`

Allow you to customize style

|Type|Required|Default|
|----|--------|-------|
|object|no|-|

#### `color`

Determines the icon's color

|Type|Required|Default|
|----|--------|-------|
|string|no|'#333'|

#### `size`

Determines the icon's size

|Type|Required|Default|
|----|--------|-------|
|number|no|15|

#### `type`

Icon type, integrated in [Ant-Design Preset](https://ant.design/components/icon/)

|Type|Required|Default|
|----|--------|-------|
|[enum types](#icon-types)|yes|-|

## Icon Types

![Icon Types](./preview/iconTypes.png)
npm package: @rn-components-kit/rating
Description: Radio buttons allow users to select one option from a set.
Author: SmallStoneSK
Latest version: 1.0.1

# Rating

[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/rating.svg)](https://www.npmjs.com/package/@rn-components-kit/rating)

English | [中文](./README.zh-CN.md)

Ratings are used to collect measurable feedback from users. It supports the following features:

- `touch` and `move` operation
- customized active/inactive icon (`type`, `color`, `size`)
- different step values (e.g. 0.1/0.2/0.5/1)

## How to use

```bash
npm install @rn-components-kit/rating --save
```

|Preview|Code|
|------------|:---------:|
|<img width="375" src="./preview/basic-usage.gif"/>|[Demo1 Code](./demos/Demo1.js)|
|<img width="375" src="./preview/customized-icon.gif"/>|[Demo2 Code](./demos/Demo2.js)|
|<img width="375" src="./preview/different-step.gif"/>|[Demo3 Code](./demos/Demo3.js)|

## Props

- [`style`](#style)
- [`step`](#step)
- [`total`](#total)
- [`value`](#value)
- [`iconGap`](#iconGap)
- [`iconSize`](#iconSize)
- [`disabled`](#disabled)
- [`activeIconType`](#activeIconType)
- [`activeIconColor`](#activeIconColor)
- [`inActiveIconType`](#inActiveIconType)
- [`inActiveIconColor`](#inActiveIconColor)
- [`onValueChange`](#onValueChange)

## Reference

### Props

#### `style`

Allows you to customize style

|Type|Required|Default|
|----|--------|-------|
|object|no|-|

#### `step`

The granularity that Rating can step through values

|Type|Required|Default|
|----|--------|-------|
|enum(`0.1`, `0.2`, `0.5`, `1`)|no|1|

#### `total`

Count of star

|Type|Required|Default|
|----|--------|-------|
|number|no|5|

#### `value`

Current count of active star

|Type|Required|Default|
|----|--------|-------|
|number|no|0|

#### `iconGap`

Space between stars

|Type|Required|Default|
|----|--------|-------|
|number|no|4|

#### `iconSize`

Size of star icon

|Type|Required|Default|
|----|--------|-------|
|number|no|20|

#### `disabled`

Determines whether value can be changed

|Type|Required|Default|
|----|--------|-------|
|boolean|no|false|

#### `activeIconType`

Icon type when it is active

|Type|Required|Default|
|----|--------|-------|
|[enum value](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Icon)|no|'star-fill'|

#### `activeIconColor`

Icon color when it is active

|Type|Required|Default|
|----|--------|-------|
|string|no|'#FADB14'|

#### `inActiveIconType`

Icon type when it is inactive

|Type|Required|Default|
|----|--------|-------|
|[enum value](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Icon)|no|'star-fill'|

#### `inActiveIconColor`

Icon color when it is inactive

|Type|Required|Default|
|----|--------|-------|
|string|no|'#E8E8E8'|

#### `onValueChange`

```js
(value: number) => void
```

A callback will be triggered when Rating's value changes

|Type|Required|Default|
|----|--------|-------|
|function|no|() => {}|
npm package: @rn-components-kit/scroll-picker
Description: Selecting option by scrolling operation.
Author: SmallStoneSK
Latest version: 1.0.0

# ScrollPicker

[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/scroll-picker.svg)](https://www.npmjs.com/package/@rn-components-kit/scroll-picker)

English | [中文](./README.zh-CN.md)

Selecting option by scrolling operation. It supports following features:

- smoothing the differences between `Android` and `iOS` platforms
- multiple picker items
- cascading operation
- customized option content in `ScrollPicker.Item`

## How to use

```bash
npm install @rn-components-kit/scroll-picker --save
```

|Preview|Code|
|------------|:---------:|
|<img width="375" src="./preview/basic-usage.gif"/>|[Demo1 Code](./demos/Demo1.js)|
|<img width="375" src="./preview/cascading.gif"/>|[Demo2 Code](./demos/Demo2.js)|
|<img width="375" src="./preview/customize-option-content.gif"/>|[Demo3 Code](./demos/Demo3.js)|

## Props

- [`style`](#style)
- [`itemHeight`](#itemHeight)
- [`onValueChange`](#onValueChange)

## Reference

### Props

#### `style`

Allow you to customize style

|Type|Required|Default|
|----|--------|-------|
|object|no|-|

#### `itemHeight`

Height of each item in `ScrollPicker.Item`

|Type|Required|Default|
|----|--------|-------|
|number|no|30|

#### `onValueChange`

```js
(value: {[key: string]: any}) => void;
```

A callback will be triggered when ScrollPicker.Item's selected value changes

|Type|Required|Default|
|----|--------|-------|
|function|no|() => {}|

### Props for ScrollPicker.Item

- [`id`](#id)
- [`flex`](#flex)
- [`data`](#data)
- [`defaultValue`](#defaultValue)
- [`renderItem`](#renderItem)

#### `id`

A unique identifier in `ScrollPicker`

|Type|Required|Default|
|----|--------|-------|
|string|yes|-|

#### `flex`

How much of the remaining space in the flex container

|Type|Required|Default|
|----|--------|-------|
|number|no|1|

#### `data`

Data source of options

|Type|Required|Default|
|----|--------|-------|
|T[]|yes|-|

#### `defaultValue`

Default value to speficy which option is selected initially (must be one of `data`)

|Type|Required|Default|
|----|--------|-------|
|T|no|data[0]|

#### `renderItem`

```js
(params: {item: T, index: number}) => React.ReactElement;
```

Allows you to customize content style

|Type|Required|Default|
|----|--------|-------|
|function|yes|-|
npm package: @rn-components-kit/skeleton
Description: Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
Author: SmallStoneSK
Latest version: 1.0.1

# Skeleton

[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/skeleton.svg)](https://www.npmjs.com/package/@rn-components-kit/skeleton)

English | [中文](./README.zh-CN.md)

Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet. It supports the following features:

- `avatar`, `title`, `paragraph` three parts all can be customized
- HOC component `withSkeleton` for you to fully customize skeleton

:warning: **NOTE**

If you use `withSkeleton` with decorator syntax, you should also install `@babel/plugin-proposal-decorators`.

## How to use

```bash
npm install @rn-components-kit/skeleton --save
```

|Preview|Code|
|------------|:---------:|
|<img width="375" src="./preview/default-skeleton.gif"/>|[Demo1 Code](./demos/Demo1.js)|
|<img width="375" src="./preview/customize-skeleton.gif"/>|[Demo2 Code](./demos/Demo2.js)|

## Props

- [`style`](#style)
- [`avatar`](#avatar)
- [`title`](#title)
- [`paragraph`](#paragraph)

## Reference

### Props

#### `style`

Allows you to customize style

|Type|Required|Default|
|----|--------|-------|
|object|no|-|

#### `avatar`

Show avatar placeholder (if false, avatar placeholder will not be shown)

|Type|Required|Default|
|----|--------|-------|
|boolean \| `AvatarProps`|no|true|

**AvatarProps**

- **style** [object]: Allow you to customize avatar module's style 
- **size** [number]: The width and height of avatar. (default 20)
- **shape** [enum(`'circle'`, `'square'`)]: The shape of avatar. (default 'circle')

#### `title`

Show title placeholder (if false, title placeholder will not be shown)

|Type|Required|Default|
|----|--------|-------|
|boolean \| `TitleProps`|no|true|

**TitleProps**

- **style** [object]: Allow you to customize title block's style
- **width** [number | string]: The width of title block
- **height** [number]: The height of title block. (default 15)

#### `paragraph`

Show paragraph placeholder (if false, title paragraph will not be shown)

|Type|Required|Default|
|----|--------|-------|
|boolean \| `ParagraphProps`|no|true|

**ParagraphProps**

- **style** [object]: Allow you to customize paragraph module's style
- **rows** [number]: The count of paragraph block lines. (default 3)
- **widths** [Array<number | string>]: An array of each block's width (if undefined or null, default 100%)
- **heights** [Array<number>]: An array of each block's height (if undefined or null, default 15)

## Props for withSkeleton

- [`options`](#options)

## Reference for withSkeleton

#### `options`

Config for skeleton

|Type|Required|Default|
|----|--------|-------|
|`withSkeletonOptions`|no|{duraion: 1000, minOpacity: 0.2, maxOpacity: 1}|

**withSkeletonOptions**

- **duraion** [number]: How long a loop animation lasts (default: 1000)
- **minOpacity** [number]: The minimum opacity value during animation (default: 0.2)
- **maxOpacity** [number]: The maximum opacity value during animation (default: 1)
npm package: @rn-components-kit/swipe-out
Description: iOS-style swipe-out buttons that appear from behind a component.
Author: SmallStoneSK
Latest version: 1.0.1

# SwipeOut

[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/swipe-out.svg)](https://www.npmjs.com/package/@rn-components-kit/swipe-out)

English | [中文](./README.zh-CN.md)

iOS-style swipe-out buttons that appear from behind a component. It supports the following features:

- `left` and `right` two directions
- multiple hidden buttons
- fully customized hidden part

## How to use

```bash
npm install @rn-components-kit/swipe-out --save
```

|Preview|Code|
|------------|:---------:|
|<img width="375" src="./preview/swipe-out-from-left-and-right.gif"/>|[Demo1 Code](./demos/Demo1.js)|
|<img width="375" src="./preview/multiple-hidden-buttons.gif"/>|[Demo2 Code](./demos/Demo2.js)|
|<img width="375" src="./preview/customized-hidden-part.gif"/>|[Demo3 Code](./demos/Demo3.js)|

## Props

- [`style`](#style)
- [`left`](#left)
- [`right`](#right)
- [`onBeginDragging`](#onBeginDragging)
- [`onEndDragging`](#onEndDragging)

## Reference

### Props

#### `style`

Allow you to customizr style

|Type|Required|Default|
|----|--------|-------|
|object|no|-|

#### `left`

The config for left hidden part. It supports followings:

1. function[() => React.ReactElement]: allows you to fully customize the hidden component
2. object[Option]: a pre-setted style for button, you need to specify `title`, `color` and `onPress`
3. array[Option[]]: multiple buttons

**Option:**

- title[string]: text to display in button
- color[string]: background color of button
- onPress[function]: callback will be triggered when pressing the button

|Type|Required|Default|
|----|--------|-------|
|() => React.ReactElement \| Option \| Option[] \| null|no|-|

#### `right`

The config for right hidden part (same to left)

|Type|Required|Default|
|----|--------|-------|
|() => React.ReactElement \| Option \| Option[] \| null|no|-|

#### `onBeginDragging`

```js
() => void
```

A callback will be triggered when you begin to drag SwipeOut

|Type|Required|Default|
|----|--------|-------|
|function|no|() => {}|

#### `onEndDragging`

```js
() => void
```

A callback will be triggered when dragging operation ends

|Type|Required|Default|
|----|--------|-------|
|function|no|() => {}|
npm package: @rn-components-kit/switch
Description: Switching selector.
Author: SmallStoneSK
Latest version: 1.0.1

# Switch

[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/switch.svg)](https://www.npmjs.com/package/@rn-components-kit/switch)

English | [中文](./README.zh-CN.md)

Switching selector. It supports the following features:

- customize color
- customize size
- two types: `cupertino` and `material`

## How to use

```bash
npm install @rn-components-kit/switch --save
```

|Preview|Code|
|------------|:---------:|
|<img width="375" src="./preview/various-sizes-switch.png"/>|[Demo1 Code](./demos/Demo1.js)|
|<img width="375" src="./preview/various-colors-switch.png"/>|[Demo2 Code](./demos/Demo2.js)|
|<img width="375" src="./preview/cupertino-vs-material-switch.png"/>|[Demo3 Code](./demos/Demo3.js)|
|<img width="375" src="./preview/enabled-vs-disabled-switch.gif"/>|[Demo4 Code](./demos/Demo4.js)|
|<img width="375" src="./preview/switch-value-change-callback.gif"/>|[Demo5 Code](./demos/Demo5.js)|

## Props

- [`style`](#style)
- [`type`](#type)
- [`value`](#value)
- [`disabled`](#disabled)
- [`width`](#width)
- [`height`](#height)
- [`thumbRadius`](#thumbRadius)
- [`thumbColor`](#thumbColor)
- [`trackOnColor`](#trackOnColor)
- [`trackOffColor`](#trackOffColor)
- [`onValueChange`](#onValueChange)

## Reference

### Props

#### `style`

Allows you to customize style

|Type|Required|Default|
|----|--------|-------|
|object|no|-|

#### `type`

Two types (`cupertino` for IOS and `material` for Android)

|Type|Required|Default|
|----|--------|-------|
|enum(`'cupertino'`, `'material'`)|no|'cupertino'|

#### `value`

Determines whether switch is on when initial rendering

|Type|Required|Default|
|----|--------|-------|
|boolean|no|false|

#### `disabled`

Determines whether switch is touchabled

|Type|Required|Default|
|----|--------|-------|
|boolean|no|false|

#### `width`

Width of switch

|Type|Required|Default|
|----|--------|-------|
|number|no|40|

#### `height`

Height of switch's track

|Type|Required|Default|
|----|--------|-------|
|number|no|20|

#### `thumbRadius`

Radius of thumb

|Type|Required|Default|
|----|--------|-------|
|number|no|8|

#### `thumbColor`

Color of thumb

|Type|Required|Default|
|----|--------|-------|
|string|no|'#FFF'|

#### `trackOnColor`

Color of track when switch is "on" status

|Type|Required|Default|
|----|--------|-------|
|string|no|'#79D472'|

#### `trackOffColor`

Color of track when switch is "off" status

|Type|Required|Default|
|----|--------|-------|
|string|no|'#CCC'|

#### `onValueChange`

```js
(value: boolean) => void
```

A callback will be triggered when switch's status changes

|Type|Required|Default|
|----|--------|-------|
|function|no|() => {}|
npm package: @rn-components-kit/tag
Description: Tag for categorizing or markup.
Author: SmallStoneSK
Latest version: 1.0.3

# Tag

[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/tag.svg)](https://www.npmjs.com/package/@rn-components-kit/tag)

English | [中文](./README.zh-CN.md)

Tag for categorizing or markup. It supports the following features:

- customize color
- two types: `outline` and `solid`
- closable and its callback

## How to use

```bash
npm install @rn-components-kit/tag --save
```

|Preview|Code|
|------------|:---------:|
|<img width="375" src="./preview/colorful-outline-tags.png"/>|[Demo1 Code](./demos/Demo1.js)|
|<img width="375" src="./preview/colorful-solid-tags.png"/>|[Demo2 Code](./demos/Demo2.js)|
|<img width="375" src="./preview/closable-tags.gif"/>|[Demo3 Code](./demos/Demo3.js)|

## Props

- [`style`](#style)
- [`text`](#text)
- [`type`](#type)
- [`color`](#color)
- [`fontSize`](#fontSize)
- [`paddingHorizontal`](#paddingHorizontal)
- [`paddingVertical`](#paddingVertical)
- [`borderRadius`](#borderRadius)
- [`borderColor`](#borderColor)
- [`animatedWhenDisappear`](#animatedWhenDisappear)
- [`animationDuration`](#animationDuration)
- [`closable`](#closable)
- [`onClose`](#onClose)

## Reference

### Props

#### `style`

Allow you to customize style

|Type|Required|Default|
|----|--------|-------|
|object|no|-|

#### `text`

Text inside tag to display

|Type|Required|Default|
|----|--------|-------|
|string|yes|''|

#### `type`

Determines the tag's type (outline or solid)

|Type|Required|Default|
|----|--------|-------|
|enum(`'outline'`, `'solid'`)|no|'outline'|

#### `color`

Determines the tag's color

|Type|Required|Default|
|----|--------|-------|
|string|no|'#333'|

#### `fontSize`

Determines the fontSize of tag's text

|Type|Required|Default|
|----|--------|-------|
|number|no|14|

#### `paddingHorizontal`

Padding value in the horizontal orientation

|Type|Required|Default|
|----|--------|-------|
|number|no|4|

#### `paddingVertical`

Padding value in the vertical orientation

|Type|Required|Default|
|----|--------|-------|
|number|no|1|

#### `borderRadius`

Determines the border radius value of tag

|Type|Required|Default|
|----|--------|-------|
|number|no|3|

#### `borderColor`

Color of tag's border. If it is not set, the default is the same as `color`

|Type|Required|Default|
|----|--------|-------|
|string|no|-|

#### `animatedWhenDisappear`

Determines whether an animation enabled when the tag is closed

|Type|Required|Default|
|----|--------|-------|
|boolean|no|false|

#### `animationDuration`

Determines how long the disappearing animation will take when tag is closed. (ms)

|Type|Required|Default|
|----|--------|-------|
|number|no|300|

#### `closable`

Determines whether a tag can be closed

|Type|Required|Default|
|----|--------|-------|
|boolean|no|false|

#### `onClose`

```js
(text: string) => void
```

A callback will be triggered when the tag is closed

|Type|Required|Default|
|----|--------|-------|
|function|no|() => {}|
npm package: @rn-components-kit/text
Description: Text component
Author: SmallStoneSK
Latest version: 1.0.0

# Text
---

English | [中文](./README.zh-CN.md)

A React component for displaying text. It mainly resolves the following problems of React Native Text component:

- mixed Chinese and English arranging problem. 
- sometimes tailed text would be cut off on some Android phones.
- different padding values on Android/IOS os result in different text height.

## How to use

```bash
npm install @rn-components-kit/text --save
```

Use the same way as [Text component](https://facebook.github.io/react-native/docs/text) provided by React Native.
npm package: @rn-components-kit/tooltip
Description: Tooltips display infomation when users tap on an element.
Author: SmallStoneSK
Latest version: 1.0.1

# Tooltip

[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/tooltip.svg)](https://www.npmjs.com/package/@rn-components-kit/tooltip)

English | [中文](./README.zh-CN.md)

Tooltips display infomation when users tap on an element. It supports the following features:

- `top` and `bottom` two directions to place tooltip content
- fully customized toopltip content

## How to use

```bash
npm install @rn-components-kit/tooltip --save
```

|Preview|Code|
|------------|:---------:|
|<img width="375" src="./preview/tooltip-usages.gif"/>|[Demo1 Code](./demos/Demo1.js)|

## Props

- [`style`](#style)
- [`popup`](#popup)
- [`popupContainerStyle`](#popupContainerStyle)
- [`popupTextStyle`](#popupTextStyle)
- [`showCaret`](#showCaret)
- [`backgroundColor`](#backgroundColor)
- [`overlayColor`](#overlayColor)
- [`placement`](#placement)
- [`onOpen`](#onOpen)
- [`onClose`](#onClose)

## Methods

- [`open`](#open)
- [`close`](#close)

## Reference

### Props

#### `style`

Allows you to customize style

|Type|Required|Default|
|----|--------|-------|
|object|no|-|

#### `popup`

Content to show when tooltip pressed. If it is a string, it will be wrapped within Text component. You can also pass a customized ReactElement

|Type|Required|Default|
|----|--------|-------|
|string \| ReactElement|yes|-|

#### `popupContainerStyle`

Customized style for popup content's container

|Type|Required|Default|
|----|--------|-------|
|object|no|-|

#### `popupTextStyle`

Customized style for popup text (works only when popup is a string)

|Type|Required|Default|
|----|--------|-------|
|object|no|-|

#### `showCaret`

Determines whether to show display pointer

|Type|Required|Default|
|----|--------|-------|
|boolean|no|true|

#### `backgroundColor`

Background color of tooptip (also for caret if showCaret is true)

|Type|Required|Default|
|----|--------|-------|
|string|no|'rgba(0,0,0,.8)'|

#### `overlayColor`

Background color of overlay (you can use rgba to control the opacity)

|Type|Required|Default|
|----|--------|-------|
|string|no|'rgba(0,0,0,.1)'|

#### `placement`

Controls where to show tooltip

|Type|Required|Default|
|----|--------|-------|
|enum(`'top'`, `'bottom'`)|no|'bottom'|

#### `onOpen`

```js
() => void
```

A callback will be triggered when tooltip opens

|Type|Required|Default|
|----|--------|-------|
|function|no|() => {}|

#### `onClose`

```js
() => void
```

A callback will be triggered when tooltip closes

|Type|Required|Default|
|----|--------|-------|
|function|no|() => {}|

### Methods

#### `open`

```js
open()
```

Normally, Tooltip component has taken over the work of opening/closing. But in some cases, you can also use this function to open tooltip

#### `close`

```js
close()
```

Normally, Tooltip component has taken over the work of opening/closing. But in some cases, you can also use this function to close tooltip