react-native-hook-notification

React Native Hook Notification

Add notifications in your React Native app. Types: success, error, warning, info, default or custom.

• Compatible with Reanimated v2.
• Compatible with Expo.
• Written in TypeScript.

Install

npm install react-native-hook-notification

or

yarn add react-native-hook-notification

Dependencies​

This library needs these dependencies to be installed in your project before you can use it:

npm install react-native-reanimated react-native-gesture-handler

or

yarn add react-native-reanimated react-native-gesture-handler

ℹ️ INFO

React Native Gesture Handler needs extra steps to finalize its installation, please follow their installation instructions.

React Native Reanimated v2 needs extra steps to finalize its installation, please follow their installation instructions.

Usage

• In the application index file:

import React from 'react';
import { NotificationContainer } from 'react-native-hook-notification';

import { Component } from './component/Component';

export default function App() {
  return (
    <>
      <Component />
      <NotificationContainer />
    </>
  );
}

• In the component:

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useNotification } from 'react-native-hook-notification';

export default function Component() {
  const notification = useNotification();

  return (
    <TouchableOpacity
      onPress={() =>
        notification.success({
          text: 'Notification test',
        })
      }
    >
      <Text>Dispatch</Text>
    </TouchableOpacity>
  );
}

Props

Property	Type	Required	Default	Description
text	string	yes		Notification text
title	string	no		Notification title
position	top-right | top-center | top-left | bottom-right | bottom-center | bottom-left	no	top-right	Notification position
theme	colored | light | dark	no	colored	Notification theme
transition	bounce | flip | fade | slide | zoom	no	bounce	Notification transition
delay	number	no	5000	Notification delay in milliseconds
showButtonClose	boolean	no	false	Show or hide close button
autoClose	boolean	no	true	Automatic closing of the notification after the delay ends
pauseOnPress	boolean	no	true	Auto close pause on hover
closeOnPress	boolean	no	false	Close on press
onPress	() => void	no		Called on Notification press
draggable	boolean	no	true	Enable or disable drag
dragDirection	x | y	no	y	Drag direction
icon	React.FunctionComponentElement	no		Render icon on left side. Obs.: Dimensions: 24x24
titleMaxLines	number	no	1	Maximum number of lines for title
textMaxLines	number	no	2	Maximum number of lines for text
xOffset	number	no	16	Offset from the X axis of the screen (in px)
customStyle	{ container?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; text?: StyleProp<TextStyle>; icon?: StyleProp<ViewStyle>; button?: StyleProp<ViewStyle>;buttonText?: StyleProp<TextStyle>;}	no		Styles for custom notificaion type

License

Developed by: André Coelho