Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/avrcoelho/react-native-hook-notification
Add notifications in your React Native app. Types: success, error, warning, info, default or custom
https://github.com/avrcoelho/react-native-hook-notification
javascript javascript-library library notification notifications react react-native react-native-app reactnative toast toast-notifications typescript
Last synced: 3 months ago
JSON representation
Add notifications in your React Native app. Types: success, error, warning, info, default or custom
- Host: GitHub
- URL: https://github.com/avrcoelho/react-native-hook-notification
- Owner: avrcoelho
- License: mit
- Created: 2022-02-01T23:34:51.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-17T16:15:15.000Z (over 2 years ago)
- Last Synced: 2024-09-28T18:43:25.324Z (4 months ago)
- Topics: javascript, javascript-library, library, notification, notifications, react, react-native, react-native-app, reactnative, toast, toast-notifications, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-hook-notification
- Size: 723 KB
- Stars: 15
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# React Native Hook Notification
Add notifications in your React Native app. Types: success, error, warning, info, default or custom.
- Compatible with `Reanimated v2`.
- Compatible with `Expo`.
- Written in `TypeScript`.
## Install
```shell
npm install react-native-hook-notification
```
or
```shell
yarn add react-native-hook-notification
```
#### Dependencies
This library needs these dependencies to be installed in your project before you can use it:
```shell
npm install react-native-reanimated react-native-gesture-handler
```
or
```shell
yarn add react-native-reanimated react-native-gesture-handler
```
> **ℹ️ INFO**
>
> **React Native Gesture Handler** needs extra steps to finalize its installation, please follow their [installation instructions](https://github.com/software-mansion/react-native-gesture-handler).
>
> **React Native Reanimated v2** needs extra steps to finalize its installation, please follow their [installation instructions](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/).
## Usage
- In the application index file:
```js
import React from 'react';
import { NotificationContainer } from 'react-native-hook-notification';
import { Component } from './component/Component';
export default function App() {
return (
<>
>
);
}
```
- In the component:
```js
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useNotification } from 'react-native-hook-notification';
export default function Component() {
const notification = useNotification();
return (
notification.success({
text: 'Notification test',
})
}
>
Dispatch
);
}
```
### Props
| Property | Type | Required | Default | Description |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | --------- | ---------------------------------------------------------- |
| text | string | yes | | Notification text |
| title | string | no | | Notification title |
| position | top-right \| top-center \| top-left \| bottom-right \| bottom-center \| bottom-left | no | top-right | Notification position |
| theme | colored \| light \| dark | no | colored | Notification theme |
| transition | bounce \| flip \| fade \| slide \| zoom | no | bounce | Notification transition |
| delay | number | no | 5000 | Notification delay in milliseconds |
| showButtonClose | boolean | no | false | Show or hide close button |
| autoClose | boolean | no | true | Automatic closing of the notification after the delay ends |
| pauseOnPress | boolean | no | true | Auto close pause on hover |
| closeOnPress | boolean | no | false | Close on press |
| onPress | `() => void` | no | | Called on Notification press |
| draggable | boolean | no | true | Enable or disable drag |
| dragDirection | x \| y | no | y | Drag direction |
| icon | React.FunctionComponentElement | no | | Render icon on left side. Obs.: Dimensions: 24x24 |
| titleMaxLines | number | no | 1 | Maximum number of lines for title |
| textMaxLines | number | no | 2 | Maximum number of lines for text |
| xOffset | number | no | 16 | Offset from the X axis of the screen (in px) |
| customStyle | `{ container?: StyleProp; title?: StyleProp; text?: StyleProp; icon?: StyleProp; button?: StyleProp;buttonText?: StyleProp;}` | no | | Styles for custom notificaion type |
## License
[](https://opensource.org/licenses/MIT)
Developed by: [André Coelho](https://andrecoelho.dev)