seniv/react-native-notifier

Fast and simple in-app notifications for React Native

react-native-notifier

Fast, simple, and customizable in-app notifications for React Native

Requirements

This library uses react-native-gesture-handler, a perfect library for swipes, and other gesture events.

Please check their installation guide to install it properly: https://docs.swmansion.com/react-native-gesture-handler/docs/installation

Installation

yarn add react-native-notifier

Or

npm install --save react-native-notifier

Usage

Wrap your app with NotifierWrapper

import { NotifierWrapper } from 'react-native-notifier';

const App = () => (
  <NotifierWrapper>
    <Navigation />
  </NotifierWrapper>
);

Then call Notifier.showNotification() anywhere in code

import { Notifier, Easing } from 'react-native-notifier';

Notifier.showNotification({
  title: 'John Doe',
  description: 'Hello! Can you help me with notifications?',
  duration: 0,
  showAnimationDuration: 800,
  showEasing: Easing.bounce,
  onHidden: () => console.log('Hidden'),
  onPress: () => console.log('Press'),
  hideOnPress: false,
});

---

Or add NotifierRoot at end of your App.js component. With this approach you can show notification using reference to the NotifierRoot.

Note that NotifierRoot should be the last component to display notifications correctly. Notifier.showNotification is also available.

import { NotifierRoot } from 'react-native-notifier';

function App() {
  const notifierRef = useRef();
  return (
    <>
      <Button
        title="Show Notification"
        onPress={() => notifierRef.current?.showNotification({ title: 'Using refs' })}
      />
      <NotifierRoot ref={notifierRef} />
    </>
  );
}

All props passed to NotifierWrapper or NotifierRoot will be used as default params of showNotification function. This can be useful to set default Component param.

API

showNotification

Notifier.showNotification(params: object);

Show notification with params.

params

Name	Type	Default	Description
title	String	null	Title of notification. Passed to Component.
description	String	null	Description of notification. Passed to Component.
duration	Number	3000	Time after notification will disappear. Set to 0 to not hide notification automatically
Component	Component	NotifierComponents.Notification	Component of the notification body. You can use one of the built-in components, or your custom component.
componentProps	Object	{}	Additional props that are passed to Component. See all available props of built-in components in the components section.
containerStyle	Object|Function	null	Styles Object or a Function that will receive translateY: Animated.Value as first parameter and should return Styles that will be used in container. Using this parameter it is possible to create your own animations of the notification.
containerProps	Object	{}	Props of Animated Container
queueMode	String	'reset'	Determines the order in which notifications are shown. Read more in the Queue Mode section.
swipeEnabled	Boolean	true	Can notification be hidden by swiping it out
animationDuration	Number	300	How fast notification will appear/disappear
showAnimationDuration	Number	animationDuration || 300	How fast notification will appear.
hideAnimationDuration	Number	animationDuration || 300	How fast notification will disappear.
easing	Easing	null	Animation easing. Details: https://reactnative.dev/docs/easing
showEasing	Easing	easing || null	Show Animation easing.
hideEasing	Easing	easing || null	Hide Animation easing.
onShown	() => void	null	Function called when entering animation is finished
onStartHiding	() => void	null	Function called when notification started hiding
onHidden	() => void	null	Function called when notification completely hidden
onPress	() => void	null	Function called when user press on notification
hideOnPress	Boolean	true	Should notification hide when user press on it
swipePixelsToClose	Number	20	How many pixels user should swipe-up notification to dismiss it
swipeEasing	Easing	null	Animation easing after user finished swiping
swipeAnimationDuration	Number	200	How fast should be animation after user finished swiping
translucentStatusBar	Boolean	false	Add additional top padding that equals to StatusBar.currentHeight. Android Only.

hideNotification

Notifier.hideNotification(onHiddenCallback?: (result: Animated.EndResult) => void);

Hide notification and run callback function when notification completely hidden.

clearQueue

Notifier.clearQueue(hideDisplayedNotification?: boolean);

Clear notifications queue and optionally hide currently displayed notification. Might be useful to run after logout, after which queued notifications should not be displayed.

Queue Mode

Queue mode is used to define the order in which the notification appears in case other notifications are being displayed at the moment.

For example, if you have some important information like chat messages and you want the user to see all the notifications, then you can use standby mode. Or if you want to display something like an error message, then you can use reset mode.

