React-native-firebase: Unable to add an attachment to ios notification

[judemanutd]

Issue

Environment

1. Application Target Platform: iOS
2. Development Operating System: Windows 10
3. Build Tools: Xcode 9
4. React Native version: 0.54.3
5. RNFirebase Version: 4.0.0
6. Firebase Module: Notification

I have used the react native fetch blob library to download an image using the url. I am then supplying the image to the attachment but nothing shows up in the attachment.

The notification shows up fine with the title and body but there is no attachment.

const notification = new firebase.notifications.Notification()
.setNotificationId('notificationId')
.setTitle('My notification title')
.setBody('My notification body')
.ios.addAttachment('1',res.path());

res.path() gives me the path of the image locally downloaded.

[chrisbianca]

Thanks for the report, we'll investigate.

[judemanutd]

@chrisbianca Same issue on android, unable to get big picture to work
Using the following code

function createNotification(alert) {


    let notification = new firebase.notifications.Notification()
        .setNotificationId(JSON.stringify(alert['id']))
        .setTitle(alert['title'])
        .setBody((alert['description']));

    const channel = new firebase.notifications.Android.Channel('breaking_news', 'Breaking News', firebase.notifications.Android.Importance.Max)
        .setDescription('Breaking News channel');

    firebase.notifications().android.createChannel(channel);

    console.log("image url = " + fetchyouTubeVideoThumbnail('Qv6p6pTz5I'));

    RNFetchBlob
        .config({
            fileCache: true,
            appendExt: fetchExtension(fetchyouTubeVideoThumbnail('Qv6p6pTz5I'))
        })
        .fetch('GET', fetchyouTubeVideoThumbnail('Qv6p6pTz5I'))
        .then((res) => {

            console.log(`File = file://${res.path()}`);

            notification
                .android.setBigPicture(`file://${res.path()}`, 'ic_launcher', alert['title'], alert['description'])
                .android.setSmallIcon('ic_launcher_notification_icon')
                .android.setAutoCancel(true)
                .android.setChannelId('breaking_news')
                .android.setSmallIcon('ic_launcher');

            firebase.notifications().displayNotification(notification)

        })
        .catch((error) => {
            console.log("Error downloading " + error);
        });
}

The docs say that the picture parameter needs to be supplied The bitmap to be used as the payload for the BigPicture notification.

The data i get from res.path() is /data/user/0/com.example/files/RNFetchBlobTmp_k82h0qbvdxjjj4a71f0fd.jpg is that the correct way or should I be giving file:///data/user/0/com.example/files/RNFetchBlobTmp_z5d5qibnrglyzqwqoymo.jpg or something else?

[judemanutd]

Managed to get image working in android, the doc currently does not give alot of information about the type of data that needs to be given for the picture parameter.

For those looking it needs an http or https link or a filename that points to a mipmap resource in the android res directory.

I have created a PR to add the necessary info to the docs.

[chrisbianca]

@judemanutd RE: Android. I've just pushed up a change which should support file:// urls. This will be released as part of v4.0.1 shortly. Would you be able to verify if this is the case?

RE: iOS. I will investigate as part of v4.0.2

[judemanutd]

@chrisbianca Yes I can verify the change once its live. Looking forward to the issue being sorted with iOS too, are there any hardware requirements for the iOS notification with an image to show? 3D touch ? Higher screen resolution ?

[chrisbianca]

@judemanutd v4.0.1 is available now. I'm not sure on the iOS notification to be honest, I'll have some time to look into it later this week.

[judemanutd]

@chrisbianca would it be possible to provide an example usage for adding an attachment in iOS for a notification, maybe an example y'all used during development which i could test.

[judemanutd]

@chrisbianca Using 4.0.1 but unable to get image in notification using file:// url.

 _createNotif = () => {
        let dirs = RNFetchBlob.fs.dirs;
        RNFetchBlob.config({
            path: dirs.DownloadDir + '/testing.jpg'
        }).fetch('GET', "https://img.youtube.com/vi/YjMSttRJrhA/0.jpg")
            .then((res) => {

                console.log("File url = ", `file://${res.path()}`);

                let notification = new firebase.notifications.Notification()
                    .setNotificationId('12')
                    .setTitle('title')
                    .setBody('description')
                    .android.setChannelId('test_channel')
                    .android.setBigPicture(`file://${res.path()}`)
                    .setData({
                        key: true,
                        key2: false
                    });

                const channel = new firebase.notifications.Android.Channel('test_channel', 'Test Channel', firebase.notifications.Android.Importance.Max)
                    .setDescription('Testing channel');

                firebase.notifications().android.createChannel(channel).then(() => {
                    firebase.notifications().displayNotification(notification);
                });

            });

    };

This produces a file url file:///storage/emulated/0/Download/testing.jpg

Testing on Android 7.1.1 API 25

P.S. I think we need to shift this to a separate thread rather than hijacking the ios issue.

[chrisbianca]

This is now fixed, pending release of v4.0.3

[MrLoh]

@judemanutd @chrisbianca

Is there an example how to get this to work on iOS? There seems to be a lack of examples for these advanced topics. What exactly does the URL have to look like that I pass to addAttachement? My current setup is something like this:

const res = await RNFetchBlob
  .config({ fileCache: true, appendExt: 'jpg' })
  .fetch('GET', 'https://static.cinuru.com/public/backdropSmall/1524495663496.jpg');
notification.ios.addAttachment('1', `file://${res.path()}`);

The created path looks like this:
file:///var/mobile/Containers/Data/Application/4396DF40-11CF-4925-A700-00DD33277512/Documents/RNFetchBlob_tmp/RNFetchBlobTmp_h29pji7jzgejuk46y5pcei.jpg

[judemanutd]

@MrLoh just ${res.path()} is fine for iOS, you need file://${res.path()} if you're using android

[MrLoh]

awesoe, that did the trick. I thought I had tried all combinations, clearly I didn't.

[AkilLis]

Just let me know guys @MrLoh @judemanutd . Attached file must be local file or it is work with external url as well?

[MrLoh]

@AkilLis must be downloaded locally first with something like RNFetchBlob.

[venux92]

How does it works when the app is in the background or close?
I had it to work in foreground but as soon as the app is in the background or killed I only have the text no more image.
Any ideas?

[MrLoh]

@venux92 https://www.pushbots.help/install-pushbots-in-your-app-or-website/ios/creating-notification-service-extension

[venux92]

@MrLoh Great thanks