Notification Panel UI modifications

How to / Third Party Tooling
1

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’ },
},
})

  1. 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.
  1. 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.

  1. 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?

  2. 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

2

any one can help with how to do UI designing for buttons i.e. background color, text color, action, etc.?

3

to be able to navigate to a specific screen in your app, you need to take a look to Deep linking. you’ll need to configure scheme in your app and react navigation like in this example. and whenever you send a notification, you need to pass it’s url in the data of the notification.
it’ll be something like this:

scheduleNotificationAsync({
content: {
title: “You’ve got mail! :mailbox_with_mail:”,
body: ‘Here is the notification body’,
data: { data: ‘goes here’, url: "myapp://HomeNavigator/HomeScreen" },
},
})

find more informations in the provided urls