By default, reset mode is used, which means every new notification clears the queue and gets displayed immediately.

In most cases, you will probably use only reset or standby modes.

All possible modes:

Mode	Effect
reset	Clear notification queue and immediately display the new notification. Used by default.
standby	Add notification to the end of the queue.
next	Put notification in the first place in the queue. Will be shown right after the current notification disappears.
immediate	Similar to next, but also it will hide currently displayed notification.

Components

Currently, there are 2 components out of the box. If none of them fits your needs, then you can easily create your Custom Component.

NotifierComponents.Notification

Perfect for something like chat messages and notifications like "Someone left a comment". This component is used by default.

import { Notifier, NotifierComponents } from 'react-native-notifier';

Notifier.showNotification({
  title: 'Check this image!',
  description: 'Cool, right?',
  Component: NotifierComponents.Notification,
  componentProps: {
    imageSource: require('./react.jpg'),
  },
});

Available params:

Name	Type	Default	Description
title	String	null	Title of notification.
description	String	null	Description of notification.
componentProps.titleStyle	TextStyle	null	The style to use for rendering title.
componentProps.descriptionStyle	TextStyle	null	The style to use for rendering description.
componentProps.imageSource	Object	null	Passed to <Image /> as source param.
componentProps.imageStyle	ImageStyle	null	The style to use for rendering image.
componentProps.containerStyle	ViewStyle	null	The style to use for notification container.
componentProps.ContainerComponent	Component	SafeAreaView	A container of the component. Set it in case you use different SafeAreaView than the standard
componentProps.maxTitleLines	number	null	The maximum number of lines to use for rendering title.
componentProps.maxDescriptionLines	number	null	The maximum number of lines to use for rendering description.

NotifierComponents.Alert

Perfect to use as a system alerts, like "Something went wrong" or "Operation was succeed".

import { Notifier, NotifierComponents } from 'react-native-notifier';

Notifier.showNotification({
  title: 'The request was failed',
  description: 'Check your internet connection, please',
  Component: NotifierComponents.Alert,
  componentProps: {
    alertType: 'error',
  },
});

Available params:

Name	Type	Default	Description
title	String	null	Title of notification.
description	String	null	Description of notification.
componentProps.titleStyle	TextStyle	null	The style to use for rendering title.
componentProps.descriptionStyle	TextStyle	null	The style to use for rendering description.
componentProps.alertType	String	'success'	Background color will be changed depending on the type. Available values: error(red), success(green), warn(orange) and info(blue).
componentProps.backgroundColor	String	null	While the background of the alert depends on alertType, you can also set the other color you want.
componentProps.textColor	String	'white'	Color of title and description.
componentProps.ContainerComponent	Component	SafeAreaView	A container of the component. Set it in case you use different SafeAreaView than the standard
componentProps.maxTitleLines	number	null	The maximum number of lines to use for rendering title.
componentProps.maxDescriptionLines	number	null	The maximum number of lines to use for rendering description.

Custom Component

To customize look of the notification you can pass your own Component to showNotification function.

This makes customization much simpler than passing "style" params. With custom components you can make notification look exactly like you want.

This component will receive props title, description and anything else that you pass to componentProps object when calling showNotification.

Example

import React from 'react';
import { StyleSheet, View, Text, SafeAreaView } from 'react-native';

const styles = StyleSheet.create({
  safeArea: {
    backgroundColor: 'orange',
  },
  container: {
    padding: 20,
  },
  title: { color: 'white', fontWeight: 'bold' },
  description: { color: 'white' },
});

const CustomComponent = ({ title, description }) => (
  <SafeAreaView style={styles.safeArea}>
    <View style={styles.container}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.description}>{description}</Text>
    </View>
  </SafeAreaView>
);

// ...

// Then show notification with the component

Notifier.showNotification({
  title: 'Custom',
  description: 'Example of custom component',
  Component: CustomComponent,
});

Custom Animations

It is easy to create your own animation using containerStyle param.

When you pass a function as containerStyle param, it will receive a translateY Animated Value as first parameter. This Animated Value is a Driver of all Animations in this library and varies between -1000(notification completely hidden) and 0 (notification is shown). By default this value is used as a Y position of the Notification.

