React native in app notification

Sometimes you want to show something to users in your app with small notification. For example i use it to show information how many coins user earn in the game or any other helpful information about purchases. I tried to find small simple library on Typescript and did not find and decided to write and publish my own library.

Have a look on my Typescript component to show internal notifications for react native application. To add it to your project you can just run this command.

yarn add react-native-internal-notification

Then wrap your app or root component with Notification provider. It should be root container because my component uses react context to provide access to child components.

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

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

After that you can show notification from any of 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>
        </>
    );
}

I prefer to use SVG icons from expo because it library has a lot of them for any purposes.

Result you can see on this gif image