I am developing app using react native and expo & I have to implement push notifications in app. So far sending and receiving the notifications has no issues but my problems are mainly related to UI design on push notification panel :
Following is my simple notification message configuration :
scheduleNotificationAsync({
content: {
title: “You’ve got mail! :mailbox_with_mail:”,
body: ‘Here is the notification body’,
data: { data: ‘goes here’ },
},
})
Is there any way to design multi line notification?
I can use title, subtitle (which only works in iOS) but I want multiple lines in body part. I tried using \n in my body text but it doesn’t work.
How to navigate to specific screen in app when button is pressed in notification?
I have setup sample category as below :
Notifications.setNotificationCategoryAsync(“daily_question”, [
{
actionId: “yes”,
buttonTitle: “Yes”,
},
{
actionId: “no”,
buttonTitle: “No”,
},
]);
I would like to navigate to specific screen upon pressing of “Yes/No” button but I’m not able to figure out/able to find out, how I can write any action code in configuration.
Is there any way I can design the notification panel content UI part as html/jsx code to have better control over how UI will look like?
Is there any way to add image/table kind of components in notification ui?
It seems like adding image to push notification is under consideration.
Any pointers/guidance on achieving above points using expo notification?
If expo notification, cannot achieve above functionalities then what are my options?
Thanks
You have a lot of questions but I can respond to some of them.
"I would like to navigate to a specific screen upon pressing of “Yes/No” button...."
For navigating to a specific screen upon yes/no you should check this link which contains "Managing Notification Categories" and there're useful functions how to achieve that behavior. I leave the link below. If you have difficulties to find the exact way to do write here one comment, then I will leave a detailed explanation.
https://docs.expo.dev/versions/latest/sdk/notifications/#managing-notification-categories-interactive-notifications
"Is there any way I can design the notification panel content UI part as..."
In expo managed projects it is almost impossible to design the UI of notification panel
"Is there any way to add image/table kind of components in notification ui"
In Expo managed projects there is no option to add images to the notification panel, you should eject the project to do that.
"If expo notification, cannot achieve [...] are my options"
You should eject the project and start to write native code which is not recommended if you are a newbie in react-native and expo.
But if you eject to a bare project then you will have full access to your application and you can modify everything that needs native code.
Recommendation: Try to understand what you can do with managed and bare projects then you will understand what you can modify and what you can't. I leave the link below with a full explanation of the difference.
https://docs.expo.dev/introduction/managed-vs-bare/
Related
I was asked to develop a sample app integrated with Amazon Pinpoint. Since I am not a pro at developing apps, I decided to follow this simple tutorial and develop the app following the steps described in it. The only differences are that, instead of using an emulator, I executed the project in my own cell phone (a Xiaomi Redmi 4x) and instead of GCM, I used Firebase.
At first, it seemed to work perfectly, but when I moved the app to the background and went back to my homescreen, I could no more receive push notifications from my app. When the app is open and running, everytime I send a push notification a pop-up appears with Title "New Notification" and buttons "Ignore"/"View". But when in background, nothing is visible in my system tray!
Also, if someone knows which part of the code is responsible for this notifications, just warn me and I upload it here.
Okay, so after some tests I made it work (not through console, but through CLI). To do so, I followed some steps I found this question, that took me to two other documents: one from Amazon teaching how to send push notifications through CLI and a simple but very detailed tutorial of phonegap-plugin, the plugin used in our Ionic application to process the pushes.
First of all, replace the phonegap-plugin in your app with the master version avaliable in the github link I sent you.
Then, putting all those information together, I figured out how to write a .json file containing the information we need to send the pushes. Here is a sample of the code I used:
{
"MessageRequest": {
"Addresses": {
"YOUR_DEVICE_ADDRESS_HERE": {
"ChannelType": "GCM"
}
},
"MessageConfiguration": {
"GCMMessage": {
"RawContent": "{\"data\":{\"title\":\"StackOverflow rocks!\",\"body\":\"Am I right?\",\"actions\":[ { \"title\":\"Yes!\", \"callback\":\"app.yes\", \"foreground\":true }, { \"title\":\"No!\", \"callback\":\"app.no\", \"foreground\":false }]}}"
}
}
}
}
As you can see, to change the content in the push notificationm, you'll have to edit it's "RawContent". To do so, use the phonegap-plugin tutorial I sent you and find out how to do the alterations you wish.
Last step: once you updated your plugin version AND saved the code above in a .json file (let's call it test.json), you can send it to your phone oppening command line in the folder containing your .json and writting:
aws pinpoint send-messages --color on --region YOUR_SERVICE_REGION --cli-input-json file:///test.json
This should do the trick! Hope it works for you. If any doubts, just let me know!
I've been searching on how to make a bridge between React Native and Android Native code for a while, but I still don't quite get it. I've read the documentation here , but I don't quite understand it.
What I want to do is, I want to build an apps that utilize push notification, but since I need to push message to China, I can't use GCM (thanks to the great firewall), so I use another third party push SDK.
I've managed to integrate the push into my apps (resulting a console.log() message whenever I push something), the next step is I want to re-route it to certain page
Any help will be appreciated :)
Note: If you are using common push notification (i.e. GCM and APNS), use this instead. Since I need to use another third party push service, I need to find a way myself to bridge the SDK (which is native) to React Native.
So after several hours tinkering with this problem, I found a solution for my problem. This solution divided into 2 parts:
emitter, this will emits an event whenever the server send a push.
listener, this will listen to the event that you emits before.
emitter
This happens on the native side (Android in my case)
For this part I learnt it from how this library did using GCM. And found a tutorial here on the RN documentation.
Basically after you receive your push on SomeBroadCastReceiver onReceive() function, you can pass the bundle as params in this function
reactContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
//this eventName is a key so you need to remember it, because you need to call it on the listener
.emit(eventName, params);
listener
The listener will be built on the RN side. this documentation helps me. I missed this documentation before, because it only appear in the RN iOS docs only.
import { NativeEventEmitter, NativeModules } from 'react-native';
//import your already created package name here
const { YourCustomPackageName} = NativeModules;
then in ComponentWillMount()
const yourCustomPackageEmitter = new NativeEventEmitter(YourCustomPackageName);
pushListenerEmitter.addListener(eventName, this.handlePush, this);
then you just need to create handlePush function and get the params there
handlePush = (event) => {
console.log('event triggered..');
console.log(event);
}
The best way to do push notification is Deep Linking. If you are using React Navigation its much simple to do. Deep Linking React Native
You can define unique URL like yorApp://employee/1 and navigate easily to that screen.
Suppose I want to write some article on a web-site and publish a link to the discussed Android application (which is available on Google Play).
Is there a standard way to create "badge" for this application, which shows app's name, icon, descriptions, rating, download/install count? Something like this:
or this:
or this:
I found Google Play Badge Generator, but this "Badge Generator" does not do anything special, it is just a dummy static image. Other than that I could not find anything.
I don't think there's an official way to do this (as you have already mentioned the Badge Generator). Anyway you can use one of the many Play Store API wrapper on github to extract the desidered information and build your own fancy badge.
E.g.:
PHP+Curl: https://github.com/thetutlage/Google-Play-Store-API#itemInfo
JS: https://github.com/basiclines/GooglePlay-JSAPI
This one generates simple and clear output like this: http://googleplay-jsapi.herokuapp.com/app/com.meetsapp
many more in various languages..
There´s a fully embedable html widget http://playboard.me/android/widgets/apps you can use out of the box.
You can customize look and feel as they´ve got class per item so you can hide or remove things with css or javascript. Even the "widget by..." has a class pb-wd-footeryou can set to be hidden and leave the widget clean.
You can try this.
https://github.com/facundoolano/google-play-scraper
{
appId: "com.dxco.pandavszombies",
title: "Panda vs Zombie: Elvis rage",
url: "https://play.google.com/store/apps/details?id=com.dxco.pandavszombies&hl=en",
icon: "https://lh6.ggpht.com/5mI27oolnooL__S3ns9qAf_6TsFNExMtUAwTKz6prWCxEmVkmZZZwe3lI-ZLbMawEJh3=w300",
minInstalls: 10000,
maxInstalls: 50000,
score: 4.9,
reviews: 2312,
description: "Everyone in town has gone zombie.",
descriptionHTML: "Everyone in town has gone <b>zombie</b>.",
developer: "DxCo Games",
genre: "Action",
price: "0",
free: true
}
Fetch data using ajax jsonp and create html UI to include in your page. Hope you should be good to go.
I wanted almost the same thing for my project's GitHub page. I wanted the different versions my app has on F-Droid, GitHub release and on Playstore.
I found a cool badge generator http://shields.io/ that can also get data from an endpoint.
I forked google-play-scraper and added the shields.io endpoint requirements. See my
heroku branch for the changes needed.
It's free and a mouse click away to deploy to https://heroku.com from GitHub. After the deploy I have my badge.
Here is how it looks (static image)
You can also check out the google-play-api repo, it's also using google-play-scraper and the RESTful API is already implemented. You would only need to set up how you want to show the information.
I created an app for iPhone and Android using Phonegap.
Now I wanted to add push functionality which already works pretty good.
When a push message arrives on my iPhone I get a message on the homescreen. If I swipe it, iOS will open my application. - So far so good.
Now, within my PhoneGap app I need to check what that message actually says in order to open the correct view within my app via JavaScript.
I know there are quite some posts about this but I couldn't find some clear answers to these questions:
Does PhoneGap support push messages?
If yes, where is the documentation for that?
If not, which plugins/frameworks can be recommended? So far I found pushwoosh and Urbanair. Are they any good?
Regarding Pushwoosh, I noticed that I need some kind of pushwoosh ID - Why that?
By Pushwoosh ID you most probably mean Pushwoosh App Id or Application Code. It's an ID of your application in Pushwoosh Control Panel (current format is XXXXX-XXXXX). You will see it as soon as you add a new app in Pushwoosh.
There was quite an extensive blog post made by Holly Schinsky on easy PhoneGap integration with Pushwoosh
http://devgirl.org/2012/12/04/easy-phonegap-push-notifications-with-pushwoosh/
It should be very helpful for all PhoneGap developers aiming to integrate push notifications into their apps.
I found a really easy solution without using a framework.
I simply added the following code to the very end of the method didFinishLaunchingWithOptions (Right before the return statement):
if (launchOptions != nil)
{
NSDictionary* dictionary = [launchOptions objectForKey:UIApplicationLaunchOptionsRemoteNotificationKey];
if (dictionary != nil)
{
NSLog(#"Launched from push notification: %#", dictionary);
[self addMessageFromRemoteNotification:dictionary updateUI:NO];
}
}
Also, I added this new method to my AppDelegate.m which gets the payload from the push message:
- (void)application:(UIApplication*)application didReceiveRemoteNotification:(NSDictionary*)userInfo
{
NSLog(#"Received notification: %#", userInfo);
[self addMessageFromRemoteNotification:userInfo updateUI:YES];
}
(The NSLog calls above will show you what's inside the push message)
As a last step, I added this listener to do what ever I want with the payload:
- (void)addMessageFromRemoteNotification:(NSDictionary*)userInfo updateUI:(BOOL)updateUI
{
// do what ever you want with userInfo
}
If you want to do an additional JavaScript call with this info, I recommend using:
[self.viewController.webView stringByEvaluatingJavaScriptFromString:#"callSomeJSFunction()"];
Of course you can also pass arguments as strings into that JS function if you want.
I have two questions regarding the sl4a scripting language. I'd like to develop a python script that will be periodically contacted by a server and post some information to the notification bar.
I've successfully add message to the notification bar, but
The notification icon is always sl4a logo. Is there a way to change it to something else? (I don't mind to use some hack method such as rename the resource file, if that will work...)
When I click the notification, it just remove the message. I'd like to add some intent that would take the user to certain app or webpage. Is it possible?
Thanks!
Officially, there is no API exposed to SL4A for customization of notifications which exist does exist in Android.
Reference:
http://developer.android.com/guide/topics/ui/notifiers/notifications.html#CustomExpandedView
http://code.google.com/p/android-scripting/wiki/ApiReference
Officially, there is no API exposed to SL4a for firing an intent on user click from user. .
notify(
String title: title,
String message)
Notify, just displays a notification that will be canceled when the user clicks on it. Now, somehow if you can trace cancellation of this notification, you can start a new intent using your script.
Hack?
Please note, Android treats these notification from SL4A and not from your script. (due to which you are getting the SL4A icon) Thus, somehow it is possible to use all API which are exposed to a normal JAVA code, treating SL4A as an application but then this approach will make all your apps using SL4a have the same logo. ;)