So when you call showNotification — this value starts changing from -1000 to 0 and when the notification is starts hiding — the value is changing from 0 to -"height of the component"+50 (or -200, depending what is bigger) and when animation is finished, the values will be set to -1000 (just to make sure that the notification is completely hidden).

You need to remember three points of the animated value:

1. -1000 - Notification completely hidden;
2. -200 - Most likely notification is still hidden, but will be visible soon (depending on height of the notification);
3. 0 - Notification is shown.

I know, this all is complicated, so here is a Code Example with combination of scaling and transition:

const getContainerStyleWithTranslateAndScale = (translateY: Animated.Value) => ({
  transform: [
    {
      // this interpolation is used just to "clamp" the value and didn't allow to drag the notification below "0"
      translateY: translateY.interpolate({
        inputRange: [-1000, 0],
        outputRange: [-1000, 0],
        extrapolate: 'clamp',
      }),
      // scaling from 0 to 0.5 when value is in range of -1000 and -200 because mostly it is still invisible,
      // and from 0.5 to 1 in last 200 pixels to make the scaling effect more noticeable.
      scale: translateY.interpolate({
        inputRange: [-1000, -200, 0],
        outputRange: [0, 0.5, 1],
        extrapolate: 'clamp',
      }),
    },
  ],
});

Notifier.showNotification({
  title: 'Custom animations',
  description: 'This notification is moved and scaled',
  containerStyle: getContainerStyleWithTranslateAndScale,
})

Code from example above should work great on both Android and iOS.

But if you will animate opacity style with component that have shadows (such as NotifierComponents.Notification) you may notice that on Android shadows doesn't animate properly. To fix this problem, you need to use containerProps parameter and pass needsOffscreenAlphaCompositing: true to it. Details: RN's Repository Issue

const animatedContainerProps = isAndroid ? { needsOffscreenAlphaCompositing: true } : undefined;
// ...
Notifier.showNotification({
  title: 'Custom animations',
  description: 'This notification is moved and scaled',
  containerStyle: getContainerStyleWithTranslateAndScale,
  containerProps: animatedContainerProps,
})

Keep in mind that this library uses React Native's Animated library with Native Driver turned on, and the current version of React Native has a limited list of style properties that can be animated. Here you can view list of styles that can be animated.

Also you can see the code of all Animations from Example GIF. Feel free to copy those animations to your codebase and play with them.

Troubleshooting

You might notice that some animations such as zoom in/out(using scale param) might work incorrectly on iOS and instead of just "scaling" component also moves up and down. That is because of padding that was added by SafeAreaView. This behavior can be fixed by moving safe area inset from component to container, like this:

Notifier.showNotification({
  title: 'Zoom In/Out Animation',
  containerStyle: (translateY: Animated.Value) => ({
    // add safe area inset to the container
    marginTop: safeTopMargin,
    // ...
  }),
  // replace SafeAreaView with View
  componentProps: {
    ContainerComponent: View,
  },
})

This behavior will be fixed in feature releases.

Using with react-native-navigation

If you are using react-native-navigation, this issue might be helpful to use notifier with native-navigation: #16

If you have any solutions or improvements in how to use notifier with native-navigation, then feel free to write comments in that thread!

Troubleshooting

PanGestureHandler must be used as a descendant of GestureHandlerRootView

Check this comment: #85 (comment)

License

MIT

react-native-notifier's Issues

BackgroundColor only starts under StatusBar on Android with translucentStatusBar = true

When using the translucentStatusBar on Android, the background color / component, starts underneath the StatusBar creating this weird looking notification (see below). Is there any way to make it similar to iOS, where the backgroundColor / component starts from the top but the content of the notification is still underneath the StatusBar?

react-native-notifier onpress dont work

Hello
When use examples Don't Work And Don't Show notifier
use This Code 👍
<View style={{ flex: 1 }}>
<Button
title="Long Text"
onPress={() =>
Notifier.showNotification({
title: 'New request',
duration: 6000,
description:
'You just got new incoming request from John Doe, and this is a long description',
})
}
/>

[Android] SwipeEnabled not working and onPress not triggered on first press

    Notifier.showNotification({
            title: 'John Doe',
            description: 'Hello! Can you help me with notifications?',
            duration: 0,
            showAnimationDuration: 350,
            hideOnPress: true,
            swipeEnabled: true,
            onPress: onPress,
        });

