Home

Awesome

react-native-scl-alert

npm version

A pure react native javascript implementation of the package https://github.com/vikmeup/SCLAlertView-Swift

Road Map

Features

Demo

You can try on expo: https://exp.host/@rafaelmotta021/react-native-scl-alert-demo

or just check the images bellow:

<p align="center"> <img src="https://raw.githubusercontent.com/rafaelmotta/react-native-scl-alert/master/demo-1.jpeg" height="500" /> <img src="https://raw.githubusercontent.com/rafaelmotta/react-native-scl-alert/master/demo-2.jpeg" height="500" /> <img src="https://raw.githubusercontent.com/rafaelmotta/react-native-scl-alert/master/demo-3.jpeg" height="500" /> </p>

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:

SCLAlert

NameTypeDefaultDescription
showPropTypes.boolfalseShow the alert
cancellablePropTypes.booltrueIf user press in the overlay, will trigger onRequestClose func
onRequestClosePropTypes.funcnullTrigger a function asking to close the alert
slideAnimationDurationPropTypes.number250Duration in ms of the alert animation
overlayStyleViewPropTypes.style{}Extends the overlay view style
titlePropTypes.stringREQUIREDA string to render in the modal title
titleContainerStyleViewPropTypes.style{}Extends the title container view style
titleStyleText.propTypes.style{}Extends the title text style
subtitlePropTypes.stringREQUIREDA string to render in the modal subtitle
subtitleContainerStyleViewPropTypes.style{}Extends the subtitle container view style
subtitleStyleText.propTypes.style{}Extends the subtitle text style
headerContainerStylesViewPropTypes.style{}Extends the title headerContainer view style
headerInnerStylesViewPropTypes.style{}Extends the title headerInner view style
headerIconComponentPropTypes.nodenullA component to render inside the header
childrenPropTypes.nodenullCustom content. Put here buttons and text inputs

SCLAlertButton

NameTypeDefaultDescription
childrenPropTypes.string or PropTypes.nodeREQUIREDString or react node
containerStyleViewPropTypes.style{}
textStyleText.propTypes.style{}
themePropTypes.string'default'Check options above
onPressPropTypes.funcREQUIREDCallback after user press in the button