SDK Version

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 explains the advanced configuration options available for remote notifications, how to disable specific SDK behaviors, and how to provide your own custom implementations.

The customizations offered in our library are part of the native SDKs. For more information on what customizations are available, please take a look at the native customization guides.

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 drawable resource 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",
}

iOS Customizations

tip

All the configurations described on this page can be defined in your app’s ActitoOptions.plist file. See the Customizations guide for details on how this file works.

Preserving existing notification categories

If your app already defines custom notification categories, and you want to keep them when Actito registers its own, you can preserve those existing categories by setting the following key in your ActitoOptions.plist:

<key>PRESERVE_EXISTING_NOTIFICATION_CATEGORIES</key>
<true/>

By default, Actito replaces existing notification categories when reloading its own. Enabling this option ensures that your app’s previously registered categories and actions remain available.

When presenting an Image Gallery notification, Actito allows users to share the displayed images by default. If you want to prevent this behavior, you can disable it by adding the following key to your ActitoOptions.plist:

<key>IMAGE_SHARING_ENABLED</key>
<false/>

Custom close query parameter

When presenting Webpage or HTML markup notifications, you can include links with query parameters to trigger in-app actions.

By default, the SDK looks for the notificareCloseWindow query parameter to dismiss the notification. If you’d like to use a different parameter name, you can customize it by adding the following key to your ActitoOptions.plist:

<key>CLOSE_WINDOW_QUERY_PARAMETER</key>
<string>customCloseParam</string>

Safari dismiss button style

When presenting an In-App Browser notification, you can customize the Safari dismiss button that appears in the top right corner. To do so, set the following key in your ActitoOptions.plist:

<key>SAFARI_DISMISS_BUTTON_STYLE</key>
<integer>0</integer>

You can select between three types:

Done: By setting the value 0
Close: By setting the value 1
Cancel: By setting the value 2

Notifications Theming

You can customize the visual appearance of your notifications using the THEMES key in your ActitoOptions.plist. This allows you to define Light and Dark themes, so your notification interfaces remain consistent with your app’s overall style.

Each theme accepts a set of color keys that affect different interface elements, such as backgrounds, buttons, toolbars, and text fields.

<key>THEMES</key>
<dict>
    <key>LIGHT</key>
    <dict>
        <key>BACKGROUND_COLOR</key>
        <string>#000000</string>
        <key>ACTION_BUTTON_TEXT_COLOR</key>
        <string>#000000</string>
        <key>TOOLBAR_BACKGROUND_COLOR</key>
        <string>#000000</string>
        <key>ACTIVITY_INDICATOR_COLOR</key>
        <string>#000000</string>
        <key>BUTTON_TEXT_COLOR</key>
        <string>#000000</string>
        <key>TEXT_FIELD_TEXT_COLOR</key>
        <string>#000000</string>
        <key>TEXT_FIELD_BACKGROUND_COLOR</key>
        <string>#000000</string>
        <key>SAFARI_BAR_TINT_COLOR</key>
        <string>#000000</string>
        <key>SAFARI_CONTROLS_TINT_COLOR</key>
        <string>#000000</string>
    </dict>
    <key>DARK</key>
    <dict>
        <key>BACKGROUND_COLOR</key>
        <string>#FFFFFF</string>
        <key>ACTION_BUTTON_TEXT_COLOR</key>
        <string>#FFFFFF</string>
        <key>TOOLBAR_BACKGROUND_COLOR</key>
        <string>#FFFFFF</string>
        <key>ACTIVITY_INDICATOR_COLOR</key>
        <string>#FFFFFF</string>
        <key>BUTTON_TEXT_COLOR</key>
        <string>#FFFFFF</string>
        <key>TEXT_FIELD_TEXT_COLOR</key>
        <string>#FFFFFF</string>
        <key>TEXT_FIELD_BACKGROUND_COLOR</key>
        <string>#FFFFFF</string>
        <key>SAFARI_BAR_TINT_COLOR</key>
        <string>#FFFFFF</string>
        <key>SAFARI_CONTROLS_TINT_COLOR</key>
        <string>#FFFFFF</string>
    </dict>
</dict>

Available keys

BACKGROUND_COLOR: The main background color for the notification view.
ACTION_BUTTON_TEXT_COLOR: The text color of action buttons displayed in notifications.
TOOLBAR_BACKGROUND_COLOR: The color of any toolbar used within notification views.
ACTIVITY_INDICATOR_COLOR: The tint color of loading indicators.
BUTTON_TEXT_COLOR: The general text color of buttons used in interactive notifications.
TEXT_FIELD_TEXT_COLOR: The color of text inside text input fields.
TEXT_FIELD_BACKGROUND_COLOR: The background color of text fields.
SAFARI_BAR_TINT_COLOR: The background tint color of the Safari view controller used for in-app browser notifications.
SAFARI_CONTROLS_TINT_COLOR: The tint color for controls (e.g., buttons) within the Safari view controller.

Localizable texts

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...

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

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

{
  "actito_ok_button": "OK",
  "actito_cancel_button": "Cancel",
}

Android Customizations​

Notification Icon Settings​

Notifications UI​

Localizable Texts​

iOS Customizations​

Preserving existing notification categories​

Disable Image Sharing​

Custom close query parameter​

Safari dismiss button style​

Notifications Theming​

Available keys​

Localizable texts​