App Inbox

The CleverTap React Native SDK provides the capability to create App Inbox notifications for your users.
You can use the App Inbox provided by CleverTap or create your own.
You can design App Inbox notifications right from the dashboard.

Android

On the Android side, add the following inbox dependencies in your app's build.gradle.

//MANDATORY for App Inbox

implementation 'androidx.appcompat:appcompat:1.3.1'
implementation 'androidx.recyclerview:recyclerview:1.2.1'
implementation 'androidx.viewpager:viewpager:1.0.0'
implementation 'com.google.android.material:material:1.4.0'
implementation 'com.github.bumptech.glide:glide:4.12.0'

//Optional ExoPlayer Libraries for Audio/Video Inbox Messages. Audio/Video messages will be dropped without these dependencies

implementation 'com.google.android.exoplayer:exoplayer:2.17.1'
implementation 'com.google.android.exoplayer:exoplayer-hls:2.17.1'
implementation 'com.google.android.exoplayer:exoplayer-ui:2.17.1'

React-Native

Initializing the Inbox provides a callback to two methods inboxDidInitialize() and inboxMessagesDidUpdate()

CleverTap.initializeInbox();

Configure styling and show the inbox by:

Customize the config object and call the Inbox in the inboxDidInitialize() method
Call this method on the button click which opens the CleverTap Inbox for your App

CleverTap.addListener(CleverTap.CleverTapInboxDidInitialize, (event) => {
        _handleCleverTapInbox(CleverTap.CleverTapInboxDidInitialize, event);
    });

function _handleCleverTapInbox(eventName, event) {
    console.log('CleverTap Inbox Event - ', eventName, event);
    CleverTap.showInbox({
        'tabs': ['Offers', 'Promotions'],
        'navBarTitle': 'My App Inbox',
        'navBarTitleColor': '#FF0000',
        'navBarColor': '#FFFFFF',
        'inboxBackgroundColor': '#AED6F1',
        'backButtonColor': '#00FF00',
        'unselectedTabColor': '#0000FF',
        'selectedTabColor': '#FF0000',
        'selectedTabIndicatorColor': '#000000',
        'noMessageText': 'No message(s)',
        'noMessageTextColor': '#FF0000'
    });
}

When a new inbox message arrives, the SDK provides the inboxMessagesDidUpdate() callback

CleverTap.addListener(CleverTap.CleverTapInboxMessagesDidUpdate, (event) => {
        _handleCleverTapInbox(CleverTap.CleverTapInboxMessagesDidUpdate, event);
    });

function _handleCleverTapInbox(eventName, event) {
    console.log('CleverTap Inbox Event - ', eventName, event);
}

Receiving inbox item click callback

The SDK supports callback on the click of an App Inbox Item, such as text or media. To use this, add a callback for CleverTap.CleverTapInboxMessageTapped.

CleverTap.addListener(CleverTap.CleverTapInboxMessageTapped, (event) => {/*consume the payload*/});

Receiving inbox item's button click callback

The SDK supports callback on the click of App Inbox Buttons by returning a Map of Key-Value pairs. To use this, add a callback for CleverTap.CleverTapInboxMessageButtonTapped.

CleverTap.addListener(CleverTap.CleverTapInboxMessageButtonTapped, (event) => {/*consume the payload*/});

Creating your own App Inbox

You can choose to create your own App Inbox by calling the following APIs

Initialize App Inbox

CleverTap.initializeInbox();

Show App Inbox

CleverTap.showInbox({
        'tabs': ['Offers', 'Promotions'],
        'navBarTitle': 'My App Inbox',
        'navBarTitleColor': '#FF0000',
        'navBarColor': '#FFFFFF',
        'inboxBackgroundColor': '#AED6F1',
        'backButtonColor': '#00FF00',
        'unselectedTabColor': '#0000FF',
        'selectedTabColor': '#FF0000',
        'selectedTabIndicatorColor': '#000000',
        'noMessageText': 'No message(s)',
        'noMessageTextColor': '#FF0000'
    });

Get Total Inbox Message Count

CleverTap.getInboxMessageCount((err, res) => {
        console.log('Total Messages: ', res, err);
    });

Get Total Inbox Unread Count

CleverTap.getInboxMessageUnreadCount((err, res) => {
        console.log('Unread Messages: ', res, err);
    });

Get All Inbox Messages

CleverTap.getAllInboxMessages((err, res) => {
        console.log('All Inbox Messages: ', res, err);
    });

Get All Inbox Unread Messages

CleverTap.getUnreadInboxMessages((err, res) => {
        console.log('Unread Inbox Messages: ', res, err);
    });

Get Inbox Message for the given message-id

CleverTap.getInboxMessageForId('Message Id', (err, res) => {
        console.log("marking message read = " + res);
    });

Delete Message for the given message-id

CleverTap.deleteInboxMessageForId('Message Id');

Mark Message as Read for the given message-id

CleverTap.markReadInboxMessageForId('Message Id');

Raise Notification Viewed event for Inbox Message

Message-id must be a String

CleverTap.pushInboxNotificationViewedEventForId('Message Id');

Raise Notification Clicked event for Inbox Message

Message-id must be a String

CleverTap.pushInboxNotificationClickedEventForId('Message Id');