How to Configure and Integrate SDK in Your React Native app

Integrating the BoldDesk Mobile Support SDK into your React Native application enables you to deliver a complete in-app support experience for your users. With this SDK, you can embed a help center that allows users to access Knowledge Base articles, submit support tickets, and receive real-time notifications—all without leaving your app.

This guide will walk you through the steps to configure and integrate the BoldDesk SDK for React Native, including:

• Installing the SDK using npm and linking iOS dependencies.
• Initializing the SDK and authenticating users with JWT.
• Displaying modules such as Knowledge Base, Submit Ticket, and Dashboard.
• Customizing the UI with themes, fonts, and branding elements.
• Setting up push notifications using Firebase Cloud Messaging (FCM).
• Enabling error logging and reviewing available APIs.

By following this guide, you’ll ensure a seamless, branded support experience for your React Native users while maintaining secure authentication and real-time communication.

SDK Installation

Add SDK dependency

Install the SDK using npm

npm install bolddesk_support_sdk

After installation, run

npx pod-install

This ensures the iOS native dependencies are linked, you can find the latest package version here React Native Package.

Import SDK

In your main.tsx or the file where you want to use the SDK:

import BoldDeskSupportSDK from 'bolddesk_support_sdk';

Add the following permissions in Info.plist

<key>NSCameraUsageDescription</key>
<key>NSMicrophoneUsageDescription</key>
<key>NSPhotoLibraryUsageDescription</key>

Add the following permissions in AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> //To download or upload attachment via SDK
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" /> //To receive pushnotification in your app
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera.any" />

Initialization and Authentication

Initialize SDK

Initialize the SDK early in your app, typically in your main component or startup script.

