react-native-app-notification

In-app custom notifications for React-Native

Usage no npm install needed!

<script type="module">
  import reactNativeAppNotification from 'https://cdn.skypack.dev/react-native-app-notification';
</script>

README

react-native-app-notification

Content

Installation

npm i react-native-app-notification

Setup

Inside of App.js

import AppNotification from 'react-native-app-notification'

const App = () => {
  return (
    <View>
      (...)
      <AppNotification />
    </View>
  )
}

Example usage


// Anywhere in the app
AppNotification.show({
  title: 'New message'
  message: 'Someone sent you a message!',
  onPress: navigateToMessages,
})

AppNotification Component Props

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

Methods

Method Description Props
show(options) Renders a notification title, message, imageUrl, onPress, panEnabled (and everything above except for contentContainerStyle)
clear() Clears all notifications none