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

--

--

Viacheslav Volkov

JS Developer from London, UK. Working with React, React Native and Typescript. My russian blog https://vexell.ru