BoldDeskSupportSDK.initialize((
    appId = "YOUR_APP_ID",
    brandURl = "yourdomain.bolddesk.com"
)

Authenticate User with JWT

Learn more on How to Authenticate Users in BoldDesk Mobile SDK.

Use this method to authenticate SDK In your app after your backend generates a JWT token for the logged-in user.

BoldDeskSupportSDK.LoginWithJWTToken("JWT_TOKEN")

Logout

To unauthenticate a user, call the logout API. This will remove the user’s authentication and clear their session from the SDK.

if !BoldDeskSupportSDK.isLoggedIn() //check user logged-In or token expired
{
    //Call login API for authenticate user.
    BoldDeskSupportSDK.loginWithJWTToken(jwtToken = "Your JWT token", 
    (success) => {
          BoldDeskSupportSDK.logout(context)
      })
}
else
    BoldDeskSupportSDK.logout(context)

Reset SDK

Use this to clear all user data and cached content.

BoldDeskSupportSDK.clearAllLocalData()

Display Modules

The SDK provides independent and combined modules to integrate specific features into your app.

Knowledge Base (KB)

Displays articles, categories, and search functionality.

BoldDeskSupportSDK.showKB()

Submit Ticket Page

Opens a form for creating new support tickets.

BoldDeskSupportSDK.showSubmitTicket()

Dashboard (Home)

Displays a combined dashboard view with KB and Ticket options.

BoldDeskSupportSDK.showHome()

UI Customization

Apply Theme

You can dynamically apply themes for appbar and buttons

BoldDeskSupportSDK.applyTheme(
    primaryColor = "#1976D2",     // App primary color
    accentColor = "#FFC107"       // Buttons
)

Theme Modes

Set Custom Header Logo

You can display your brand logo in SDK headers.

BoldDeskSDKHome.SetHeaderLogo("Your brand logo URL")

Custom Header Titles & Descriptions

You can modify section headers and description texts for:

• Home Dashboard
• Knowledge Base
• Submit Ticket

BoldDeskSDKHome.Set(
    header = "Welcome to BoldDesk Help Center",
    description = "How can we help? We're here for you!",
    kbTitle = "Knowledge Base",
    kbDescription = "Explore help articles and FAQs.",
    ticketTitle = "Submit Ticket",
    ticketDescription = "Need assistance? Create a ticket below."
)

Font Customization

The SDK supports custom fonts defined in your main application

Include Font Files

• Add your custom font files in your project under

./assets/fonts/

• Link the assets in react-native.config.js

module.exports = {
  assets: ['./assets/fonts],
  };

Register Fonts in Code

BDPortalConfiguration.customFontName = "Inter" or "Roboto" //font name

Fallback

If no custom font is set, SDK will use your app theme’s default typeface.

Push Notification Integration

The SDK supports push notifications using Firebase Cloud Messaging (FCM) to alert users about ticket updates and responses.

Add Firebase to Your Project

• Go to Firebase Console Add Firebase to your project
• Add a new iOS and Android app and register it with your Bundle Identifier
• Download the generated GoogleService file
• Add the file to your project
• Add Firebase dependencies in your package.json

"@react-native-firebase/app": "^23.4.1",
"@react-native-firebase/messaging": "^23.4.1",

Register push notifications

To register push notifications, include the following code snippet where you need to register token after initialized Firebase in your project.

await messaging().getToken();
BoldDeskSupportSDK.setFCMRegistrationToken(fcmToken) // register token to SDK 

Handling push notifications

To handle push notifications, include the following code snippet in the onMessage listen.

 messaging().onMessage(async remoteMessage => {
 if !BoldDeskSupportSDK.isLoggedIn() //check user logged-In or token expired
    {
        //Call login API for authenticate user.
        BoldDeskSupportSDK.loginWithJWTToken(jwtToken = "Your JWT token", 
        (success) => {
              if (Platform.OS === 'android') {
                // Icon should be Drawable source
                BoldDeskSupportSDK.showNotification(remoteMessage.data, "Your app logo");
              }
            if (Platform.OS === 'ios') {
                BoldDeskSupportSDK.handleNotification(remoteMessage.data);
              }
          })
    }
    else
       BoldDeskSupportSDK.handleNotification(remoteMessage.data); //for iOS
   }

Error Logging

Enable debug logging during development to view detailed SDK logs in Logcat.

 BoldDeskSupportSDK.setLoggingEnabled()

API Reference

Limitation

Single SDK Instance:

Only one instance of the Support SDK can run at a time. Initializing multiple instances simultaneously is not supported and may lead to unexpected behavior.

Language Support:

The current version of the SDK supports only the en-US language. Additional language support will be added in future releases.

Sample App

A sample application is provided along with the SDK package to help you understand the integration flow and available features.
You can use this app to explore the SDK behavior before integrating it into your own project React Sample

Frequently Asked Questions (FAQ)

Q1: What is the BoldDesk Mobile Support SDK for React Native?
The BoldDesk Mobile Support SDK allows you to embed a help center in your React Native app, enabling users to access Knowledge Base articles, submit tickets, and receive real-time notifications without leaving the app.

Q2: How do I install the SDK in my React Native project?
You need to:

• Install the SDK using npm:
  npm install bolddesk_support_sdk
• Run:
  npx pod-install
  This ensures iOS native dependencies are linked.

Q3: What permissions should I add for iOS and Android?

• iOS (Info.plist):
  • NSCameraUsageDescription
  • NSMicrophoneUsageDescription
  • NSPhotoLibraryUsageDescription
• Android (AndroidManifest.xml):
  • INTERNET
  • ACCESS_NETWORK_STATE
  • READ_EXTERNAL_STORAGE (for attachments)
  • POST_NOTIFICATIONS (for push notifications)

Q4: How do I initialize the SDK?
Call:

BoldDeskSupportSDK.initialize(
    appId = "YOUR_APP_ID",
    brandURl = "yourdomain.bolddesk.com"
)

Initialize early in your app, typically in your main component or startup script.

Q5: How do I authenticate users?
Authentication uses JWT tokens generated by your backend. After login, call:

BoldDeskSupportSDK.LoginWithJWTToken("JWT_TOKEN")

Learn more about authentication flow in the related guide.

Q6: How do I log out or reset the SDK?

• To log out:

BoldDeskSupportSDK.logout(context)

• To clear all cached data:

BoldDeskSupportSDK.clearAllLocalData()

Q7: What modules can I display in my app?
You can show:

• Knowledge Base: BoldDeskSupportSDK.showKB()
• Submit Ticket Page: BoldDeskSupportSDK.showSubmitTicket()
• Dashboard (Home): BoldDeskSupportSDK.showHome()

Q8: Can I customize the SDK UI?
Yes, you can:

• Apply themes using applyTheme().
• Set light/dark/system theme modes.
• Add custom header logos and modify section titles.
• Apply custom fonts defined in your React Native project.

Q9: How do I enable push notifications?
Integrate Firebase Cloud Messaging (FCM):

• Add Firebase dependencies in package.json:
  “@react-native-firebase/app”: “^23.4.1”,
  “@react-native-firebase/messaging”: “^23.4.1”
• Register your app in Firebase Console.
• Forward the FCM token to SDK using:

BoldDeskSupportSDK.setFCMRegistrationToken(fcmToken)

Handle notifications using:

BoldDeskSupportSDK.showNotification() or BoldDeskSupportSDK.handleNotification()

Q10: Does the SDK support multiple instances or languages?

• Multiple instances: No, only one SDK instance can run at a time.
• Languages: Currently supports only en-US. More languages will be added in future releases.