Salesforce Docs Portal

React Native Quick Start Guide

Get up and running quickly with the Agentforce Mobile SDK for React Native. This guide walks you through creating a minimal Service Agent integration.

Before You Begin

Ensure you have:

  • A Salesforce org with Agentforce enabled
  • A Service Agent configured in your org (Setup > Embedded Service Deployments). If you're enabling voice, see Create a Voice-Enabled Service Agent in Agentforce Studio. For current mobile GA implementations, connect your service agent to telephony.
  • The following values from your Salesforce org:
    • Service API URL: Found in Setup > Embedded Service Deployments > your deployment > Settings
    • Organization ID: Found in Setup > Company Information
    • ES Developer Name: The developer name of your Embedded Service deployment

1. Install the Package

Install the React Native Agentforce bridge:

# Using npm
npm install @salesforce/react-native-agentforce

# Using yarn
yarn add @salesforce/react-native-agentforce

2. Configure iOS

In your ios/Podfile, add the bridge pod:

platform :ios, '17.0'

target 'YourApp' do
  use_frameworks! :linkage => :static

  # React Native pods
  # ...

  # Agentforce React Native bridge
  pod 'ReactNativeAgentforce', :path => '../node_modules/@salesforce/react-native-agentforce/ios'
end

Then install pods:

cd ios && pod install

3. Configure Android

In your android/app/build.gradle, add the Maven repositories:

repositories {
    google()
    mavenCentral()
    maven { url 'https://opensource.salesforce.com/AgentforceMobileSDK-Android/agentforce-sdk-repository' }
}

Register the native package in MainApplication.kt:

import com.salesforce.android.reactagentforce.AgentforcePackage

class MainApplication : Application(), ReactApplication {
    override val reactNativeHost = object : DefaultReactNativeHost(this) {
        override fun getPackages(): List<ReactPackage> = listOf(
            MainReactPackage(),
            AgentforcePackage(),
        )
    }
}

Add the conversation activity to AndroidManifest.xml:

<activity
    android:name="com.salesforce.android.reactagentforce.AgentforceConversationActivity"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"
    android:windowSoftInputMode="adjustResize" />

4. Launch a Conversation

Create a component that configures and launches a Service Agent conversation:

import React from "react";
import { View, Button, Alert, StyleSheet } from "react-native";
import { AgentforceService } from "@salesforce/react-native-agentforce";

export default function App() {
  const handleLaunch = async () => {
    try {
      // Configure the SDK with your Service Agent settings
      await AgentforceService.configure({
        type: "service",
        serviceApiURL: "https://your-site.salesforce.com",
        organizationId: "00Dxx0000001234",
        esDeveloperName: "YourServiceAgentDeveloperName",
      });

      // Launch the conversation UI
      await AgentforceService.launchConversation();
    } catch (error) {
      Alert.alert("Error", String(error));
    }
  };

  return (
    <View style={styles.container}>
      <Button title="Chat with Agent" onPress={handleLaunch} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center" },
});

When the user taps "Chat with Agent":

  1. The SDK is configured with your org details.
  2. A full-screen conversation UI is presented.
  3. The user can chat with the Service Agent.

Next Steps