> This is a page from the ElevenLabs documentation. For a complete page index, fetch https://elevenlabs.io/docs/llms.txt. For the full documentation in a single file, fetch https://elevenlabs.io/docs/llms-full.txt.

# React Native SDK

> **Info**
>
> ElevenAgents कैसे काम करता है, इसकी जानकारी के लिए [ElevenAgents ओवरव्यू](/docs/hi/eleven-agents/overview) देखें।

## इंस्टॉलेशन

अपने React Native प्रोजेक्ट में पैकेज और उसकी dependencies इंस्टॉल करें।

```shell
npm install @elevenlabs/react-native @livekit/react-native @livekit/react-native-webrtc livekit-client
```

> **Tip**
>
> Expo के साथ इस SDK का इस्तेमाल करने वाला एक उदाहरण ऐप
> [यहाँ](https://github.com/elevenlabs/packages/tree/main/examples/react-native-expo) मिल सकता है।

> **Tip**
>
> पुराने वर्शन से अपग्रेड कर रहे हैं? अपने AI कोडिंग एजेंट के लिए
> `elevenlabs:sdk-migration` skill इंस्टॉल करने के लिए `npx skills add elevenlabs/packages` चलाएँ। यह इंपोर्ट बदलावों,
> `ConversationProvider` wrapping और API अपडेट्स को ऑटोमेट करता है।

## आवश्यकताएं

* LiveKit dependencies के साथ React Native
* आपके प्लेटफ़ॉर्म के लिए कॉन्फ़िगर की गई माइक्रोफ़ोन permissions
* Expo compatibility (सिर्फ़ development builds)
* React Native 0.79.0+, या पुराने वर्शनों में `package.json` के `"exports"` को resolve करने के लिए कॉन्फ़िगर किया गया Metro

> **Warning**
>
> यह SDK Expo framework के साथ इस्तेमाल के लिए डिज़ाइन और बनाया गया है। LiveKit के WebRTC implementation पर इसकी dependency के कारण,
> इसे development builds चाहिए और यह Expo Go के साथ इस्तेमाल नहीं किया जा सकता।

> **Warning**
>
> `@elevenlabs/react-native`, `package.json` के
> [`"exports"`](https://nodejs.org/api/packages.html#exports) field के ज़रिए अपना React Native entry point resolve करता है। Metro डिफ़ॉल्ट रूप से
> `"exports"` को सिर्फ़ Metro 0.82.0 से resolve करता है, जो [React Native 0.79.0](https://reactnative.dev/blog/2025/04/08/react-native-0.79) में शामिल था (8 अप्रैल, 2025 को रिलीज़ हुआ)। अगर
> आप React Native 0.79 से पुराने वर्शन पर हैं, तो इस पैकेज को सही तरह resolve करने के लिए अपने `metro.config.js` में `resolver.unstable_enablePackageExports =
>   true` सेट करें:
>
> ```js
> const { getDefaultConfig } = require("metro-config");
>
> const config = getDefaultConfig(__dirname);
> config.resolver.unstable_enablePackageExports = true;
>
> module.exports = config;
> ```

## सेटअप

### Provider सेटअप

ElevenAgents की सुविधाएँ चालू करने के लिए अपने ऐप को `ConversationProvider` से wrap करें।

```tsx
import { ConversationProvider } from "@elevenlabs/react-native";
import React from "react";

function App() {
  return (
    <ConversationProvider>
      <YourAppComponents />
    </ConversationProvider>
  );
}
```

> **Note**
>
> `@elevenlabs/react-native`, `@elevenlabs/react` से `ConversationProvider` और सभी hooks को re-export करता है।
> API वेब React SDK जैसी ही है — पूरी API रेफरेंस के लिए [React SDK डॉक्यूमेंटेशन](/docs/hi/eleven-agents/libraries/react) देखें।

## उपयोग

React SDK के सभी hooks `@elevenlabs/react-native` के ज़रिए उपलब्ध हैं:

* **`useConversation`** — सभी state और methods को मिलाने वाला सुविधाजनक hook
* **`useConversationControls`** — action methods (startSession, endSession, आदि)
* **`useConversationStatus`** — कनेक्शन स्टेटस
* **`useConversationInput`** — mute state
* **`useConversationMode`** — बोलने/सुनने की state
* **`useConversationFeedback`** — feedback की उपलब्धता और सबमिशन
* **`useConversationClientTool`** — dynamic client tool registration
* **`useRawConversation`** — raw conversation instance

### बातचीत शुरू करना

```tsx
import { useConversationControls, useConversationStatus } from "@elevenlabs/react-native";
import React from "react";
import { View, Text, Button } from "react-native";

function ConversationComponent() {
  const { startSession, endSession } = useConversationControls();
  const { status } = useConversationStatus();

  const handleStart = async () => {
    await startSession({
      agentId: "agent_7101k5zvyjhmfg983brhmhkd98n6",
    });
  };

  return (
    <View>
      <Text>Status: {status}</Text>
      <Button
        title={status === "connected" ? "End" : "Start"}
        onPress={status === "connected" ? endSession : handleStart}
      />
    </View>
  );
}
```

प्राइवेट एजेंट्स, authentication, client tools, overrides और अन्य सभी सुविधाओं के लिए [React SDK डॉक्यूमेंटेशन](/docs/hi/eleven-agents/libraries/react) देखें।

## उदाहरण इंप्लीमेंटेशन

यहाँ ElevenLabs Agents SDK का इस्तेमाल करने वाले React Native component का पूरा उदाहरण है:

```tsx
import { ConversationProvider, useConversation } from "@elevenlabs/react-native";
import React, { useState } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";

function ConversationScreen() {
  const [isConnected, setIsConnected] = useState(false);

  const conversation = useConversation({
    onConnect: () => {
      console.log("Connected to conversation");
      setIsConnected(true);
    },
    onDisconnect: () => {
      console.log("Disconnected from conversation");
      setIsConnected(false);
    },
    onMessage: (message) => {
      console.log("Message received:", message);
    },
    onError: (error) => {
      console.error("Conversation error:", error);
    },
  });

  const startConversation = async () => {
    try {
      await conversation.startSession({
        agentId: "agent_7101k5zvyjhmfg983brhmhkd98n6",
      });
    } catch (error) {
      console.error("Failed to start conversation:", error);
    }
  };

  const endConversation = async () => {
    try {
      await conversation.endSession();
    } catch (error) {
      console.error("Failed to end conversation:", error);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.status}>Status: {conversation.status}</Text>

      <Text style={styles.speaking}>
        Agent is {conversation.isSpeaking ? "speaking" : "not speaking"}
      </Text>

      <TouchableOpacity
        style={[styles.button, isConnected && styles.buttonActive]}
        onPress={isConnected ? endConversation : startConversation}
      >
        <Text style={styles.buttonText}>
          {isConnected ? "End Conversation" : "Start Conversation"}
        </Text>
      </TouchableOpacity>

      {conversation.canSendFeedback && (
        <View style={styles.feedbackContainer}>
          <TouchableOpacity
            style={styles.feedbackButton}
            onPress={() => conversation.sendFeedback(true)}
          >
            <Text>👍</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.feedbackButton}
            onPress={() => conversation.sendFeedback(false)}
          >
            <Text>👎</Text>
          </TouchableOpacity>
        </View>
      )}
    </View>
  );
}

function App() {
  return (
    <ConversationProvider>
      <ConversationScreen />
    </ConversationProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  status: {
    fontSize: 16,
    marginBottom: 10,
  },
  speaking: {
    fontSize: 14,
    marginBottom: 20,
    color: "#666",
  },
  button: {
    backgroundColor: "#007AFF",
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 8,
    marginBottom: 20,
  },
  buttonActive: {
    backgroundColor: "#FF3B30",
  },
  buttonText: {
    color: "white",
    fontSize: 16,
    fontWeight: "600",
  },
  feedbackContainer: {
    flexDirection: "row",
    gap: 10,
  },
  feedbackButton: {
    backgroundColor: "#F2F2F7",
    padding: 10,
    borderRadius: 8,
  },
});

export default App;
```

## प्लेटफ़ॉर्म-विशिष्ट बातें

### iOS

सुनिश्चित करें कि आपके `Info.plist` में माइक्रोफ़ोन permissions सही तरह कॉन्फ़िगर की गई हैं:

```xml
<key>NSMicrophoneUsageDescription</key>
<string>This app needs microphone access to enable voice conversations with AI agents.</string>
```

### Android

अपने `android/app/src/main/AndroidManifest.xml` में माइक्रोफ़ोन permissions जोड़ें:

```xml
<uses-permission android:name="android.permission.RECORD_AUDIO" />
```

बातचीत शुरू करने से पहले runtime permissions माँगने पर विचार करें:

```tsx
import { PermissionsAndroid, Platform } from "react-native";

const requestMicrophonePermission = async () => {
  if (Platform.OS === "android") {
    const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, {
      title: "Microphone Permission",
      message: "This app needs microphone access to enable voice conversations.",
      buttonNeutral: "Ask Me Later",
      buttonNegative: "Cancel",
      buttonPositive: "OK",
    });
    return granted === PermissionsAndroid.RESULTS.GRANTED;
  }
  return true;
};
```