npm package: @movilventas/native-popup
Description: A simple and fully customizable React Native component that implements a popup UI.
Author: Kyupss TM
Latest version: 2.0.4

# @kyupss/native-popup

A simple and fully customizable React Native component that implements a popup UI.

- Easy to customize, has prop to change background color
- Function to close automatically
- Receives callback prop to set button action

## Example popup

|                          Example One                          |                          Example Two                          |                         Example Three                         |
| :-----------------------------------------------------------: | :-----------------------------------------------------------: | :-----------------------------------------------------------: |
| ![](assets/popup-ui_1.gif) [examples/App.js](examples/App.js) | ![](assets/popup-ui_2.gif) [examples/App.js](examples/App.js) | ![](assets/popup-ui_3.gif) [examples/App.js](examples/App.js) |


## Example toast

|                          Example One                          |                          Example Two                          |                         Example Three                         |
| :-----------------------------------------------------------: | :-----------------------------------------------------------: | :-----------------------------------------------------------: |
| ![](assets/toast-01.gif) [examples/App.js](examples/App.js) | ![](assets/toast-02.gif) [examples/App.js](examples/App.js) | ![](assets/toast-03.gif) [examples/App.js](examples/App.js) |

## Installation

If using yarn:

```sh
yarn add @kyupss/native-popup
```

If using npm:

```sh
npm i @kyupss/native-popup
```

## Usage

```js
import { View, TouchableOpacity, Text } from 'react-native'
import { Root, Popup } from '@kyupss/native-popup'
```

Simply declare the method in your event `Popup.show({...})` in its component.

```jsx
<Root>
  <View>
    <TouchableOpacity
      onPress={() =>
        Popup.show({
          type: 'Success',
          title: 'Upload complete',
          button: false,
          textBody: 'Congrats! Your upload successfully done',
          buttontext: 'Ok',
          callback: () => Popup.hide()
        })
      }
    >
      <Text>Open Popup</Text>
    </TouchableOpacity>
  </View>
</Root>
```

You can also use the `Toast` component.

```jsx
// Is necessary make the import to Toast (import { Root, Toast } from '@kyupss/native-popup')
<Root>
  <View>
    <TouchableOpacity
      onPress={() => 
        Toast.show({
        title: 'User created',
        text: 'Your user was successfully created, use the app now.',
        color: '#2ecc71',
        position: 'top' // bottom, center, top
      })}
    >
    <Text>Call Toast</Text>
    </TouchableOpacity>
  </View>
</Root>
```

### Popup Type Usage

Popup contains a type-customization scheme `Type` props.

Example success usage:

```js
Popup.show({
    type: 'Success'
})
```

Example warning usage:

```js
Popup.show({
    type: 'Warning'
})
```

Example error usage:

```js
Popup.show({
    type: 'Danger'
})
```

### Popup Style Background

Popup contains a customization in `Background` props.

Example usage:

```js
Popup.show({
    background: 'red'
})
```

### Popup Callback Function

Popup contains a callback function in button popup `Callback` props.

Example usage:

```js
Popup.show({
    callback: Popup.hide()
})
```


## Documentation

### Popup Component

| Name       | Description                                     | Default            | Type   |
| ---------- | ----------------------------------------------- | ------------------ | ------ |
| title      | Sets the main popup title                       | Upload complete    | String |
| type       | Defines the type (Success, Warning or Error)    | Success            | String |
| textBody   | Defines the text body of popup                  |                    | String |
| button     | Whether or not to display the                   | true               | Bool   |
| buttonText | Defines the text button of popup                | Ok                 | String |
| callback   | Defines the function of button                  | Alert()            | Func   |
| background | Sets the backgroundColor                        | rgba(0, 0, 0, 0.5) | String |
| timing     | Sets the time for the popup to close by itself  | 5000               | Number |
| autoclose  | sets whether the popup will close automatically | false              | Bool   |


### Toast Component

| Name       | Description                                     | Default            | Type      |
| ---------- | ----------------------------------------------- | ------------------ | --------- |
| title      | Sets the main toast title                       |                    | String    |
| text       | Defines the text to toast                       |                    | String    |
| color      | Defines the color to title, border and iconC    | #e1e1e1            | String    |
| timing     | Define your timing to close toast               | 6s                 | Int       |
| icon       | Choose your the best icon to toast              |                    | Component |
| position   | Choose position on your screen                  | bottom             | String    |

## Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

## License

[MIT](./LICENSE)