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

React-Native-InApp-Notifications

GitHub

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