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)