Appearance and text

Android: declare a colour with the same name in your app's res/values/colors.xml, and in res/values-night/colors.xml for dark mode. Yours wins over Bubbl's.

<resources>
    <color name="bubbl_accent">#FF0A7A6E</color>
    <color name="bubbl_on_accent">#FFFFFFFF</color>
</resources>

iOS: add a colour set with the same name to your app's asset catalogue, with light and dark variants. Bubbl looks each one up in your app's main bundle and falls back to its own.

Android only#

• bubbl_channel_name ("Offers and updates") and bubbl_channel_description ("Messages and surveys from this app"): the notification channel users see in system settings.
• bubbl_background_channel_name ("Background updates") and bubbl_background_working ("Checking for updates"): shown only on Android 11 and older, briefly and silently, while an update runs in the background.
• bubbl_media_position ("%1$s / %2$s"): an audio clip's position and length.

Status bar icon#

Bubbl's status bar icon is your app's tech.bubbl.sdk.notification_icon meta-data in AndroidManifest.xml. Without it, Bubbl uses Firebase's default notification icon, then your app icon.

<application ...>
    <meta-data
        android:name="tech.bubbl.sdk.notification_icon"
        android:resource="@drawable/ic_notification" />
</application>

Expo apps#

Expo writes android/ and ios/ afresh at every npx expo prebuild (EAS Build runs it too), so files you add there by hand are lost. Bubbl's config plugin has no colour or text options: the only words it sets are iOS's location permission prompts, with ios.locationWhenInUse and ios.locationAlways. BubblOptions takes no appearance settings either. To ship overrides from an Expo app, do one of these:

• Add a small config plugin of your own that writes the files at prebuild, like the one below.
• Stop regenerating the native folders (keep android/ and ios/ in your repository) and add the files as a React Native app does.

This plugin sets colours on both platforms. Colours are written #AARRGGBB, as on Android.

const { withDangerousMod } = require('expo/config-plugins');
const fs = require('fs');
const path = require('path');

const colors = { bubbl_accent: '#FF0A7A6E', bubbl_on_accent: '#FFFFFFFF' };

const withAndroidColors = (config) =>
  withDangerousMod(config, ['android', (config) => {
    const dir = path.join(config.modRequest.platformProjectRoot, 'app/src/main/res/values');
    fs.mkdirSync(dir, { recursive: true });
    const items = Object.entries(colors).map(([name, value]) => `    <color name="${name}">${value}</color>`);
    fs.writeFileSync(path.join(dir, 'bubbl_colors.xml'), `<?xml version="1.0" encoding="utf-8"?>\n<resources>\n${items.join('\n')}\n</resources>\n`);
    return config;
  }]);

const withIosColors = (config) =>
  withDangerousMod(config, ['ios', (config) => {
    const catalog = path.join(config.modRequest.platformProjectRoot, config.modRequest.projectName, 'Images.xcassets');
    for (const [name, value] of Object.entries(colors)) {
      const [a, r, g, b] = value.slice(1).match(/../g);
      const dir = path.join(catalog, `${name}.colorset`);
      fs.mkdirSync(dir, { recursive: true });
      const components = { alpha: (parseInt(a, 16) / 255).toFixed(3), red: `0x${r}`, green: `0x${g}`, blue: `0x${b}` };
      fs.writeFileSync(path.join(dir, 'Contents.json'), JSON.stringify({
        colors: [{ idiom: 'universal', color: { 'color-space': 'srgb', components } }],
        info: { author: 'xcode', version: 1 },
      }, null, 2));
    }
    return config;
  }]);

module.exports = (config) => withIosColors(withAndroidColors(config));

Then list it after Bubbl's plugin in app.json, and run npx expo prebuild --clean:

{
  "expo": {
    "plugins": ["@bubblsdk/react-native-sdk", "./plugins/withBubblAppearance"]
  }
}

• Dark mode: on Android, write a second file to res/values-night. On iOS, add a dark entry to the colour set's colors (with appearances: [{ appearance: 'luminosity', value: 'dark' }]).
• Text on Android: write bubbl_ strings to a file in res/values the same way, and translations to res/values-<language>.
• Text on iOS: a Bubbl.strings file must be part of the app target, not just in ios/: write it with withDangerousMod, then add it to the project's resources in a withXcodeProject step (for example with IOSConfig.XcodeUtils.addResourceFileToGroup). The colour sets above need no such step, because the asset catalogue is already in the target.