"react-native": "0.65.1",
"react-native-notifier": "^1.7.1",
"react-native-gesture-handler": "^1.10.3",
"@react-navigation/bottom-tabs": "^6.0.7",
"@react-navigation/drawer": "^6.1.6",
"@react-navigation/material-top-tabs": "^6.0.4",
"@react-navigation/native": "^6.0.4",
"@react-navigation/stack": "^6.0.9",

Type error in SafeContainer

Hi, thank you for your amazing package)

After upgrade react and react-native I get a type error: "Property 'removeEventListener' does not exist on type 'Dimensions'" in SafeContainer.

react: 18.1.0
react-native: 0.70.5

Large alert messages not dismissed correctly

If the content of the alert messages is too much, the alert doesn't dismiss completely and blocks the screen. This is the final state of alert in one case:

Repro: Create an alert with a long message with alert component and other default settings and try to dismiss it.

Use context

Hey, I'm running into an issue where I want to use multiple notificationwrappers. one of them is nested inside of another screen. However, it seems that rather than use react context, this lib just uses a single wrapper at the root of the app and renders from there. The issue with this is that it renders under modals. I tried adding another wrapper inside the modal, but this did nothing, since it's not a context provider, which would take precedent over any parent providers.

Checking when notification is open

Please tell me how I can catch the event when the notification is open?

notification can not be hidden by swiping it out in Android

version 1.3.2 also has this problem.

Feature request: custom font style for title and description

Hey

Thanks for your great lib! It's awesome ❤️
I just want to change the title and description style. I know there is a way to render CustomComponent but I guess it's overworking!

I created a PR and hope you don't prefer the CustomComponent way 😁

It's possible to display the notification from bottom tab bar (react navigation)

Like YouTube music

RPReplay_Final1638531412.mov

Feature request: Allow to override animation values

Hi, thanks for creating this awesome library :)

I'm building an app for mobile/web using expo. Currently experimenting with having a different config for showing notifications on desktop, e.g: making it appear from the bottom instead from the top of the screen.

In order to do so, I think it would require to:

1. Override this.hiddenComponentValue here. That is to set it to be on the bottom of the screen
2. Pass a custom value to showNotificationto override the Animation's `MAX_TRANSLATE_Y. That is to make it move upwards, instead of downwards.

Not sure if I'm missing anything, if that sounds reasonable I can try land a PR myself, but would be good to get some feedback on this before doing so.

Feature request: iOS: pull down and then swipe up to dismiss

On iOS, it's very common (at least on my muscle memory) to be able to pull down a notification and then, while holding the finger on the screen, swipe it back up to dismiss it.

Would it be possible to add this behavior to the notification? Pulling it down and seeing it not moving at all makes it a little bit uncomfortable UX on iOS.

Btw, congrats on a great lib!

createNativeStackNavigator vs createStackNavigator results in different stacking context

It appears that when using createNativeStackNavigator from react-navigation and using a modal presentation, the resulting z-index position of any notification appears hidden beneath the modal. You can see in the screenshot, the red in the background is the notification, however it is behind the modal. This only occurs with createNativeStackNavigator, but this is the preferred method of creating navigation stacks according to the react-navigation team

Here is a bit better screenshot of me dragging the modal down a bit.

bug for Modal of react-native

It lags behind the screen when used with the Modal of react-native

Notifier Position

Hi there,

Is there an option to set the position of the notifier like at the bottom or at the center?

[feature request] Show multiple stacking notifications

It would be awesome to have something like this: https://vercel.com/design/toast

Try clicking "Show Toast" a few times, and then hovering over the toasts in the bottom corner.

PanGestureHandler must be used as a descendant of GestureHandlerRootView

Hi,

On Latest react native 71.7 & react navigation 6x packages, I get this error. Was working fine on react native 67 & navigation 5x packages. Any info on that ?

TouchableWithoutFeedback is deprecated

We need to change that to be pressable, lmk if I should PR.

[Feature Request] Add sound effects to notifications.

In the showNotification function, there could be a new parameter that when provided with a value (this could either be an enable/disable boolean or the name of the sound as a constant), the notification will make a sound effect.

This will be useful for messaging apps that use this library for in-app notifications. For a potential enhancement, it would be great to have a couple of choices for the sound.

Example Implementations:

