0.1.1 • Published 4 years ago
react-native-alert-dialog v0.1.1
react-native-alert-dialog
react-native-alert-dialog
Installation
npm install react-native-alert-dialogUsage
Wrap your root component in the AlertProvider, and then call the useAlert anywhere in your app
import {
AlertProvider,
useAlert,
themes,
ThemeType,
} from 'react-native-alert-dialog';
// root component
<AlertProvider theme={mytheme}>
<App />
</AlertProvider>;
// anywhere in your app
const { alert, dismiss } = useAlert();
alert({
title: 'Hello World!',
message: 'Laboris aliqua elit officia fugiat adipisicing.',
type: 'success',
});Available Props
| name | default | description |
|---|---|---|
| mode | 'modal' | 'modal' or 'toast' |
| title | null | the title |
| message | null | the message |
| type | 'primary ' | 'primary' , 'success' , 'warning' , 'danger' |
| background | 'white' | background color |
| backdropColor | 'black' | backdrop color |
| hasBackdrop | true | has backdrop |
| radius | 10 | radius |
| position | 'center' | 'top','bottom','center' |
| align | 'center' | 'left','right','center','stretch' |
| color | null | dialog color |
| header | () => null | component to render in the header |
| autoClose | 0 | automatically close the dialog after a delay |
| buttons | [{ title: 'Done !', onPress: dismiss }] | buttons to render |
Optional: setup different headers for every dialog type
const mytheme = {
...themes.default,
props: {
...themes.default.props,
headers: {
success: <Icon name={'check'} size={50} color={'green'} />,
},
},
};
<AlertProvider theme={mytheme}></AlertProvider>;Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT