[🐛] Android push notifications in background with images containing exif metadata sometimes rotated incorrectly

[markoboras0712]

I have rn mobile app developed using https://expo.dev/ and for push notifications I'm using @react-native-firebase/messaging (background and terminated states).
Push notifications are sent through FCM via our backend.

Everything works as intended but I have issue on android devices.
Our push notifications contain images that are stored on amazon s3 buckets (example https://s3.us-east-1......./files/public/..../w700/1....jpg)

If you inspect exif metadata for this image you can see that it has orientation rotate 90 CW https://jimpl.com/results/Lz1h8ohTfFbK7o1QzvWHcrXQ?target=exif

For background and terminated states I have in my app registered listeners setBackgroundMessageHandler and getInitialNotification where my push notifications are auto displayed correctly.

My issue is following:

• If image stored on amazon s3 bucket has inside of it EXIF metadata, image in background and terminated states on android is rotated by 90 degrees.

NOTE:

• I've recreated issue locally where I've created node js server to test this and if I strip from image exif metadata, reupload it, get image url and pass it in send of push notification, image is displayed correctly. Issue is that our system hundreds and hundreds of assets and they're coming from different sources.
• If I send data-only push notifications auto display is ignored and I can display push notifications using https://notifee.app/ for background, foreground and terminated states, but I don't want to do that because I'm losing auto display feature and I need to handle a lot of more things inside of my mobile app.

Question

• Can I somehow control to ignore EXIF metadata when image is auto displayed?

[MichaelVerdon]

Can you please add a description?

[markoboras0712]

@MichaelVerdon sorry, I've updated now description.

[mikehardy]

This problem is even more fun I bet - I am willing to wager that the problem is device-specific and probably happens most on Samsung / Sony / maybe LG devices. Maybe doesn't happen on Pixel? Or does this really happen on every device?

In my experience the internet is littered with this problem and you can see it if you search for it

https://duckduckgo.com/?q=Android+image+rotated+incorrectly+90+degrees+EXIF

I'm not aware of a general solution on-device (other than notifee, which you mention). You may be able to wrap the storage fetch from s3 into a firebase function that sits between your app and the s3 storage and manipulates the EXIF data such that android devices consume it correctly. (so you would send FCM that reference an image URL that was your cloud function, not the s3 image directly, and the function gets a chance to "fix" the image as needed )

[markoboras0712]

@mikehardy

I am testing on xiaomi and samsung and on both of them this issue happens. On some android devices (don't know right now which one), it renders good.

Yeah there is a lot of issues with exif metadata for android.

Your solution that you're recommending for firebase function between my app and s3 storage seems legit, but IMHO if I am going to strip exif metadata I can do it directly in backend function where I'm sending push notification to device.

Issue with this approach is that I need to process image, strip exif metadata, reupload image somewhere to get image url and pass that imageUrl to my push notification.

Do you have any other recommendation or is it possible to fix this inside of @react-native-firebase/messaging lib?

[MichaelVerdon]

There are supposedly third party plugins that can remove exif metadata for javascript, that could be the simplest solution. I don't believe the native sdks after some research even support letting you deal with Exif Metadata through messaging itself and if that is the case, we certainly won't be able to support it here unless the native sdks support it there. I would recommend reporting it here