0.1.2 • Published 2 years ago
react-native-swal v0.1.2
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
npm i react-native-swalHow 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) |