npm i react-native-app-notification
Inside of App.tsx
import AppNotification from 'react-native-app-notification'
const App = () => {
return (
<View>
(...)
<AppNotification />
</View>
)
}
// Anywhere in the app
AppNotification.show({
title: 'New message'
message: 'Someone sent you a message!',
onPress: navigateToMessages,
})
// You can inject your own components to extend it further
AppNotification.show({
title: 'New message'
message: 'Someone sent you a message!',
left: <NotificationIcon />,
right: <ShowButton />,
})
Property | Type | Optional | Default | Description |
---|---|---|---|---|
animated | boolean | true | true | Determines if the notification should animate in/out |
duration | number | true | 5000 | Lifetime in MS |
renderNotification | function | true | undefined | Overrides notification renderring |
maxAmount | number | true | undefined | Sets amount of notifications that can be active at once |
alignBottom | boolean | true | false | Renders the notifications from the bottom |
bottomOffset | number | true | layout.height * 0.07 | Bottom offset |
topOffset | number | true | layout.height * 0.07 | Top offset |
contentContainerStyle | StyleProp | true | { marginLeft: 8, width: 85%} | Stylesheet for the View renderring all the notifications |
containerStyle | StyleProp | true | SEE SOURCE | Stylesheet for the notification card |
titleStyle | StyleProp | true | SEE SOURCE | Stylesheet for the title |
messageStyle | StyleProp | true | SEE SOURCE | Stylesheet for the messagee |
imageStyle | StyleProp | true | SEE SOURCE | Stylesheet for the image |
Method | Description | Props |
---|---|---|
show(options) | Renders a notification | title, message, imageUrl, onPress, panEnabled, left, right (and everything above except for contentContainerStyle) |
clear() | Clears all notifications | none |