rnp

react-native-popup-confirm-toast

With react native, you can create a popup message, modifiable component area. Cheer up your app with toast (top, bottom) messages. (Android & iOS) Now we have a new feature "bottom-sheet-drawer" (Android & iOS)

Showing:

Popularity

Downloads/wk

137

GitHub Stars

9

Maintenance

Last Commit

13d ago

Contributors

3

Package

Dependencies

0

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-native-popup-confirm-toast

platforms npm npm

github issues github closed issues Issue Stats

Release notes(2.0.3) 🐧 🐐

  • New feature(SPSheet) 🎉
  • SPSheet timing parameters
  • Popup Component (bounciness add)

Example Bottom Sheet

Example 1Example 2Example 3

Example Popup Message

Example MessageExample Confirm MessageExample Message AutoCloseExample Custom Body Component

Example Toast Message

Example Toast TopExample Toast Bottom

Usage

Installation

yarn add react-native-status-bar-height
or
npm install react-native-status-bar-height
yarn add react-native-popup-confirm-toast
or
npm install react-native-popup-confirm-toast

Example Bottom Sheet

import { Root, SPSheet } from 'react-native-popup-confirm-toast'

const component = (props) => {
    //hook or class 
    return null;
    
    props.spSheet.hide();
};

<Root>
    <View>
        <TouchableOpacity
            onPress={() => {
                const spSheet = SPSheet;
                spSheet.show({
                    component: () => component({...this.props, spSheet}),
                    dragFromTopOnly: true,
                    onCloseComplete: () => {
                        alert('onCloseComplete');
                    },
                    onOpenComplete: () => {
                        alert('onOpenComplete');
                    },
                    height:260
                });
            }
        >
            <Text>Open Popup Message</Text>
        </TouchableOpacity>
    </View>
</Root>

Example Message

import { Root, Popup } from 'react-native-popup-confirm-toast'
<Root>
    <View>
        <TouchableOpacity
            onPress={() =>
              Popup.show({
                type: 'success',
                title: 'Dikkat!',
                textBody: 'Mutlak özgürlük, kendi başına hiçbir anlam ifade etmez. ',
                buttonText: 'Tamam',
                callback: () => Popup.hide()
              })
            }
        >
            <Text>Open Popup Message</Text>
        </TouchableOpacity>
    </View>
</Root>

Example Confirm Message

import { Root, Popup } from 'react-native-popup-confirm-toast'
<Root>
    <View>
        <TouchableOpacity
            onPress={() =>
              Popup.show({
                type: 'confirm',
                title: 'Dikkat!',
                textBody: 'Mutlak özgürlük, kendi başına hiçbir anlam ifade etmez. ',
                buttonText: 'Tamam',
                confirmText:'Vazgeç',
                callback: () => Popup.hide()
              })
            }
        >
            <Text>Open Popup Confirm Message</Text>
        </TouchableOpacity>
    </View>
</Root>

Example Custom Body Component

import { Root, Popup } from 'react-native-popup-confirm-toast'
//hooks or class component
const bodyComponent = (props) => {

return null;
}

<Root>
    <View>
        <TouchableOpacity
            onPress={() =>
                const popup = Popup;
                popup.show({
                    type: 'confirm',
                    textBody: 'Hesabınızın silinme işlemini onaylamak için şifrenizi giriniz.',
                    bodyComponent: () => bodyComponent({...props,popup}),
                    confirmText: 'Vazgeç',
                    iconEnabled: false,
                    descTextStyle: GlobalAlertModalStyle.descTextStyle,
                    confirmButtonTextStyle: GlobalAlertModalStyle.confirmButtonTextStyle,
                    buttonEnabled: false,
                });
            }
        >
            <Text>Open Popup Confirm Message</Text>
        </TouchableOpacity>
    </View>
</Root>

Toast

import { Root, Toast } from 'react-native-popup-confirm-toast'
    <Root>
        <View>
            <TouchableOpacity
                onPress={() => 
                      Toast.show({
                        title: 'Dikkat!',
                        text: 'Mutlak özgürlük, kendi başına hiçbir anlam ifade etmez.',
                        color: '#702c91',
                        timeColor: '#440f5f',
                        timing: 5000,
                        icon: <Icon name={'check'} color={'#fff'} size={31}/>,
                        position: 'bottom',
                    })
                }
            >
                <Text>Open Toast</Text>
            </TouchableOpacity>
        </View>
    </Root>

Documentation

SPSheet

KeyTypeDescriptionDefault
backgroundstringrgba(0, 0, 0, 0.5)
heightnumberauto height (min: 250)250
durationnumberanimation time used when opening250(ms)
closeDurationnumberanimation time used when closing300(ms)
closeOnDragDownbooleanUse drag with motion to close the windowtrue
closeOnPressMaskbooleanpress the outside space to close the windowtrue
closeOnPressBackbooleanPress the back key to close the window (Android only)true
dragTopOnlybooleanuse only the top area of the draggable icon to close the windowfalse
componentcomponent(hook or class)custom modal component containernull
onOpenCompletefunctionworks after the window is openednull
onCloseCompletefunctionworks after window is closednull
customStylesobjectcustomStyles: { draggableIcon: {}, container: {}}{}
timingnumberUse this parameter for automatic shutdown.0(ms)
KeyTypeDescriptionDefault
titlestringfalse
textBodystringfalse
bodyComponentcomponent(hook or class)custom modal component containernull
typeenumenum(success, danger, warning, confirm)warning
buttonTextstringOk
confirmTextstringCancel
callbackfunctionok button presspopupHidden
backgroundstringrgba(0, 0, 0, 0.5)
timingnumber0 > autoClose0
iconEnabledbooleantrue
iconrequireUrlrequire('../assets/{type}.png')
modalContainerStyleobject{ width: '90%',backgroundColor: '#fff', borderRadius: 8, alignItems: 'center', overflow: 'hidden', position: 'absolute'}}
buttonContentStyleobject{}
okButtonStyleobject{backgroundColor: '#702c91'}
confirmButtonStyleobjectdefault
okButtonTextStyleobjectdefault
confirmButtonTextStyleobjectdefault
titleTextStyleobjectdefault
descTextStyleobjectdefault
bouncinessnumber15

Toast

KeyTypeDescriptionDefault
titlestringfalse
textstringDescriptionfalse
titleTextStyleobject{color: '#fff',fontWeight: 'bold',fontSize: 16}
descTextStyleobject{marginTop: 5,fontSize: 13,color: '#fff', fontWeight: '400',}
backgroundColorstring#1da1f2
timeColorstringtime backgroundColor#1c6896
positionenumparameters => top, bottombottom
iconcomponent(react-native-vector-icons or component)null
timingnumber5000 ms

Methods

Component NameMethod NameExampleDescription
SPSheetshowconst spSheet = SPSheet; spSheet.show(config);
SPSheethideconst spSheet = SPSheet; spSheet.hide();
Popupshowconst popup = Popup; popup.show(config);
Popuphideconst popup = Popup; popup.hide();
Toastshowconst toast = Toast; toast.show(config);
Toasthideconst toast = Toast; toast.hide();

Author

SekizliPenguen, Inspired by "popup-ui"

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100