React native in app notification

Viacheslav Volkov
2 min readMay 20, 2021

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 (
<App />

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(() => {
title: 'My first notification',
message: 'Hello from my first message',
icon: <FontAwesome name="check-circle" size={45} />,
onPress: () => {
}, [notification]);

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

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



Viacheslav Volkov

JS Developer from London, UK. Working with React, React Native and Typescript. My russian blog