/ Notifications

A simple lightweight dropdown banner library using creates native capabilities

A simple lightweight dropdown banner library using creates native capabilities

ReactNative: Native Notification Banner

A simple lightweight dropdown banner library using creates native capabilities.

react-native-notification-banner

📖 Getting started

$ npm install react-native-notification-banner --save

$ react-native link react-native-notification-banner

$ react-native link react-native-vector-icons

  • iOS

    • After react-native link react-native-notification-banner, please verify node_modules/react-native-notification-banner/ios/ contains Pods folder. If does not exist please execute pod install command on node_modules/react-native-notification-banner/ios/, if any error => try pod repo update then pod install

    • After verification, open your project and create a folder 'RNNotificationBanner' under Libraries.

    • Drag node_modules/react-native-notification-banner/ios/pods/Pods.xcodeproject into RNNotificationBanner, as well as the RNNotificationBanner.xcodeproject if it does not exist.

    • Add the BRYXBanner.framework into your project's Embedded Binaries and make sure the framework is also in linked libraries.

    • Go to your project's Build Settings -> Frameworks Search Path and add ${BUILT_PRODUCTS_DIR}/BRYXBanner non-recursive.

    • Now build your iOS app through Xcode

  • Android

Please add below snippet into your app build.gradle


buildscript {
    repositories {
        jcenter()
        maven { url "https://maven.google.com" }
		...
    }
	...
}


allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
		maven { url "https://maven.google.com" }
		...
    }
}

Note: This library is support on Android 27 > above

💻 Usage

import { RNNotificationBanner } from 'react-native-notification-banner';

import Icon from 'react-native-vector-icons/FontAwesome'
let copy = <Icon name="copy" size={24} color="#FFFFFF" family={"FontAwesome"} />;

RNNotificationBanner.Show({ title: "Message", subTitle: "Message", withIcon: true, icon: copy})

Note:

  • We have added family prop for Icon class, please make sure that you pass the props

💡 API's

Success, Error, Info, Warn, Normal, Show

🎨 Props

Prop Type Default Note
title string Specify title of banner
subTitle string Specify subtitle of banner
tintColor HEX-COLOR Specify tint color of banner
withIcon bool Enable/Disable icon
icon RNVectorIcon Specify banner icon
duration int Specify duration to show banner
enableProgress bool false Specify to show progress on banner
onClick func Specify onClick callback
onHide func Specify onHide callback

Icons

	let facebook = <Icon family={'FontAwesome'} name={'facebook'} color={'#000000'} size={30} />

    RNNotificationBanner.Success({ title: "Message", subTitle: "Message", withIcon: true, icon: copy})

Note:

  • We have added family prop for Icon class, please make sure that you pass the props

GitHub