react-native-swal

This library is really simple popup modal same as Sweet Alert in React Native.

React-native-swal popup for a second(It can be cutomize) and closed.

Document

• Installation
• How to use
• Properties

Installation

npm i react-native-swal

How to use

Import react-native-swal.

import Swal from 'react-native-swal';

Add the source code below to where you want to use it.

return (
     <Swal
        swal={swal}
        setSwal={setSwal}
        text={text}
        backgroundcolor="#225"
        color="white"
        positionFromBottom={80}
        fontsize={16}
        touchOutSideClose={true}
        duration={3000}
        textStyle={{fontFamily: 'NotoSans'}}
        button={true}
        buttonText={'hello'}
        btnFunction={() => setMode(!mod)}
        btnStyle={{color: 'red'}}
        popup={false}
      />
);

Properties

Below are react-native-swal specific properties.

| Prop | required | Type | Description | | ------------------------------ | -------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | swal | O | boolean | modal's state | | setSwal | O | (open: boolean) => void | modal's setState | | text | O | string |text you want to show | | backgroundcolor | X | string | background color for swal (default : "black") | | color | X | string | text color for swal (default : "white") | | positionFromBottom | X | number | set the position from bottom (default : 80) | | fontsize | X | number | text font size (default : 16) | | touchOutSideClose | X | boolean | If you choose this props as true this modal is closed when you click outside of modal (default : false) | | popup | X | boolean |set swal is pop up and gone or not(default : true) | | duration | X | number |set how long swal opened (default : 2000(2s)(popup Prop has to be true))| | textStyle | X | {} |set text style in modal-> main text| | button | X | boolean | add additional button to do some function when you click it| | buttonText | X | string | set button's text(it shows when button Prop is true)| | btnStyle | X | {} |set button's textStyle underline is default (it shows when button Prop is true)| | btnFunction | X | () => void |set function when you hit the button(it shows when button Prop is true)|