react-native-brandmessenger-sdk

Official Khoros Brand Messenger React Native SDK.

Installation

npm install react-native-brandmessenger-sdk

Requirements

• React Native >= 0.60
• iOS 12+ / Android 6.0+
• Node.js >= 12
• See full requirements

Platform Support

• iOS
• Android

Usage

Refer to the official documentation for advanced usage and integration details.

import BrandmessengerSdk from 'react-native-brandmessenger-sdk';

const initCompanyInfo = {
  companyKey: '<COMPANY-KEY>',
  applicationKey: '<APPLICATION-KEY>',
  widgetId: '<WIDGET-ID>',
  baseUrl: '<BASE-URL>',
  authHandlerUrl: '<AUTH-HANDLER-URL>',
};

BrandmessengerSdk.initWithCompanyKeyApplicationKeyWidgetId(
  initCompanyInfo,
  (error, response) => {
    if (error) {
      // Handle initialization error
      console.error('SDK init error:', error);
    } else {
      // Initialization success
      console.log('SDK initialized:', response);
    }
  }
);

// Login anonymously
BrandmessengerSdk.loginAnonymousUser((error, response) => {
  if (error) {
    // Login error
  } else {
    // Login success
  }
});

// Show chat screen
BrandmessengerSdk.show((error, success) => {
  if (error) {
    // Show chat screen error
  } else {
    // Show chat screen success
  }
});

Configuration Parameters

• companyKey: Your Khoros company key (string, required)
• applicationKey: Application key provided by Khoros (string, required)
• widgetId: Widget ID for your Brand Messenger instance (string, required)
• baseUrl: Base URL for Brand Messenger API (string, required)
• authHandlerUrl: URL for your authentication handler (string, required)

See the Khoros documentation for more details on how to obtain these values.

Local Development

If you want to contribute or test changes locally, follow these steps:

1. Clone the repository

git clone [email protected]:lithiumtech/react-native-brandmessenger-sdk.git
cd react-native-brandmessenger-sdk

2. Install dependencies

npm install

3. Build the SDK

npm run prepare

Note: There is no npm run build script. Always use npm run prepare to build the SDK before linking or testing.

4. Run tests

npm test

5. Link to an app (optional)

• In your React Native app, install the SDK as a local dependency:

npm install ../react-native-brandmessenger-sdk
# or use yarn add ../react-native-brandmessenger-sdk

• Import and use the SDK in your app as described in the Usage section above.

FAQ

Q: The SDK doesn't work after installing. What should I do?

A: Make sure you have rebuilt your app after installing the SDK. For React Native apps, always run npx pod-install in the ios directory and rebuild the app.

Q: How do I link the SDK in a monorepo or local development setup?

A: Use npm install ../react-native-brandmessenger-sdk or yarn add ../react-native-brandmessenger-sdk from your app's root. Make sure to rebuild your app after linking.

Q: Does this SDK support both iOS and Android?

A: Yes, the SDK supports both platforms. See the Requirements and Platform Support sections above.

Q: I'm seeing TypeScript or Babel errors during build. What should I do?

A: Ensure you have the required versions of Node.js and React Native. If issues persist, try deleting node_modules and reinstalling dependencies.

Q: Who do I contact for support?

A: Please open an issue in this repository or refer to the official Khoros documentation for additional help.

Troubleshooting

• Native module not found error:

  • Rebuild your app (npx pod-install for iOS, clean and rebuild for Android).
  • Ensure the SDK is properly linked and installed in your app's node_modules.

• App crashes after SDK integration:

  • Double-check all configuration parameters and ensure they match your Khoros account settings.
  • Check for missing permissions in your app (e.g., network, storage).

• Metro bundler cannot resolve the SDK:

  • Restart the Metro bundler (npx react-native start --reset-cache).

• TypeScript definitions are missing:

  • Run npm run prepare in the SDK directory to regenerate type definitions.

If you encounter other issues, please open an issue or pull request.

Running the Example App

You can try out the SDK in the included example React Native app:

1. Install dependencies for the example app:

   cd example
   npm install

2. Run the example app:

   • For iOS:

     npx pod-install ios
     npx react-native run-ios

   • For Android:

     npx react-native run-android

3. The example app demonstrates basic integration and usage of the SDK.

Note: Make sure you have set up your development environment for React Native (React Native Environment Setup).

Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.

License

Apache 2.0