// Enable default sound
Notifier.showNotification({
  title: 'John Doe',
  description: 'Hello! Can you help me with notifications?',
  duration: 0,
  showAnimationDuration: 800,
  showEasing: Easing.bounce,
  onHidden: () => console.log('Hidden'),
  onPress: () => console.log('Press'),
  hideOnPress: false,
  enableSound: true,
});

// Choose sound
Notifier.showNotification({
  title: 'John Doe',
  description: 'Hello! Can you help me with notifications?',
  duration: 0,
  showAnimationDuration: 800,
  showEasing: Easing.bounce,
  onHidden: () => console.log('Hidden'),
  onPress: () => console.log('Press'),
  hideOnPress: false,
  playSound: SOUND_CHIME,
});

[Suggestion] Add new feature

Hey

Thanks for all your efforts! I have a suggestion which I want to talk about. Where can I reach you 😅?

MainComponent.tsx is always visible on iPhone 5

Bug report

Environment

OS: macOS 10.15.3

tested device: iPhone 5 iOS 10.3.1 Simulator

Node: 12.16.1

npm: 6.13.4

react: 16.9.0

react-native: 0.61.5

How do I use Notifier

I wrap my AppNavigator with NotifierWrapper.

const root = () => (
  <SafeAreaProvider>
    <StatusBar barStyle="dark-content" translucent />
    {!!i18n.isInitialized && (
      <NotifierWrapper>
        <AppNavigator
          ref={navigatorRef => {
            setTopLevelNavigator(navigatorRef);
          }}
        />
      </NotifierWrapper>
    )}
  </SafeAreaProvider>
);

I have made an util function where I call

Notifier.showNotification({
      title: text,
      description: desc,
      Component: Notification,
      duration: 2500,
      showAnimationDuration: 400,
      showEasing: Easing.quad,
    });

Expected Behavior

Notifier should not be visible until I call showNotification()

How to fix it

The simplest solution I found is removing SafeAreaView from MainComponent.tsx
You should probably use some other SafeAreaView. I'm using it from: react-native-safe-area-context and it's working as expected.

   <View style={s.container}>
      {!!imageSource && <Image style={s.image} source={imageSource} />}
      <View style={s.content}>
        {!!title && <Text style={s.title}>{title}</Text>}
        {!!description && <Text style={s.description}>{description}</Text>}
      </View>
    </View>

Actual Behavior

MainComponent.tsx is always visible. After I call showNotification(), MainComponent.tsx disappears and it's working as expected.

Bug for react-native-modal

It lags behind the screen when used with the react-native-modal library

Support opacity fade in/out animation

I'd like to apply an opacity style when the notification enters/leaves the screen.
Thought this would be a nice addition to this library - some guidance on best approach for this would be appreciated.

From what I can tell this would require injecting the animated value, to be able to interpolate it from the component & create this opacity style effect.

I'm thinking in adding some sort of opt-in prop. e.g injectAnimatedValue
& if its true, it would inject into the component a animatedValue prop, passing down translateY as the value.

Working with react-native-navigation

For anyone who needs to make this work with react-native-navigation, this is how I did:

Create a transparent screen (a full screen component) where you will display the notifier

import React, {Component} from 'react';
import {View} from 'react-native';
import {NotifierRoot} from 'react-native-notifier';
import {Navigation} from 'react-native-navigation';

export class Notifier extends Component {
  componentDidMount() {
    this.notifierRef.showNotification({
      title: this.props.textToShow,
      duration: 1000,
    });
    setTimeout(() => {
      Navigation.dismissOverlay(this.props.componentId);
    }, 1200);
  }
  render() {
    return (
      <View style={Styles.mainContainer}>
        <NotifierRoot
          ref={ref => {
            this.notifierRef = ref;
          }}
        />
      </View>
    );
  }
}

export default Notifier;

const Styles = {
  mainContainer: {
    height: 100,
    width: '100%',
    backgroundColor: 'transparent',
  },
};

Register that screen with react-native-navigation (I am using Redux and a gestureHandler in my example but this is not needed)

import Notifier from '../components/notifier';
...
Navigation.registerComponentWithRedux(
    'NotifierScreen',
    () => gestureHandlerRootHOC(Notifier),
    Provider,
    store,
  );

Now, anywhere in your app, show the notifier using Overlay

Navigation.showOverlay({
	component: {
		name: 'NotifierScreen',
		passProps: {
			textToShow: 'Success !',
		},
		options: {
			overlay: {
				interceptTouchOutside: false,
			},
			layout: {
				componentBackgroundColor: 'transparent',
			},
		},
	},
});

