react-native-scl-alert
react-native-scl-alert copied to clipboard
📢 A react native implementation of the package SCLAlertView-Swift
react-native-scl-alert
A pure react native javascript implementation of the package https://github.com/vikmeup/SCLAlertView-Swift
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
Demo
You can try on expo: https://exp.host/@rafaelmotta021/react-native-scl-alert-demo
or just check the images bellow:
Setup
yarn add react-native-scl-alert
or
npm install --save react-native-scl-alert
Usage
import React from 'react'
import {
View,
Button,
StyleSheet
} from 'react-native'
import {
SCLAlert,
SCLAlertButton
} from 'react-native-scl-alert'
export default class App extends React.Component {
state = {
show: false
}
handleOpen = () => {
this.setState({ show: true })
}
handleClose = () => {
this.setState({ show: false })
}
render() {
return (
<View style={styles.container}>
<Button title="Show" onPress={this.handleOpen} />
<SCLAlert
theme="info"
show={this.state.show}
title="Lorem"
subtitle="Lorem ipsum dolor"
>
<SCLAlertButton theme="info" onPress={this.handleClose}>Done</SCLAlertButton>
</SCLAlert>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
})
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 |