React Native SDK

1
import { ConversationProvider } from "@elevenlabs/react-native";
2
import React from "react";
3
4
function App() {
5
  return (
6
    <ConversationProvider>
7
      <YourAppComponents />
8
    </ConversationProvider>
9
  );
10
}

1
import { useConversationControls, useConversationStatus } from "@elevenlabs/react-native";
2
import React from "react";
3
import { View, Text, Button } from "react-native";
4
5
function ConversationComponent() {
6
  const { startSession, endSession } = useConversationControls();
7
  const { status } = useConversationStatus();
8
9
  const handleStart = async () => {
10
    await startSession({
11
      agentId: "agent_7101k5zvyjhmfg983brhmhkd98n6",
12
    });
13
  };
14
15
  return (
16
    <View>
17
      <Text>Status: {status}</Text>
18
      <Button
19
        title={status === "connected" ? "End" : "Start"}
20
        onPress={status === "connected" ? endSession : handleStart}
21
      />
22
    </View>
23
  );
24
}

1
import { ConversationProvider, useConversation } from "@elevenlabs/react-native";
2
import React, { useState } from "react";
3
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
4
5
function ConversationScreen() {
6
  const [isConnected, setIsConnected] = useState(false);
7
8
  const conversation = useConversation({
9
    onConnect: () => {
10
      console.log("Connected to conversation");
11
      setIsConnected(true);
12
    },
13
    onDisconnect: () => {
14
      console.log("Disconnected from conversation");
15
      setIsConnected(false);
16
    },
17
    onMessage: (message) => {
18
      console.log("Message received:", message);
19
    },
20
    onError: (error) => {
21
      console.error("Conversation error:", error);
22
    },
23
  });
24
25
  const startConversation = async () => {
26
    try {
27
      await conversation.startSession({
28
        agentId: "agent_7101k5zvyjhmfg983brhmhkd98n6",
29
      });
30
    } catch (error) {
31
      console.error("Failed to start conversation:", error);
32
    }
33
  };
34
35
  const endConversation = async () => {
36
    try {
37
      await conversation.endSession();
38
    } catch (error) {
39
      console.error("Failed to end conversation:", error);
40
    }
41
  };
42
43
  return (
44
    <View style={styles.container}>
45
      <Text style={styles.status}>Status: {conversation.status}</Text>
46
47
      <Text style={styles.speaking}>
48
        Agent is {conversation.isSpeaking ? "speaking" : "not speaking"}
49
      </Text>
50
51
      <TouchableOpacity
52
        style={[styles.button, isConnected && styles.buttonActive]}
53
        onPress={isConnected ? endConversation : startConversation}
54
      >
55
        <Text style={styles.buttonText}>
56
          {isConnected ? "End Conversation" : "Start Conversation"}
57
        </Text>
58
      </TouchableOpacity>
59
60
      {conversation.canSendFeedback && (
61
        <View style={styles.feedbackContainer}>
62
          <TouchableOpacity
63
            style={styles.feedbackButton}
64
            onPress={() => conversation.sendFeedback(true)}
65
          >
66
            <Text>👍</Text>
67
          </TouchableOpacity>
68
          <TouchableOpacity
69
            style={styles.feedbackButton}
70
            onPress={() => conversation.sendFeedback(false)}
71
          >
72
            <Text>👎</Text>
73
          </TouchableOpacity>
74
        </View>
75
      )}
76
    </View>
77
  );
78
}
79
80
function App() {
81
  return (
82
    <ConversationProvider>
83
      <ConversationScreen />
84
    </ConversationProvider>
85
  );
86
}
87
88
const styles = StyleSheet.create({
89
  container: {
90
    flex: 1,
91
    justifyContent: "center",
92
    alignItems: "center",
93
    padding: 20,
94
  },
95
  status: {
96
    fontSize: 16,
97
    marginBottom: 10,
98
  },
99
  speaking: {
100
    fontSize: 14,
101
    marginBottom: 20,
102
    color: "#666",
103
  },
104
  button: {
105
    backgroundColor: "#007AFF",
106
    paddingHorizontal: 20,
107
    paddingVertical: 10,
108
    borderRadius: 8,
109
    marginBottom: 20,
110
  },
111
  buttonActive: {
112
    backgroundColor: "#FF3B30",
113
  },
114
  buttonText: {
115
    color: "white",
116
    fontSize: 16,
117
    fontWeight: "600",
118
  },
119
  feedbackContainer: {
120
    flexDirection: "row",
121
    gap: 10,
122
  },
123
  feedbackButton: {
124
    backgroundColor: "#F2F2F7",
125
    padding: 10,
126
    borderRadius: 8,
127
  },
128
});
129
130
export default App;

1
import { PermissionsAndroid, Platform } from "react-native";
2
3
const requestMicrophonePermission = async () => {
4
  if (Platform.OS === "android") {
5
    const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, {
6
      title: "Microphone Permission",
7
      message: "This app needs microphone access to enable voice conversations.",
8
      buttonNeutral: "Ask Me Later",
9
      buttonNegative: "Cancel",
10
      buttonPositive: "OK",
11
    });
12
    return granted === PermissionsAndroid.RESULTS.GRANTED;
13
  }
14
  return true;
15
};