React Native Alert Wrapper to bind alert component throught the app.

Usage no npm install needed!

<script type="module">
  import reactNativeAlertWrapper from '';



  • A Wrapper that enables you to call your alert from anywhere in the app
  • Removes the pain of writing your alert views on each rn-screen

Note: This project uses react-native-dropdownalert as a default alert component. Have a look at it. :blush:

Platform Support

Supports both Android and iOS.


The following props are applicable for the AlertProvider wrapper.

Prop Type Optional Default Description
customAlert any Yes null Custom Alert Component

Guide to write custom alert component

Basic Template

   class CustomAlertComponent extends PureComponent { // PureComponent - Optimal Performance
      // Required
      alert = (...params) => {
        // Logic to trigger alert

      // Required
      alertWithType = (...params) => {
        // Similar to alert method. Could be used to have different alert types

      render() {
        return (
          // View definitions


CustomAlertComponent class requires both alert and alertWithType methods to be defined. Otherwise it will raise undefined error

Integrating with React Native


import React from 'react';
import { AlertProvider, SampleAlert } from 'react-native-alert-wrapper';

// CustomComponent
import CustomAlertComponent from './CustomAlertComponent'; // Wherever you keep it

const App = () => (
  // ...  

const AppWithAlert = () => (
    // customAlert={SampleAlert}  Using your out-of-box custom alert component
    // customAlert={CustomAlertComponent} Using your own component
    <App />

export default AppWithAlert;

Usage inside a Screen Component

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

import { connectAlert } from 'react-native-alert-wrapper';

class Home extends Component {
  state = {}

  render() {
      <Button title="Show Alert" onPress={() => this.props.alert(param1, param2)} />

export default connectAlert(Home); // with make alert and alertWithType props available to Home


  • To generalize code for React & React-native
  • QA