React Native Notifly

Notifly allows you to show application notifications within the application and with your own components

Installation

npm install --save react-native-notifly

Usage

First you have to add Notifly to App

App.tsx

import { Notifly } from "react-native-notifly";

export default function App() {
  return (
    <View>
      {/* ... */}
      <Notifly />
    </View>
  );
}

After that just you need to call fire methods from anywhere in your app. 🎉

Show notification

import { Button } from "react-native";
import { fire } from "react-native-notifly";

export default function ExampleScreen() {
  return (
    <Button
      title="Fire Notification"
      onPress={() =>
        fire({
          title: "Title",
          message: "Some text message",
          avatar: { uri: "image url" },
          options: {
            behaviour: "swipe",
            duration: 2000,
          },
          onPress: (args) => console.log(args),
        })
      }
    />
  );
}

You can use Notifly with your own components. See below example

export default function ExampleScreen() {
  return (
    <Button
      title="Fire Notification"
      onPress={() =>
        fire({
          title: "Title",
          message: "Some text message",
          component: (args) => (
            <View>
              <Text>{args.title}</Text>
            </View>
          ),
        })
      }
    />
  );
}

Fire Props

Property	Default	Description
title	none	Title of notification
message	none	Message of notification
avatar	none	Avatar icon of notification
onPress	none	onPress callback for notification press
component	none	Set a your custom component
options	FireOptions	Notification options

FireOptions

Property	Default	Description
behaviour	swipe	The behaviour prop set the behaviour of notification. You can use one of them. `swipe`, `clear`, `over`
duration	2000	The duration prop set the notification duration.