Feature: support of message id so a similar notification just replaces the current one

It would be nice if we could have an "id" associated with a message, that will then lead to the current notification with the same id to just change its content and play a little wiggle animation (or pulse or something).

NotifierComponents.Notification change background color

Is there an option to change background color when using NotifierComponents.Notification. Please let me know

Notifications display underneath modals

When a modal is open, the notifications display underneath them. They should be an overlay at the top most view controller.

I use react-native-screens which use native navigations instead of JS based ones.

I was able to solve this issue by editing Notifier.tsx and wrapping the PanGestureHandler JSX with:

  <FullWindowOverlay style={{position: 'absolute', width: '100%', height: '100%', justifyContent: 'center' }}>

Is there way to show notification when Modal is enabled ?

Hi, is there any prop that helps me show Notification when "Modal" native component is Visible ?

android: alert hidden if translucent status bar

Originally referenced but closed in #7

The example app (via title="Toggle Status Bar Translucent") demonstrates alerts and notifications are partially hidden for Android if the status bar is translucent.

@seniv is there a temp workaround we can apply?

Temporary NotifierRoot to enable notifications in react-modal

Hey! Really enjoying this clean library!
I'm trying to get it to work with react modals, but as I saw in another issue, notifications are rendered behind modals because they are native components. I have been able to work around it by adding a NotifierRoot component inside my modal. Nofications triggered from inside the modal are visible there. Great! However, when the modal is closed future notifications are referencing an unmounted component.

Is there any way of reverting or unmounting the NotifierRoot?

Thanks! 🙏

Notification bar overlaps the notifier.

Hey seniv, thanks for this great library. I was just testing it into my expo app and i am experiencing a UI bug while showing the notifier. I am attaching the screenshot of my app screen. It would look much better if it slides more and doesn't overlap my notification bar.

OS: Android
Device: Redmi Note 7 Pro

NativeStackNavigation modals result in notifications beneath the modal

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

When using a NativeStackNavigator on iOS, notifications are forced beneath modal screens. This is due to how iOS treats modals, and that is to always force them to the top. We can use the FullWindowOverlay component provided by react-native-screens to conditionally wrap the notification for iOS only, which results in notifications being positioned on top of modals where they belong, and no change on android.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-notifier/.DS_Store b/node_modules/react-native-notifier/.DS_Store
new file mode 100644
index 0000000..9104acb
Binary files /dev/null and b/node_modules/react-native-notifier/.DS_Store differ
diff --git a/node_modules/react-native-notifier/src/Notifier.tsx b/node_modules/react-native-notifier/src/Notifier.tsx
index 92bfaf2..750fb7a 100644
--- a/node_modules/react-native-notifier/src/Notifier.tsx
+++ b/node_modules/react-native-notifier/src/Notifier.tsx
@@ -12,6 +12,8 @@ import {
   PanGestureHandlerStateChangeEvent,
 } from 'react-native-gesture-handler';
 
+import { FullWindowOverlay } from 'react-native-screens';
+
 import styles from './Notifier.styles';
 import { Notification as NotificationComponent } from './components';
 import {
@@ -260,6 +262,12 @@ export class NotifierRoot extends React.PureComponent<ShowNotificationParams, St
     this.hiddenComponentValue = -Math.max(heightWithMargin, DEFAULT_COMPONENT_HEIGHT);
   }

   render() {
     const {
       title,
@@ -275,7 +283,7 @@ export class NotifierRoot extends React.PureComponent<ShowNotificationParams, St
     const additionalContainerStyle =
       typeof containerStyle === 'function' ? containerStyle(this.translateY) : containerStyle;
 
-    return (
+    const notificationContent = (
       <PanGestureHandler
         enabled={swipeEnabled}
         onGestureEvent={this.onGestureEvent}
@@ -306,5 +314,11 @@ export class NotifierRoot extends React.PureComponent<ShowNotificationParams, St
         </Animated.View>
       </PanGestureHandler>
     );
+
+    return  Platform.OS === 'ios' ? (
+      <FullWindowOverlay>{notificationContent}</FullWindowOverlay>
+    ) : (
+      notificationContent
+    )
   }
 }

This issue body was partially generated by patch-package.