Notificare Docs
Quick Wins
FAQ
Guides
SDK
API

SDK

    Customizations

    Native customizations

    In this page we'll dive deeper into several aspects of our Android and iOS libraries that can be customized to match your needs. Most of the options in iOS are set through NotificareServices.plist file, make sure to set its location in your app.json:

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

    "plugins": [
      [
        "react-native-notificare",
        {
          "ios": {
            "optionsFile": "./configuration/NotificareOptions.plist"
          }
        }
      ]
    ]
  }
}

    An empty NotificareServices.plist will look like the following:

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
</dict>
</plist>

    Disabling crash reporting

    By default, our library sends crash reports to our servers, which you can access via the Dashboard > Your App > Events > Application Error, in order to facilitate the debugging process for developers. If you would like to opt-out, use the following option:

    Android
    iOS

    In your app.json:

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

    "plugins": [
      [
        "react-native-notificare",
        {
          "android": {
            "crashReportingEnabled": false
          }
        }
      ]
    ]
  }
}

    In your NotificareOptions.plist:

    <plist version="1.0">
<dict>
	<key>CRASH_REPORTING_ENABLED</key>
	<false/>
</dict>
</plist>

    Notification Icon Settings

    This customization is only available for Android. Notificare will use the application icon as the icon for notifications. You can change this behaviour by specifying the following in your app.json:

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

    "plugins": [
      [
        "react-native-notificare-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"
            }
          }
        }
      ]
    ]
  }
}

    Increase the limit for monitored regions

    When location updates are enabled and the appropriate permissions have been granted, our library automatically monitors both regions and beacons. The operative system allows a maximum of 100 (Android) and 20 (iOS) regions and, we monitor 10 regions by default. You can customize an upper limit for region monitoring by adding the following option:

    Android
    iOS

    In your app.json:

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

    "plugins": [
      [
        "react-native-notificare-geo",
        {
          "android": {
            "monitoredRegionsLimit": 20
          }
        }
      ]
    ]
  }
}

    In your NotificareOptions.plist:

    <plist version="1.0">
<dict>
    <key>MONITORED_REGIONS_LIMIT</key>
    <integer>20</integer>
