[Feature]: Support configuration of com_braze_push_small_notification_icon (and possibly others) via this plugin

[joeyuscca]

What problem are you facing?

When setting up push notifications for android following the expo docs here there was no mention of custom small icons, as well as other custom configuration that is available through the standard docs via configuration in the braze.xml file.

I was stuck with one of those sexy mono-color squares for a small icon until I stumbled across the standard integration docs and realized what was up.

To simplify the workflow and avoid needing to edit the braze.xml file directly, it'd be nice if some new config options were added to ConfigProps and the ANDROID_CONFIG_MAP so that way these items could be configured when calling, withBraze.

The workaround described allows me to do this by passing config including these to withBraze

  'notificationSmallIcon': '@drawable/notification_icon',
  'notificationAccentColor': '@color/notification_icon_color'

Workarounds

As an npm postinstall I currently run this script to modify ANDROID_CONFIG_MAP and withBrazeAndroid implementation so that I can set notification icon and accent color with the config I pass to withBraze.

const brazeAndroidConstantsPath = `${process.cwd()}/node_modules/@braze/expo-plugin/build/brazeAndroidConstants.js`;
let brazeAndroidConstantsContents = fs.readFileSync(brazeAndroidConstantsPath).toString();
brazeAndroidConstantsContents = brazeAndroidConstantsContents.replace(
  'exports.ANDROID_CONFIG_MAP = {',
  `exports.ANDROID_CONFIG_MAP = {
    "notificationSmallIcon": ["com_braze_push_small_notification_icon", 'drawable'],
    "notificationAccentColor": ["com_braze_default_notification_accent_color", 'color'],`);
fs.writeFileSync(brazeAndroidConstantsPath, brazeAndroidConstantsContents);

const withBrazeAndroidPath = `${process.cwd()}/node_modules/@braze/expo-plugin/build/withBrazeAndroid.js`;
let withBrazeAndroidContents = fs.readFileSync(withBrazeAndroidPath).toString();
withBrazeAndroidContents = withBrazeAndroidContents.replace(`break;
            }`, `break;
                default:
                    brazeXml += \`<\${xmlKeyType} name="\${xmlKeyName}">\${value}</\${xmlKeyType}>\`;
            }`);
fs.writeFileSync(withBrazeAndroidPath, withBrazeAndroidContents);

Ideal Solution

Something along the lines of this...

• Add the following entries to the ANDROID_CONFIG_MAP portion of src/brazeAndroidConstants.ts:

"notificationSmallIcon": ["com_braze_push_small_notification_icon", 'drawable'],
"notificationAccentColor": ["com_braze_default_notification_accent_color", 'color'],

• Add the following entries to ConfigProps in src/types.ts:

notificationSmallIcon?: string,
notificationAccentColor?: string

• Add a default xml tag case to src/withBrazeAndroid - or add new explicit cases for drawable/color if you prefer that

default:
    brazeXml += `<${xmlKeyType} name="${xmlKeyName}">${value}</${xmlKeyType}>`;

Other Information

It'd be worth considering other braze.xml configurable options to add to this type/map as well. Unless there are particular reasons to exclude certain options from being configured via withBraze might as well add them.

[radixdev]

Hi @joeyuscca ,

We're tracking this internally and will update this issue once support is live.

Thanks for filing,
Julian

[pwfcurry]

Hi @radixdev, any update on this? It looks like the fields have been added 🎉 (thanks), but the TypeScript types.ts file hasn't been updated to reflect.

https://www.braze.com/docs/developer_guide/platform_integration_guides/react_native/react_sdk_setup/#step-2-complete-native-setup

https://github.com/braze-inc/braze-expo-plugin/blob/main/plugin/src/brazeAndroidConstants.ts#L68-L74

https://github.com/braze-inc/braze-expo-plugin/blob/main/plugin/src/types.ts

The following appear to be missing:

androidFirebaseMessagingFallbackServiceClasspath
androidFirebaseMessagingFallbackServiceEnabled
androidNotificationAccentColor
androidNotificationLargeIcon
androidNotificationSmallIcon
androidPushNotificationHtmlRenderingEnabled

[Noitham]

Hey @joeyuscca, how's possible to add @drawable assets via the expo app.json?

[luke-bryant-unmind]

Hey @joeyuscca, how's possible to add @drawable assets via the expo app.json?

I'm also having problems with this. To elaborate on the question, the example in the app.json in the docs is like this:

          "androidNotificationLargeIcon": "@drawable/custom_app_large_icon",
          "androidNotificationSmallIcon": "@drawable/custom_app_small_icon",

I'm trying to use expo Continuous Native Generation, so I can't just add these assets to android/app/src/main/res without writing a custom plugin. Other icons configured in expo take a path to an asset, which is injected by expo during prebuild. Ideally these fields would support this format as well.

[YentingChen]

Hey @joeyuscca, how's possible to add @drawable assets via the expo app.json?

I'm having problems with this too, more detailed guidance would be helpful, thank you.