{"id":4288,"url":"https://github.com/seniv/react-native-notifier","last_synced_at":"2025-05-14T01:04:05.087Z","repository":{"id":37580545,"uuid":"249207883","full_name":"seniv/react-native-notifier","owner":"seniv","description":"Fast and simple in-app notifications for React Native","archived":false,"fork":false,"pushed_at":"2025-03-17T00:31:09.000Z","size":22589,"stargazers_count":1237,"open_issues_count":14,"forks_count":59,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-04-03T09:41:10.213Z","etag":null,"topics":["android","animation","expo","ios","notification","react-native","swipeable"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/seniv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-22T15:03:34.000Z","updated_at":"2025-04-02T18:02:59.000Z","dependencies_parsed_at":"2024-05-01T22:22:49.692Z","dependency_job_id":"9d726aac-358e-43a2-93b6-f8af8ce7f3b5","html_url":"https://github.com/seniv/react-native-notifier","commit_stats":{"total_commits":83,"total_committers":4,"mean_commits":20.75,"dds":0.06024096385542166,"last_synced_commit":"a9baca660a6c0700af5c1363f119b40583705884"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seniv%2Freact-native-notifier","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seniv%2Freact-native-notifier/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seniv%2Freact-native-notifier/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seniv%2Freact-native-notifier/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seniv","download_url":"https://codeload.github.com/seniv/react-native-notifier/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248228531,"owners_count":21068707,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","animation","expo","ios","notification","react-native","swipeable"],"created_at":"2024-01-05T20:17:06.981Z","updated_at":"2025-04-10T13:51:39.315Z","avatar_url":"https://github.com/seniv.png","language":"TypeScript","funding_links":[],"categories":["Components","TypeScript"],"sub_categories":["UI"],"readme":"# react-native-notifier\n\n[![npm](https://img.shields.io/npm/v/react-native-notifier)](https://www.npmjs.com/package/react-native-notifier)\n[![npm bundle size](https://img.shields.io/bundlephobia/min/react-native-notifier?color=yellow)](https://bundlephobia.com/result?p=react-native-notifier)\n![platforms: ios, android, web](https://img.shields.io/badge/platform-ios%2C%20android%2C%20web%2C%20expo-orange)\n[![license MIT](https://img.shields.io/badge/license-MIT-brightgreen)](https://github.com/seniv/react-native-notifier/blob/master/LICENSE)\n\nFast, simple, and customizable in-app notifications for React Native\n\n![Demo of package](https://raw.githubusercontent.com/seniv/react-native-notifier/master/demo.gif)\n\n## Requirements\n\nThis library uses [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler), a perfect library for swipes, and other gesture events.\n\nPlease check their installation guide to install it properly: https://docs.swmansion.com/react-native-gesture-handler/docs/installation\n\n## Installation\n```sh\nyarn add react-native-notifier\n```\nOr\n```sh\nnpm install --save react-native-notifier\n```\n\n## Usage\n\nWrap your app with `NotifierWrapper`\n```js\nimport { NotifierWrapper } from 'react-native-notifier';\n\nconst App = () =\u003e (\n  \u003cNotifierWrapper\u003e\n    \u003cNavigation /\u003e\n  \u003c/NotifierWrapper\u003e\n);\n```\nThen call `Notifier.showNotification()` anywhere in code\n```js\nimport { Notifier, Easing } from 'react-native-notifier';\n\nNotifier.showNotification({\n  title: 'John Doe',\n  description: 'Hello! Can you help me with notifications?',\n  duration: 0,\n  showAnimationDuration: 800,\n  showEasing: Easing.bounce,\n  onHidden: () =\u003e console.log('Hidden'),\n  onPress: () =\u003e console.log('Press'),\n  hideOnPress: false,\n});\n```\n---\n\nOr add `NotifierRoot` at end of your App.js component. With this approach you can show notification using reference to the `NotifierRoot`.\n\nNote that `NotifierRoot` should be the last component to display notifications correctly. `Notifier.showNotification` is also available.\n```js\nimport { NotifierRoot } from 'react-native-notifier';\n\nfunction App() {\n  const notifierRef = useRef();\n  return (\n    \u003c\u003e\n      \u003cButton\n        title=\"Show Notification\"\n        onPress={() =\u003e notifierRef.current?.showNotification({ title: 'Using refs' })}\n      /\u003e\n      \u003cNotifierRoot ref={notifierRef} /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## Props\n\nBoth `NotifierWrapper` and `NotifierRoot` receive the same props.\n\nName                  | Type             | Default                       | Description\n----------------------|------------------|-------------------------------|-------------\nomitGlobalMethodsHookup| Boolean         | false                         | If set to `true`, global `Notifier` methods will not control this component. It's useful in case you have more than one `NotifierWrapper` or `NotifierRoot` rendered. If enabled, the only way to display notifications is using refs.\nuseRNScreensOverlay   | Boolean          | false                         | use `FullWindowOverlay` component from `react-native-screens` library. If `true`, Notifier will be rendered above NativeStackNavigation modals and RN Modal on iOS. This Option will work only if `react-native-screens` library is installed. iOS Only.\nrnScreensOverlayViewStyle| ViewStyle     | null                          | Style that will be used for RN View that is inside of FullWindowOverlay. iOS Only.\n\nAll parameters of the [`showNotification`](#showNotification) function can be passed as props to `NotifierWrapper` or `NotifierRoot`. In this case, they will be used as default parameters when calling the [`showNotification`](#showNotification) function. This can be useful for setting default [`Component`](#custom-component) parameter.\n\n## API\n\n### `showNotification`\n\n```\nNotifier.showNotification(params: object);\n```\nShow notification with params.\n\n`params`\n\nName                  | Type             | Default                       | Description\n----------------------|------------------|-------------------------------|-------------\ntitle                 | String           | null                          | Title of notification. __Passed to `Component`.__\ndescription           | String           | null                          | Description of notification. __Passed to `Component`.__\nduration              | Number           | 3000                          | Time after notification will disappear. Set to `0` to not hide notification automatically\nComponent             | Component        | NotifierComponents.Notification | Component of the notification body. You can use one of the [built-in components](#components), or your [custom component](#custom-component).\ncomponentProps        | Object           | {}                            | Additional props that are passed to `Component`. See all available props of built-in components in the [components section](#components).\ncontainerStyle        | 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](#custom-animations).\ncontainerProps        | Object           | {}                            | Props of Animated Container\nqueueMode             | String           | 'reset'                       | Determines the order in which notifications are shown. Read more in the [Queue Mode](#queue-mode) section.\nswipeEnabled          | Boolean          | true                          | Can notification be hidden by swiping it out\nanimationDuration     | Number           | 300                           | How fast notification will appear/disappear\nshowAnimationDuration | Number           | animationDuration \\|\\| 300    | How fast notification will appear.\nhideAnimationDuration | Number           | animationDuration \\|\\| 300    | How fast notification will disappear.\neasing                | Easing           | null                          | Animation easing. Details: https://reactnative.dev/docs/easing\nshowEasing            | Easing           | easing \\|\\| null              | Show Animation easing.\nhideEasing            | Easing           | easing \\|\\| null              | Hide Animation easing.\nonShown               | () =\u003e void       | null                          | Function called when entering animation is finished\nonStartHiding         | () =\u003e void       | null                          | Function called when notification started hiding\nonHidden              | () =\u003e void       | null                          | Function called when notification completely hidden\nonPress               | () =\u003e void       | null                          | Function called when user press on notification\nhideOnPress           | Boolean          | true                          | Should notification hide when user press on it\nswipePixelsToClose    | Number           | 20                            | How many pixels user should swipe-up notification to dismiss it\nswipeEasing           | Easing           | null                          | Animation easing after user finished swiping\nswipeAnimationDuration| Number           | 200                           | How fast should be animation after user finished swiping\ntranslucentStatusBar  | Boolean          | false                         | Add additional top padding that equals to `StatusBar.currentHeight`. Android Only.\n\n### `hideNotification`\n\n```\nNotifier.hideNotification(onHiddenCallback?: (result: Animated.EndResult) =\u003e void);\n```\n\nHide notification and run callback function when notification completely hidden.\n### `clearQueue`\n\n```\nNotifier.clearQueue(hideDisplayedNotification?: boolean);\n```\n\nClear [notifications queue](#queue-mode) and optionally hide currently displayed notification. Might be useful to run after logout, after which queued notifications should not be displayed.\n\n## Queue Mode\n\nQueue mode is used to define the order in which the notification appears in case other notifications are being displayed at the moment.\n\nFor 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.\n\nBy default, `reset` mode is used, which means every new notification clears the queue and gets displayed immediately.\n\nIn most cases, you will probably use only `reset` or `standby` modes.\n\nAll possible modes:\nMode       | Effect\n-----------|---------\nreset      | Clear notification queue and immediately display the new notification. Used by default.\nstandby    | Add notification to the end of the queue.\nnext       | Put notification in the first place in the queue. Will be shown right after the current notification disappears.\nimmediate  | Similar to `next`, but also it will hide currently displayed notification.\n\n## Components\n\nCurrently, there are 2 components out of the box. If none of them fits your needs, then you can easily create your [Custom Component](#custom-component).\n\n### `NotifierComponents.Notification`\n\n![Demo of Notification component](https://raw.githubusercontent.com/seniv/react-native-notifier/master/notification-component.png)\n\nPerfect for something like chat messages and notifications like \"Someone left a comment\". This component is used by default.\n\n```js\nimport { Notifier, NotifierComponents } from 'react-native-notifier';\n\nNotifier.showNotification({\n  title: 'Check this image!',\n  description: 'Cool, right?',\n  Component: NotifierComponents.Notification,\n  componentProps: {\n    imageSource: require('./react.jpg'),\n  },\n});\n```\nAvailable params:\nName                               | Type       | Default      | Description\n-----------------------------------|------------|--------------|-------------\ntitle                              | String     | null         | Title of notification.\ndescription                        | String     | null         | Description of notification.\ncomponentProps.titleStyle          | TextStyle  | null         | The style to use for rendering title.\ncomponentProps.descriptionStyle    | TextStyle  | null         | The style to use for rendering description.\ncomponentProps.imageSource         | Object     | null         | Passed to `\u003cImage /\u003e` as `source` param.\ncomponentProps.imageStyle          | ImageStyle | null         | The style to use for rendering image.\ncomponentProps.containerStyle      | ViewStyle  | null         | The style to use for notification container.\ncomponentProps.ContainerComponent  | Component  | SafeAreaView | A container of the component. Set it in case you use different SafeAreaView than the standard\ncomponentProps.maxTitleLines       | number     | null         | The maximum number of lines to use for rendering title.\ncomponentProps.maxDescriptionLines | number     | null         | The maximum number of lines to use for rendering description.\n\n### `NotifierComponents.Alert`\n\n![Demo of Alert component](https://raw.githubusercontent.com/seniv/react-native-notifier/master/alert-component.png)\n\nPerfect to use as a system alerts, like \"Something went wrong\" or \"Operation was succeed\".\n\n```js\nimport { Notifier, NotifierComponents } from 'react-native-notifier';\n\nNotifier.showNotification({\n  title: 'The request was failed',\n  description: 'Check your internet connection, please',\n  Component: NotifierComponents.Alert,\n  componentProps: {\n    alertType: 'error',\n  },\n});\n```\nAvailable params:\nName                               | Type      | Default      | Description\n-----------------------------------|-----------|--------------|-------------\ntitle                              | String    | null         | Title of notification.\ndescription                        | String    | null         | Description of notification.\ncomponentProps.titleStyle          | TextStyle | null         | The style to use for rendering title.\ncomponentProps.descriptionStyle    | TextStyle | null         | The style to use for rendering description.\ncomponentProps.alertType           | String    | 'success'    | Background color will be changed depending on the type. Available values: `error`(red), `success`(green), `warn`(orange) and `info`(blue).\ncomponentProps.backgroundColor     | String    | null         | While the background of the alert depends on `alertType`, you can also set the other color you want.\ncomponentProps.textColor           | String    | 'white'      | Color of `title` and `description`.\ncomponentProps.ContainerComponent  | Component | SafeAreaView | A container of the component. Set it in case you use different SafeAreaView than the standard\ncomponentProps.maxTitleLines       | number    | null         | The maximum number of lines to use for rendering title.\ncomponentProps.maxDescriptionLines | number    | null         | The maximum number of lines to use for rendering description.\n\n## Custom Component\n\nTo customize look of the notification you can pass your own `Component` to [`showNotification`](#showNotification) function.\n\nThis makes customization much simpler than passing \"style\" params. With custom components you can make notification look exactly like you want.\n\nThis component will receive props `title`, `description` and anything else that you pass to `componentProps` object when calling [`showNotification`](#showNotification).\n\n### Example\n```js\nimport React from 'react';\nimport { StyleSheet, View, Text, SafeAreaView } from 'react-native';\n\nconst styles = StyleSheet.create({\n  safeArea: {\n    backgroundColor: 'orange',\n  },\n  container: {\n    padding: 20,\n  },\n  title: { color: 'white', fontWeight: 'bold' },\n  description: { color: 'white' },\n});\n\nconst CustomComponent = ({ title, description }) =\u003e (\n  \u003cSafeAreaView style={styles.safeArea}\u003e\n    \u003cView style={styles.container}\u003e\n      \u003cText style={styles.title}\u003e{title}\u003c/Text\u003e\n      \u003cText style={styles.description}\u003e{description}\u003c/Text\u003e\n    \u003c/View\u003e\n  \u003c/SafeAreaView\u003e\n);\n\n// ...\n\n// Then show notification with the component\n\nNotifier.showNotification({\n  title: 'Custom',\n  description: 'Example of custom component',\n  Component: CustomComponent,\n});\n```\n![Demo of custom component](https://raw.githubusercontent.com/seniv/react-native-notifier/master/custom-component.jpg)\n\n## Custom Animations\n\n![Demo of Custom Animations](https://raw.githubusercontent.com/seniv/react-native-notifier/master/custom-animations.gif)\n\nIt is easy to create your own animation using `containerStyle` param.\n\nWhen you pass a function as `containerStyle` param, it will receive a `translateY` Animated Value as first parameter.\nThis 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.\n\nSo 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).\n\nYou need to remember three points of the animated value:\n1. `-1000` - Notification completely hidden;\n2. `-200` - Most likely notification is still hidden, but will be visible soon (depending on height of the notification);\n3. `0` - Notification is shown.\n\nI know, this all is complicated, so here is a Code Example with combination of scaling and transition:\n```ts\nconst getContainerStyleWithTranslateAndScale = (translateY: Animated.Value) =\u003e ({\n  transform: [\n    {\n      // this interpolation is used just to \"clamp\" the value and didn't allow to drag the notification below \"0\"\n      translateY: translateY.interpolate({\n        inputRange: [-1000, 0],\n        outputRange: [-1000, 0],\n        extrapolate: 'clamp',\n      }),\n    },\n    {\n      // scaling from 0 to 0.5 when value is in range of -1000 and -200 because mostly it is still invisible,\n      // and from 0.5 to 1 in last 200 pixels to make the scaling effect more noticeable.\n      scale: translateY.interpolate({\n        inputRange: [-1000, -200, 0],\n        outputRange: [0, 0.5, 1],\n        extrapolate: 'clamp',\n      }),\n    },\n  ],\n});\n\nNotifier.showNotification({\n  title: 'Custom animations',\n  description: 'This notification is moved and scaled',\n  containerStyle: getContainerStyleWithTranslateAndScale,\n})\n```\n\nCode from example above should work great on both Android and iOS.\n\nBut if you will animate `opacity` style with component that have shadows (such as `NotifierComponents.Notification`)\nyou 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](https://github.com/facebook/react-native/issues/23090#issuecomment-669157170)\n\n```ts\nconst animatedContainerProps = isAndroid ? { needsOffscreenAlphaCompositing: true } : undefined;\n// ...\nNotifier.showNotification({\n  title: 'Custom animations',\n  description: 'This notification is moved and scaled',\n  containerStyle: getContainerStyleWithTranslateAndScale,\n  containerProps: animatedContainerProps,\n})\n```\n\nKeep in mind that this library uses [React Native's Animated library](https://reactnative.dev/docs/animated) with [Native Driver](https://reactnative.dev/docs/animations#using-the-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](https://github.com/facebook/react-native/blob/main/Libraries/Animated/NativeAnimatedHelper.js#L234).\n\nAlso you can see the code of all [Animations from Example GIF](https://github.com/seniv/react-native-notifier/blob/master/example/src/customAnimations.ts). Feel free to copy those animations to your codebase and play with them.\n\n### Troubleshooting\nYou 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.\nThat is because of padding that was added by SafeAreaView.\nThis behavior can be fixed by moving safe area inset from component to container, like this:\n\n```ts\nNotifier.showNotification({\n  title: 'Zoom In/Out Animation',\n  containerStyle: (translateY: Animated.Value) =\u003e ({\n    // add safe area inset to the container\n    marginTop: safeTopMargin,\n    // ...\n  }),\n  // replace SafeAreaView with View\n  componentProps: {\n    ContainerComponent: View,\n  },\n})\n```\nThis behavior will be fixed in feature releases.\n\n## Using with `react-native-navigation`\nIf you are using `react-native-navigation`, this issue might be helpful to use notifier with native-navigation: https://github.com/seniv/react-native-notifier/issues/16\n\nIf you have any solutions or improvements in how to use notifier with native-navigation, then feel free to write comments in that thread!\n\n## Troubleshooting\n\n### PanGestureHandler must be used as a descendant of GestureHandlerRootView\nCheck this comment: https://github.com/seniv/react-native-notifier/issues/85#issuecomment-1603741147\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseniv%2Freact-native-notifier","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseniv%2Freact-native-notifier","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseniv%2Freact-native-notifier/lists"}