react-native-notifly
TypeScript icon, indicating that this package has built-in type declarations

0.1.9 • Public • Published

Notifly

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.js
import React from "react";
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 React from "react";
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.

Notifly

License

MIT

Package Sidebar

Install

npm i react-native-notifly

Weekly Downloads

10

Version

0.1.9

License

MIT

Unpacked Size

15.3 kB

Total Files

16

Last publish

Collaborators

  • haciyeff