A simple lightweight dropdown banner library using creates native capabilities

ReactNative: Native Notification Banner

A simple lightweight dropdown banner library using creates native capabilities.

? 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

Icons

• RN Vector Icons: It supports react-native-vector-icons library. Please find below snippet for the usage:

	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