</dict>
</plist>

    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 at the following links: iOS and Android.

    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-notificare-push-ui",
        {
          "ios": {
            "locales": {
              "default": "./languages/ios/default.json",
              "fr": "./languages/ios/french.json"
            }
          },
          "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:

    {
  "notificare_ok_button": "OK",
  "notificare_cancel_button": "Cancel",
}

    Complete options list

    App.json
    NotificareOptions.plist

    Properties for react-native-notificare:

    export type NotificarePluginProps = {
  /**
   * (required) Set of iOS properties.
   */
  ios: {
    /**
     * (required) Local path to NotificareServices.plist file.
     */
    servicesFile: string;

    /**
     * (optional) NotificareOptions.plist file to customize SDK.
     */
    optionsFile?: string;
  };

  /**
   * (required) Set of Android properties.
   */
  android: {
    /**
     * (required) Local path to notificare-services.json file.
     */
    servicesFile: string;

    /**
     * (optional) Enabled by default. Sends crash reports to our server, accessible in Dashboard > Your App > Events > Application Error.
     */
    crashReportingEnabled?: boolean;

    /**
     * (optional) Enable debug logging for the SDK to aid in development by providing information about SDK behavior and operations. This helps identify and resolve issues.
     */
    debugLoggingEnabled?: boolean;
  };
};

    Properties for react-native-notificare-push:

    export type NotificarePushPluginProps = {
  /**
   * (required) Set of iOS properties.
   */
  ios: {
    /**
     * (optional) Used to configure APNs environment entitlement. Modes: "development" or "production".
     */
    mode: NotificareApnsEnvironment;

    /**
     * (optional) Use Notificare Notification Service Extension to provide users with rich content in the lock screen such as images.
     */
    useNotificationServiceExtension?: boolean;

    /**
     * (optional) Minimum supported iOS version for Notificare Notification Service Extension. This should match your application deployment target.
     */
    deploymentTarget?: string;
  };

  /**
   * (optional) Set of Android properties.
   */
  android?: {
    /**
     * (optional) Customisations for notification when appears in the status bar or notification drawer.
     */
    notification?: {
      /**
       * (optional) Local path to an image used as the icon for push notifications. The image should be a 96x96 all-white PNG with transparency. App icon is used as default.
       */
      smallIcon?: string;

      /**
       * (optional) Tint applied to notifications small icon when it appears in the notification drawer.
       */
      smallIconAccentColor?: string;
    };

    /**
     * (optional) List of schemes you would like to take a proper action whenever users click in hypertext links in a Notificare's HTML or Web Page notification type.
     * When set, any click on the link in the HTML or Web Page notification type, would be intercepted by our library and trigger the event NotificarePushUI.onNotificationUrlClicked.
     */
    urlSchemes?: string[];
  };
};

export type NotificareApnsEnvironment = 'development' | 'production';

    Properties for react-native-notificare-push-ui:

    export type NotificarePushUIPluginProps = {
  /**
   * (optional) Set of iOS properties.
   */
  ios: {
    /**
     * (optional) Localized strings used when presenting notifications.
     * Key corresponds to the language identifier (e.g., 'nl' for Dutch) or default value (e.g., 'default' for Base).
     * Value is the local path to a JSON file containing the localized strings.
     *
     * Note: you must set CFBundleAllowMixedLocalizations to true in infoPlist.
     *
     * Example:
     * {
     *  "default": "./languages/default.json"
     *   "nl": "./languages/dutch.json"
     * }
     *
     * Example file:
     * {
     *   "notificare_ok_button": "Oke"
     * }
     */
    locales?: {
      [key: string]: string;
    };
  };

  /**
   * (optional) Set of Android properties.
   */
  android?: {
    /**
     * (optional) Used by default unless set to FALSE or a custom style is specified. Extends "AppTheme" and ensures floating alerts over your content on an Android app. It also enables the action bar for other types when appropriate.
     */
    useTranslucentStyle?: boolean;

    /**
     * (optional) Theme to be used when presenting notifications. Example: AppTheme.Custom
     */
    customStyle?: string;

    /**
     * (optional) Localized strings used when presenting notifications.
     * Key corresponds to the language identifier (e.g., 'nl' for Dutch) or default value (e.g., 'default').
     * Value is the local path to a JSON file containing the localized strings.
     *
     * Note: you must set CFBundleAllowMixedLocalizations to true in infoPlist.
     *
     * Example:
     * {
     *   "default": "./languages/default.json"
     *   "nl": "./languages/dutch.json"
     * }
     *
     * Example file:
     * {
     *   "notificare_dialog_ok_button": "Oke"
     * }
     */
    locales?: {
      [key: string]: string;
    };
  };
};

    Properties for react-native-notificare-geo:

    export type NotificareGeoPluginProps = {
  /**
   * (optional) Set of Android properties.
   */
  android?: {
    /**
     * (optional) Number os regions being monitored. The operative system allows a maximum of 100 regions and, we monitor 10 regions by default.
     */
    monitoredRegionsLimit?: number;

    /**
     * (optional) The only way to have your app scan for beacons more often on Android version Oreo and up, is by starting the scan as a foreground service.
     * Foreground services will be shown to the user as an ongoing notification.
     */
    beaconForegroundServiceEnabled?: boolean;

    /**
     * (optional) Local path to an image used as the icon for beacon foreground service notifications. The image should be a 96x96 PNG.
     */
    beaconForegroundServiceSmallIcon?: string;

    /**
     * (optional) Title for beacon foreground service notifications.
     */
    beaconForegroundServiceTitle?: string;

    /**
     * (optional) Message informing the user why the app is scanning for beacons.
     */
    beaconForegroundServiceMessage?: string;

    /**
     * (optional) Show progress bar for beacons foreground service notification.
     */
    beaconForegroundServiceShowProgress?: boolean;
  };
};

    Properties for react-native-notificare-scannables:

    export type NotificareScannablesPluginProps = {
  /**
   * (optional) Set of Android properties.
   */
  android?: {
    /**
     * (optional) Custom activity theme that is shown when a scannable session is started. Example: AppTheme.Custom
     */
    customStyle?: string;
  };
};

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>DEBUG_LOGGING_ENABLED</key>
    <true/>
    <key>AUTO_CONFIG</key>
    <true/>
    <key>SWIZZLING_ENABLED</key>
    <true/>
    <key>USER_NOTIFICATION_CENTER_DELEGATE_ENABLED</key>
    <true/>
    <key>PRESERVE_EXISTING_NOTIFICATION_CATEGORIES</key>
    <false/>
    <key>CRASH_REPORTING_ENABLED</key>
    <true/>
    <key>HEADING_API_ENABLED</key>
    <true/>
    <key>VISITS_API_ENABLED</key>
    <true/>
    <key>URL_SCHEMES</key>
    <array>
        <string>com.example.app</string>
    </array>
    <key>CLOSE_WINDOW_QUERY_PARAMETER</key>
    <string>notificareCloseWindow</string>
    <key>IMAGE_SHARING_ENABLED</key>
    <true/>
    <key>SAFARI_DISMISS_BUTTON_STYLE</key>
    <integer>0</integer>
    <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>
</dict>
</plist>