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:

1# Using npm
2npm install @salesforce/react-native-agentforce
3
4# Using yarn
5yarn add @salesforce/react-native-agentforce

2. Configure iOS

In your ios/Podfile, add the bridge pod:

1platform :ios, '17.0'
2
3target 'YourApp' do
4  use_frameworks! :linkage => :static
5
6  # React Native pods
7  # ...
8
9  # Agentforce React Native bridge
10  pod 'ReactNativeAgentforce', :path => '../node_modules/@salesforce/react-native-agentforce/ios'
11end

Then install pods:

1cd ios && pod install

3. Configure Android

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

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

1import com.salesforce.android.reactagentforce.AgentforcePackage
2
3class MainApplication : Application(), ReactApplication {
4    override val reactNativeHost = object : DefaultReactNativeHost(this) {
5        override fun getPackages(): List<ReactPackage> = listOf(
6            MainReactPackage(),
7            AgentforcePackage(),
8        )
9    }
10}

Add the conversation activity to AndroidManifest.xml:

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

4. Launch a Conversation

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

1import React from "react";
2import { View, Button, Alert, StyleSheet } from "react-native";
3import { AgentforceService } from "@salesforce/react-native-agentforce";
4
5export default function App() {
6  const handleLaunch = async () => {
7    try {
8      // Configure the SDK with your Service Agent settings
9      await AgentforceService.configure({
10        type: "service",
11        serviceApiURL: "https://your-site.salesforce.com",
12        organizationId: "00Dxx0000001234",
13        esDeveloperName: "YourServiceAgentDeveloperName",
14      });
15
16      // Launch the conversation UI
17      await AgentforceService.launchConversation();
18    } catch (error) {
19      Alert.alert("Error", String(error));
20    }
21  };
22
23  return (
24    <View style={styles.container}>
25      <Button title="Chat with Agent" onPress={handleLaunch} />
26    </View>
27  );
28}
29
30const styles = StyleSheet.create({
31  container: { flex: 1, justifyContent: "center", alignItems: "center" },
32});

When the user taps “Chat with Agent”:

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

Next Steps

Requirements: Review system requirements and prerequisites
Install the SDK: Detailed installation instructions for iOS and Android
Configure the SDK: Learn about Service Agent and Employee Agent configuration options
Integration Guide: Complete implementation guide