react-native-modal-notifier

React Native Modal Notifier

react-native-modal-notifier is a third party in-app notification notifier package! It provides modal notification popup. And reachable from any screen or component after the wrap the application with container. 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
childComponent	The child component to be rendered within the modal component	JSX.Element	undefined
contentImage	The image uri or address to be rendered within the modal	ImageSourcePropType	undefined
contentImageRadius	The image radius controller	boolean	false
contentImageSize	The size of the content image	small or middle or large	middle
contentImageType	The image type of content	square or rectangle	square
autoCloseDelay	The timer of the auto close the notifier as millisecond	number	null