react-native-internal-notification
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

React Native InApp Notifications npm version

Typescript component to show internal notifications for react native application

Install

yarn add react-native-internal-notification

Props

Name Description
title Notification title
message Message
onPress The callback
icon React component passed no notification. For example you can use @expo/vector-icons
showingTime Timeout in ms how long notification show be visible on the screen
color Background color for notification

Usage

Step 1.

Wrap your app or root component with Notification provider

import { NotificationProvider } from 'react-native-internal-notification';
import App from './App';

const Application = function () {
    return (
        <NotificationProvider>
            <App />
        </NotificationProvider>
    );
};

Step 2.

Call show notification from any your components

import React, { useCallback } from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';

import { useNotification } from 'react-native-internal-notification';

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

    const handleNotificationTestClick = useCallback(() => {
        notification.showNotification({
            title: 'My first notification',
            message: 'Hello from my first message',
            icon: <FontAwesome name="check-circle" size={45} />,
            onPress: () => {
                alert('Pressed');
            },
        });
    }, [notification]);

    return (
        <>
            <TouchableOpacity onPress={handleNotificationTestClick}>
                <Text>Show notification</Text>
            </TouchableOpacity>
        </>
    );
}

Small Demo and How it works

How react-native-internal-notification works

Package Sidebar

Install

npm i react-native-internal-notification

Weekly Downloads

28

Version

1.0.7

License

MIT

Unpacked Size

18.4 kB

Total Files

14

Last publish

Collaborators

  • vexell