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 OneExample TwoExample Three
 examples/App.js examples/App.js examples/App.js

Example toast

Example OneExample TwoExample 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

NameDescriptionDefaultType
titleSets the main popup titleUpload completeString
typeDefines the type (Success, Warning or Error)SuccessString
textBodyDefines the text body of popupString
buttonWhether or not to display thetrueBool
buttonTextDefines the text button of popupOkString
callbackDefines the function of buttonAlert()Func
backgroundSets the backgroundColorrgba(0, 0, 0, 0.5)String
timingSets the time for the popup to close by itself5000Number
autoclosesets whether the popup will close automaticallyfalseBool

Toast Component

NameDescriptionDefaultType
titleSets the main toast titleString
textDefines the text to toastString
colorDefines the color to title, border and iconC#e1e1e1String
timingDefine your timing to close toast6sInt
iconChoose your the best icon to toastComponent

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