react-native-customisable-alert v0.1.20

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:

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:

License

MIT