Show internal notifications for react native application with TypeScript

React Native InApp Notifications

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

GitHub

https://github.com/VeXell/react-native-internal-notification