ReactNative: Native Notification Banner
npm install react-native-notification-banner

ReactNative: Native Notification Banner (Android/iOS)
If this project has helped you out, please support us with a star 🌟
A simple lightweight dropdown banner library using creates native capabilities
#### Android
| Tapadoo/Alerter |
| ----------------- |
#### iOS
| bryx-inc/BRYXBanner |
| ----------------- |
$ yarn add react-native-notification-banner
- Add react-native-image-helper your app package.json
$ npm install react-native-image-helper --save
- Add react-native-vector-icons to your app package.json and configure it as per their installation steps. It supports till V10
$ npm install react-native-vector-icons --save
- iOS
- Add the following to your Podfile -> ios/Podfile and run pod update:
``
#Modify below snippet outside your target project tag
linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
use_frameworks! :linkage => linkage.to_sym
else
use_frameworks!
end
#Add below code in your target project tag
pod 'RNNotificationBanner', :path => '../node_modules/react-native-notification-banner/ios'
pod 'BRYXBanner', :git => 'https://github.com/prscX/BRYXBanner.git', :branch => 'master'
post_install do |installer|
installer.pods_project.targets.each do |target|
if target.name.include?('BRYXBanner')
target.build_configurations.each do |config|
config.build_settings['SWIFT_VERSION'] = '4.2'
end
end
end
# Ensure the Swift version is set for all targets
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings['SWIFT_VERSION'] = '5.0'
end
end
end
`
- Android
Please add below snippet into your app build.gradle
``
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
- Add react-native-image-helper your app package.json
$ npm install react-native-image-helper --save
- Add react-native-vector-icons to your app package.json and configure it as per their installation steps
$ npm install react-native-vector-icons --save
- iOS
- Add the following to your Podfile -> ios/Podfile and run pod update:
`
use_native_modules!
pod 'RNNotificationBanner', :path => '../node_modules/react-native-notification-banner/ios'
use_frameworks!
pod 'BRYXBanner', :git => 'https://github.com/prscX/BRYXBanner.git', :branch => 'master'
post_install do |installer|
installer.pods_project.targets.each do |target|
if target.name.include?('BRYXBanner')
target.build_configurations.each do |config|
config.build_settings['SWIFT_VERSION'] = '4.2'
end
end
end
end
`
- Android
Please add below snippet into your app build.gradle
``
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
$ yarn add react-native-vector-icons
> RN60 above please use react-native-notification-banner V1 and above
- iOS
- Add the following to your Podfile -> ios/Podfile and run pod update:
`
use_native_modules!
pod 'RNNotificationBanner', :path => '../node_modules/react-native-notification-banner/ios'
use_frameworks!
pod 'BRYXBanner', :git => 'https://github.com/prscX/BRYXBanner.git', :branch => 'master'
post_install do |installer|
installer.pods_project.targets.each do |target|
if target.name.include?('BRYXBanner')
target.build_configurations.each do |config|
config.build_settings['SWIFT_VERSION'] = '4.2'
end
end
end
end
`
- Android
Please add below snippet into your app build.gradle
``
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
> RN60 below please use react-native-notification-banner V.0.*
$ 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 installnode_modules/react-native-notification-banner/ios/pods/Pods.xcodeproject
- After verification, open your project and create a folder 'RNNotificationBanner' under Libraries.
- Drag into RNNotificationBanner, as well as the RNNotificationBanner.xcodeproject if it does not exist.BRYXBanner.framework
- Add the into your project's Embedded Binaries and make sure the framework is also in linked libraries.Build Settings -> Frameworks Search Path
- Go to your project's 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
`javascript
import { RNNotificationBanner } from 'react-native-notification-banner';
import Icon from 'react-native-vector-icons/FontAwesome'
let copy =
RNNotificationBanner.Show({
title: "Message",
subTitle: "Message",
withIcon: true,
icon: copy,
titleColor: "#FFFFFF",
subTitleColor: "#FFFFFF",
isSwipeToDismissEnabled: true,
})
`
> Note:
> - We have added family prop for Icon class, please make sure that you pass the props
Success, Error, Info, Warn, Normal, Show
| Prop | Type | Default | Note |
| ----------------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------- |
| title | string | | Specify title of bannersubTitle
| | 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
- RN Vector Icons: It supports react-native-vector-icons library. Please find below snippet for the usage:
`javascript
let facebook =
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
- Tapadoo/Alerter
- bryx-inc/BRYXBanner
RNBottomActionSheet @ prscX
However, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it:
* Starring and sharing the projects you like 🚀
* If you're feeling especially charitable, please follow prscX on GitHub.
Thanks! ❤️
prscX.github.io
Pranav >