---
schema_version: "1"
id: 06ccce48c511c5fd90f2d0b5dbb54a25b1069b824d8ea2551484dc5029c0ed9e
title: React Native Quick Start Guide
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/genai/agentforce-mobile-sdk/guides/react-native/agentforce-mobile-sdk-react-native-quick-start.md
canonical_url: https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/guide/agentforce-mobile-sdk-react-native-quick-start.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: d8b8238580d1278708c108f0430e88fa52265f80d23fec2b971fc4e48f7e32af
products:
  - Agentforce Mobile SDK
  - Agentforce and Einstein Generative AI
---
# 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](https://help.salesforce.com/s/articleView?id=ai.service_agent_voice.htm&type=5). 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:

```bash
# 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:

```ruby
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:

```bash
cd ios && pod install
```

## 3. Configure Android

In your `android/app/build.gradle`, add the Maven repositories:

```gradle
repositories {
    google()
    mavenCentral()
    maven { url 'https://opensource.salesforce.com/AgentforceMobileSDK-Android/agentforce-sdk-repository' }
}
```

Register the native package in `MainApplication.kt`:

```kotlin
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`:

```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:

```tsx
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

- [Requirements](https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/guide/agentforce-mobile-sdk-react-native-requirements.md): Review system requirements and prerequisites
- [Install the SDK](https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/guide/agentforce-mobile-sdk-react-native-install.md): Detailed installation instructions for iOS and Android
- [Configure the SDK](https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/guide/agentforce-mobile-sdk-react-native-integration.md): Learn about Service Agent and Employee Agent configuration options
- [Integration Guide](https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/guide/agentforce-mobile-sdk-react-native-integration-overview.md): Complete implementation guide
