react-native-customisable-alert

React Native customisable alert utility

Usage no npm install needed!

<script type="module">
  import reactNativeCustomisableAlert from 'https://cdn.skypack.dev/react-native-customisable-alert';
</script>

README



react-native-customisable-alert

This React Native simple library was built in top of react-native-modal to help you to easily customise your alerts. It works like a built in React Native Alert component but this is highly customisable. The catch of this library is that you can call it from anywhere in your code without extra components imports and variables to control it, which means a CLEANER CODE 😉!!!

Demo of react-native-customisable-alert

npm version npm downloads npm licence

Installation

To install the latest version of react-native-customisable-alert you only need to run:

npm install --save react-native-customisable-alert

or

yarn add react-native-customisable-alert

Try it out

You can find the examples above on src/examples

Basic Usage

This component was meant to be used globally, so you only need to import it once in your App.js:

import React from "react";
import { View } from "react-native";
import CustomisableAlert from "react-native-customisable-alert";

export default class App extends React.Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                ... all your stuff
                <CustomisableAlert
                    titleStyle={{
                        fontSize: 18,
                        fontWeight: "bold"
                    }}
                />
            </View>
        );
    }
}

After that all you need is to call showAlert or closeAlert methods from anywhere in your app.

Show some alert

To fire an alert just call showAlert(obj) as below:

import React from "react";
import { View, Button } from "react-native";

import { showAlert } from "react-native-customisable-alert";

class OtherScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Button
          onPress={() => {
            showAlert({
              title="Are you sure?"
              message: "All your files will be deleted!",
              alertType: 'warning',
              onPress: () => console.log('files deleted!'),
            });
          }}
        />
      </View>
    );
  }
}

When you call showAlert you should pass some attributes to customize your alert:

Property Type Description
title string The title of your alert
message string The message of your alert
btnLabel string Button label for the one button alert ('error' or success' alertTypes), default='Ok'
leftBtnLabel string Left button label for two buttons alerts ('warning' alertTypes), default='Cancel'
customAlert React.Component Define a custom alert (this will replace the whole thing!)
customIcon React.Component Set a custom icon for your alert. If you want no icon in your alert use customIcon:'none'
alertType 'error', 'success', 'warning', 'custom' Define the type of the alert
onPress (): void Button pressed callback (one button alerts or right button in a two buttons alerts)
onDismiss (): void Close alert button callback (left button in a two buttons alerts)
animationIn Animation Overhides global animation for an entrance animation
animationOut Animation Overhides global animation for an exit animation
dismissable boolean Overhides global dismissable behavior. If true it closes the alert when touch outside, default false
modalProps ModalProps Overhides global modal props from react-native-modal

All alerts are set to close automatically when any button pressed, but for custom and warning alertTypes you need close it programatically as the example below:

import React from "react";
import { View, Button } from "react-native";

import { showAlert, closeAlert } from "react-native-customisable-alert";

class OtherScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <Button
                    onPress={() => {
                        showAlert({
                            customAlert: (
                                <View>
                                    <Text>Could you tell us your name?</Text>
                                    <TextInput />
                                    <View>
                                        <Button
                                            title="Cancel"
                                            onPress={() => closeAlert()}
                                        />
                                        <Button
                                            title="Send"
                                            onPress={() => {}}
                                        />
                                    </View>
                                </View>
                            )
                        });
                    }}
                />
            </View>
        );
    }
}

Global Props

You can set a default style for all your alerts with the following:

Property Type Description
defaultTitle string Set a default title for all alerts you call, default='Title'
backdropStyle ViewStyle Style for the alert backdrop
alertContainerStyle ViewStyle Style for the alert container
titleStyle TextStyle Style for the title
textStyle TextStyle Style for the message
btnStyle TouchableOpacityProps Style for all buttons or one button alert type
btnLeftStyle TouchableOpacityProps Style for the left button ('warning' alertTypes), overrides btnStyle
btnRightStyle TouchableOpacityProps Style for the right button ('warning' alertTypes), overrides btnStyle
btnLabelStyle TextStyle Style for the label of the buttons
btnLeftLabelStyle TextStyle Style for the left label button
btnRightLabelStyle TextStyle Style for the right label button
defaultLeftBtnLabel string Set a default label for the left button, default='Cancel'
defaultRightBtnLabel string Set a default label for the right button, default='Ok'
defaultType 'error' | 'success' | 'warning' | 'custom' Set a default type for your alert, default='error'
animationIn Animation Set a default entrance animation for your alert
animationOut Animation Set a default exit animation for your alert
dismissable boolean If true alert auto dismiss when touch outside, default=false
defaultWarningIcon React.Component Set a default icon for you warning messages
defaultSuccessIcon React.Component Set a default icon for you success messages
defaultErrorIcon React.Component Set a default icon for you error messages
modalProps ModalProps Set a global modal props from react-native-modal

License

MIT