Skip to content
📢 A react native implementation of the package SCLAlertView-Swift
Branch: master
Clone or download
rafaelmotta Feat/tests (#2)
* Basic tests

* Fixed some eslint and prettier rules

* Bump to 1.3.0

* Adjustments on code style
Latest commit 27de09a Mar 29, 2018


npm version

A pure react native javascript implementation of the package

Road Map

  • Documentation to customize styles
  • Handle orientation
  • Default images for header
  • Text Field Component
  • More transitions


  • Declarative API
  • High customizable UI
  • Built in themes inspired on bootstrap


You can try on expo:

or just check the images bellow:


yarn add react-native-scl-alert


npm install --save react-native-scl-alert


import React from 'react'
import {
} from 'react-native'

import {
} 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} />
          subtitle="Lorem ipsum dolor"
          <SCLAlertButton theme="info" onPress={this.handleClose}>Done</SCLAlertButton>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'


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


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 {} Extends the overlay view style
title PropTypes.string REQUIRED A string to render in the modal title
titleContainerStyle {} Extends the title container view style
titleStyle {} Extends the title text style
subtitle PropTypes.string REQUIRED A string to render in the modal subtitle
subtitleContainerStyle {} Extends the subtitle container view style
subtitleStyle {} Extends the subtitle text style
headerContainerStyles {} Extends the title headerContainer view style
headerInnerStyles {} 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


Name Type Default Description
children PropTypes.string or PropTypes.node REQUIRED String or react node
containerStyle {}
textStyle {}
theme PropTypes.string 'default' Check options above
onPress PropTypes.func REQUIRED Callback after user press in the button
You can’t perform that action at this time.