react-native-alert-wrapper

React-Native-Alert-Wrapper

• 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.

Props

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
        );
      }
   }

Warning:

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

Integrating with React Native

App.js

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 = () => (
  <AlertProvider
    // customAlert={SampleAlert}  Using your out-of-box custom alert component
    // customAlert={CustomAlertComponent} Using your own component
  >
    <App />
  <AlertProvider>
);

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() {
    <View>
      <Button title="Show Alert" onPress={() => this.props.alert(param1, param2)} />
    </View>
  }
}

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

TO-DO

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