Android Customizations

By default, the Actito SDK automatically handles most of the complexity around remote notifications on Android.

However, you may want finer control over how these mechanisms integrate with your app’s architecture and notification strategy. This page describes the advanced configuration options available for push notifications, including how to override default SDK behaviors and customize their appearance.

Notification Icon Settings

By default, the SDK uses your application icon as the small icon for notifications. You can customize this by specifying a custom icon and accent color in your app.json:

{
  "expo": {
    // more code...

    "plugins": [
      [
        "react-native-actito-push",
        {
          "android": {
            "notification": {
            // Local path to an image used as the icon for push notifications. The image should be a 96x96 all-white PNG with transparency.
            "smallIcon": "./assets/notification-icon.png",

            // Tint applied to notifications small icon when it appears in the notification drawer. (Ex: "#ffffff")
            "smallIconAccentColor": "#fc0366"
            }
          }
        }
      ]
    ]
  }
}

Notifications UI

When your app defines Android themes, you can also customize the visual appearance of Actito notifications by applying your own theme. This allows you to ensure consistent branding and appearance when presenting push notifications.

Themes are declared in a style resource file within your app’s android res/values folder. You can then assign your custom theme to Actito’s NotificationActivity in your app.json:

{
  "expo": {
    // more code...

    "plugins": [
      [
        "react-native-actito-push-ui",
        {
          "android": {
          // Theme to be used when presenting notifications. Example: AppTheme.Custom
            "customStyle": "AppTheme.Custom",
          }
        }
      ]
    ]
  }
}

You can learn more about theming in the official Android developer guide

When theming the NotificationActivity, we recommend using a transparent background so that Alert notifications appear seamlessly over your app’s content:

<style name="Theme.App.Custom.Translucent">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
</style>

Localizable Texts

Our library ships with support for multiple languages that can be customized. To do so, you just have to set option in your app.json including language code and local path to file containing translations. You can find all the available translation keys here.

Implementation

Example

In your app.json:

Key corresponds to the language identifier (e.g., 'fr' for French) or default value (e.g., 'default').
Value is the local path to a JSON file containing the localized strings.

Note: for iOS, you must set CFBundleAllowMixedLocalizations to true in infoPlist.

{
  "expo": {
    // more code...

    "plugins": [
      [
        "react-native-actito-push-ui",
        {
          "android": {
            "locales": {
              "default": "./languages/android/default.json",
              "fr": "./languages/android/french.json"
            }
          }
        }
      ]
    ]
  }
}

Below is an example of what your JSON file with the localized strings should look like:

{
  "actito_dialog_ok_button": "OK",
  "actito_dialog_cancel_button": "Cancel",
}