react-native-popup-ui

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 popup-ui

If using npm:

npm i popup-ui

Usage

import { View, TouchableOpacity, Text } from 'react-native'
import { Root, Popup } from 'popup-ui'

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 'popup-ui')
    <Root>
        <View>
            <TouchableOpacity
                onPress={() => 
                    Toast.show({
                        title: 'User created',
                        text: 'Your user was successfully created, use the app now.',
                        color: '#2ecc71'
                    })
                }
            >
                <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 | | icon | use costum icon | false | Component |

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 |

Contributing

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

Author

Rafael Augusto | https://linkedin.com/in/rafaelaugustos/

Roadmap

• Toast
• Alert/Confirm
• Create a function to close toast with gesture

License

MIT