Skip to content

react-native-modal-notifier is a third party in-app notification package! It provides modal notification popup.

License

Notifications You must be signed in to change notification settings

mkilincaslan/react-native-modal-notifier

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Native Modal Notifier

npm dw platforms: ios, android license MIT

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

drawing

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

About

react-native-modal-notifier is a third party in-app notification package! It provides modal notification popup.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published