@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 | | :-----------------------------------------------------------: | :-----------------------------------------------------------: | :-----------------------------------------------------------: | | examples/App.js | examples/App.js | examples/App.js |

Example toast

| Example One | Example Two | Example Three | | :-----------------------------------------------------------: | :-----------------------------------------------------------: | :-----------------------------------------------------------: | | examples/App.js | examples/App.js | examples/App.js |

Installation

If using yarn:

yarn add @kyupss/native-popup

If using npm:

npm i @kyupss/native-popup

Usage

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.

<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.

// 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:

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

Example warning usage:

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

Example error usage:

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

Popup Style Background

Popup contains a customization in Background props.

Example usage:

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

Popup Callback Function

Popup contains a callback function in button popup Callback props.

Example usage:

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