React Native SDK

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

1
import { useConversation } from '@elevenlabs/react-native';
2
import React from 'react';
3
4
function ConversationComponent() {
5
  const conversation = useConversation();
6
7
  // Your component logic here
8
}

1
const conversation = useConversation({
2
  onConnect: () => console.log('Connected to conversation'),
3
  onDisconnect: () => console.log('Disconnected from conversation'),
4
  onMessage: (message) => console.log('Received message:', message),
5
  onError: (error) => console.error('Conversation error:', error),
6
  onModeChange: (mode) => console.log('Conversation mode changed:', mode),
7
  onStatusChange: (prop) => console.log('Conversation status changed:', prop.status),
8
  onCanSendFeedbackChange: (prop) =>
9
    console.log('Can send feedback changed:', prop.canSendFeedback),
10
  onUnhandledClientToolCall: (params) => console.log('Unhandled client tool call:', params),
11
});

1
const conversation = useConversation();
2
3
// For public agents, pass in the agent ID
4
const startConversation = async () => {
5
  await conversation.startSession({
6
    agentId: 'your-agent-id',
7
  });
8
};

1
const conversation = useConversation();
2
3
const response = await fetch('/conversation-token', yourAuthHeaders);
4
const conversationToken = await response.text();
5
6
// For private agents, pass in the conversation token
7
const startConversation = async () => {
8
  await conversation.startSession({
9
    conversationToken,
10
  });
11
};

1
const startConversation = async () => {
2
  await conversation.startSession({
3
    agentId: 'your-agent-id',
4
    userId: 'your-user-id',
5
  });
6
};

1
const endConversation = async () => {
2
  await conversation.endSession();
3
};

1
const sendMessage = async () => {
2
  await conversation.sendUserMessage('Hello, how can you help me?');
3
};

1
const sendContextualUpdate = async () => {
2
  await conversation.sendContextualUpdate(
3
    'User navigated to the profile page. Consider this for next response.'
4
  );
5
};

1
const provideFeedback = async (liked: boolean) => {
2
  await conversation.sendFeedback(liked);
3
};

1
const signalActivity = async () => {
2
  await conversation.sendUserActivity();
3
};

1
const { status } = useConversation();
2
console.log(status); // "connected" or "disconnected"

1
const { isSpeaking } = useConversation();
2
console.log(isSpeaking); // boolean

1
const { canSendFeedback } = useConversation();
2
3
// Use this to conditionally show feedback UI
4
{
5
  canSendFeedback && (
6
    <FeedbackButtons
7
      onLike={() => conversation.sendFeedback(true)}
8
      onDislike={() => conversation.sendFeedback(false)}
9
    />
10
  );
11
}

1
import { ElevenLabsProvider, 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: 'your-agent-id',
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
    <ElevenLabsProvider>
83
      <ConversationScreen />
84
    </ElevenLabsProvider>
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
};