popup-ui-new v1.0.0

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

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