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

Name	Description	Type	Default
title	Title of the message	string	null
message	The message of the content	string	null
headerShown	Header visibility option	boolean	true
primaryButtonText	The text in the primary button content	string	undefined
primaryButtonAction	The primary button action	func	undefined
primaryButtonColor	The background color of the primary button	string	#3a86ff
primaryButtonPosition	The position of the primary button in the notifier	center or right or left	center
type	The type of modal notifier	default or info or warning or error	default