react-native-scl-alert
A pure react native javascript implementation of the package.
Road Map
- [x] Documentation to customize styles
- [ ] Handle orientation
- [x] Default images for header
- [ ] Text Field Component
- [ ] More transitions
Features
- Declarative API
- High customizable UI
- Built in themes inspired on bootstrap



Setup
yarn add react-native-scl-alert
or
npm install --save react-native-scl-alert
Usage
Demo
You can customized the look and feel of this library the way you want, but, if you prefer, we ship 6 themes for you:
default
inverse
success
info
danger
warning
SCLAlert
Name | Type | Default | Description |
---|---|---|---|
show | PropTypes.bool | false | Show the alert |
cancellable | PropTypes.bool | true | If user press in the overlay, will trigger onRequestClose func |
onRequestClose | PropTypes.func | null | Trigger a function asking to close the alert |
slideAnimationDuration | PropTypes.number | 250 | Duration in ms of the alert animation |
overlayStyle | ViewPropTypes.style | {} | Extends the overlay view style |
title | PropTypes.string | REQUIRED | A string to render in the modal title |
titleContainerStyle | ViewPropTypes.style | {} | Extends the title container view style |
titleStyle | Text.propTypes.style | {} | Extends the title text style |
subtitle | PropTypes.string | REQUIRED | A string to render in the modal subtitle |
subtitleContainerStyle | ViewPropTypes.style | {} | Extends the subtitle container view style |
subtitleStyle | Text.propTypes.style | {} | Extends the subtitle text style |
headerContainerStyles | ViewPropTypes.style | {} | Extends the title headerContainer view style |
headerInnerStyles | ViewPropTypes.style | {} | Extends the title headerInner view style |
headerIconComponent | PropTypes.node | null | A component to render inside the header |
children | PropTypes.node | null | Custom content. Put here buttons and text inputs |
SCLAlertButton
Name | Type | Default | Description |
---|---|---|---|
children | PropTypes.string or PropTypes.node | REQUIRED | String or react node |
containerStyle | ViewPropTypes.style | {} | |
textStyle | Text.propTypes.style | {} | |
theme | PropTypes.string | 'default' | Check options above |
onPress | PropTypes.func | REQUIRED | Callback after user press in the button |