A simple React Native component that implements a popup UI

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 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 tag <Popup /> 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>

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

GitHub