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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Story of ^ and ~ in `package.json`

How to create themes for your Angular 7 apps using CSS Variables

NOTE: Starting with Flux

Absinthe Subscriptions with ReasonML and Urql

Dark mode with 1(or few) line of CSS 🌓

Layout Animations in React Native

Angular Routing — Reusing common layout for pages from different modules

Scopes in JavaScript: A Simple Explanation with Simple Examples

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Viacheslav Volkov

Viacheslav Volkov

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

More from Medium

React Native: The Basics

Top Audio Player Library for React Native Apps In 2022

Benefits of using React for Business

My First React Native Experience