react-native-messaging-in-app

Salesforce React Native messaging library for in-app chat functionality

Installation

npm install react-native-messaging-in-app

Usage

import { launchChat } from 'react-native-messaging-in-app';

// Launch chat with configuration
const config = {
  serviceAPI: 'https://your-service-api.com',
  organizationId: 'your-org-id',
  developerName: 'your-developer-name',
  userVerificationRequired: false,
  language: 'en',
  chatMedium: 'mobile',
  brand: 'your-brand',
  country: 'US'
};

try {
  await launchChat(config);
} catch (error) {
  console.error('Failed to launch chat:', error);
}

UUID Management

For persistent conversations across app sessions, you can pass a custom conversationId:

import { launchChat, createConversationId } from 'react-native-messaging-in-app';

// Generate a new UUID for this conversation
const conversationId = createConversationId();

const config = {
  // ... other config options
  conversationId: conversationId
};

await launchChat(config);

Available UUID Utilities

• createConversationId(): Generates a new UUID for conversations
• generateUUID(): Generates a random UUID v4 string
• isValidUUID(uuid): Validates if a string is a valid UUID format

## Configuration Options

The `launchChat` function accepts a configuration object with the following properties:

- `serviceAPI` (string, required): The URL of your service API
- `organizationId` (string, required): Your organization ID
- `developerName` (string, required): Your developer name
- `userVerificationRequired` (boolean, optional): Whether user verification is required (default: false)
- `language` (string, optional): Language code for the chat interface
- `chatMedium` (string, optional): Medium identifier for the chat
- `brand` (string, optional): Brand identifier
- `country` (string, optional): Country code
- `conversationId` (string, optional): Custom UUID for persistent conversations


## Platform Setup

### iOS Setup

#### Dependencies
This library requires the following iOS dependencies:
- SMIClientUI
- SMIClientCore

The iOS dependencies are automatically included via the library's podspec file.

#### Installation Steps
1. Install the library: `npm install react-native-messaging-in-app`
2. Run `cd ios && pod install` to install the iOS dependencies
3. Build and run your iOS app

### Android Setup

#### Prerequisites
- Android Studio
- Android SDK (API level 24 or higher)
- Kotlin support enabled

#### Step-by-Step Installation

1. **Install the library**
   ```bash
   npm install react-native-messaging-in-app

2. Add Salesforce Maven Repository

   In your app-level build.gradle file (android/app/build.gradle), add the Salesforce repository:

   repositories {
       mavenCentral()
       google()
       // Add Salesforce repository for messaging SDK
       maven { url "https://s3.amazonaws.com/inapp.salesforce.com/public/android" }
   }

3. Add Salesforce Dependencies

   In your app-level build.gradle file, add the dependency:

   dependencies {
       // ... other dependencies
       
       // Salesforce messaging dependency
       implementation "com.salesforce.service:messaging-inapp-ui:1.9.0"
   }

4. Enable Data Binding

   In your app-level build.gradle file, enable data binding:

   android {
       // ... other configurations
       
       buildFeatures {
           dataBinding true
       }
   }

5. Sync and Build

   cd android
   ./gradlew clean
   ./gradlew build

6. Run the App

   npx react-native run-android

Troubleshooting Android Issues

Blank Screen Issue: If you encounter a blank screen, follow these steps:

1. Check Module Registration

   • Ensure the native module is properly registered
   • Check the console logs for any module registration errors
   • Verify that MessagingModule appears in the available native modules

2. Clean and Rebuild

   cd android
   ./gradlew clean
   cd ..
   npx react-native run-android

3. Check Dependencies

   • Verify that the Salesforce repository is accessible
   • Ensure the dependency version is correct
   • Check that data binding is enabled

4. Debug Module Loading Add this to your app to debug module loading:

   import { NativeModules } from 'react-native';
   console.log('Available NativeModules:', Object.keys(NativeModules));

Build Errors:

• If you get dependency resolution errors, ensure the Salesforce repository is properly added
• If you get compilation errors, check that the import statements match the dependency package names

Common Error Solutions:

1. "Could not find com.salesforce.service:messaging-inapp-ui"

   • Verify the Maven repository URL is correct
   • Check your internet connection
   • Try using a different version if available

2. "Module not found" errors

   • Clean and rebuild the project
   • Check that the module name matches between native code and JavaScript

3. "Blank screen" after launch

   • Check the console for JavaScript errors
   • Verify the configuration parameters are correct
   • Ensure the native module is properly registered

Example Configuration

Here's a complete example of how to use the library:

import React, { useState } from 'react';
import { View, Button, Alert } from 'react-native';
import { launchChat } from 'react-native-messaging-in-app';

export default function App() {
  const [isLoading, setIsLoading] = useState(false);

  const handleLaunchChat = async () => {
    setIsLoading(true);
    try {
      const config = {
        serviceAPI: 'https://your-service-api.com',
        organizationId: 'your-org-id',
        developerName: 'your-developer-name',
        userVerificationRequired: false,
        language: 'en',
        chatMedium: 'mobile',
        brand: 'your-brand',
        country: 'US',
      };

      await launchChat(config);
      Alert.alert('Success', 'Chat launched successfully!');
    } catch (error) {
      Alert.alert('Error', `Failed to launch chat: ${error}`);
      console.error('Chat launch error:', error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title={isLoading ? 'Launching...' : 'Launch Chat'}
        onPress={handleLaunchChat}
        disabled={isLoading}
      />
    </View>
  );
}

Platform Support

• ✅ iOS (Swift/Objective-C)
• ✅ Android (Kotlin)

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library