react-native-modal-notifier

React Native Modal Notifier

react-native-modal-notifier is a third party in-app notification package! It provides modal notification popup. There are more than one usage example;

1. Can be triggered by useEffect function
2. Can be triggered by user action
3. Can be triggered by api service data

Installation

yarn add react-native-modal-notifier

Or

npm install --save react-native-modal-notifier

Usage

Wrap your app with NotifierContainer

import { NotifierContainer } from 'react-native-modal-notifier';
const App = () => (
  <NotifierContainer>
    <HomeScreen />
  </NotifierContainer>
);

Then import useNotifier anywhere in your code/screen/components

import { useNotifier } from 'react-native-modal-notifier';

const HomeScreen = () => {
    const notifier = useNotifier();

    useEffect(() => {
        alert && notifier({
            title: alert.title,
            message: alert.message
        });
    }, [alert]);

    return (
    <TouchableHighlight
      onPress={() =>
        notifier({
          title: 'New Notification',
          message:
            'New Notification',
        })
      }>
      <Text>Set Notification</Text>
    </TouchableHighlight>
  );
};

Props of useNotifier

Prop Name	Prop Description	Data Type	Required
title	Title of the message	string	yes
message	The message of the content	string	yes
headerShown	Header visibility option	boolean	no
primaryButtonText	The text in the primary button content	string	no
primaryButtonAction	The primary button action	func	no
primaryButtonColor	The background color of the primary button	string	no