Update guides with ReactNative versions

Author: mattieruth

client/concepts/events-and-callbacks.mdx

@@ -13,6 +13,11 @@ You are currently viewing the React version of this page. Use the dropdown to th
 You are currently viewing the JavaScript version of this page. Use the dropdown to the right to customize this page for your client framework.
 </Callout>
 </View>
+<View title="React Native" icon="mobile">
+<Callout icon="mobile" color="#FFC107">
+You are currently viewing the React Native version of this page. Use the dropdown to the right to customize this page for your client framework.
+</Callout>
+</View>
 
 The Pipecat client emits events throughout the session lifecycle — when the bot connects, when the user speaks, when a transcript arrives, and more.
 
@@ -69,6 +74,29 @@ Callbacks and event listeners are equivalent — use whichever pattern fits your
 
 </View>
 
+<View title="React Native" icon="mobile">
+
+Use `useEffect` with `.on()` and `.off()` to subscribe and clean up within a component:
+
+```tsx
+import { RTVIEvent } from "@pipecat-ai/client-js";
+import { useEffect } from "react";
+
+function TranscriptDisplay() {
+  useEffect(() => {
+    const handler = (data) => {
+      if (data.final) setTranscript(data.text);
+    };
+    client.on(RTVIEvent.UserTranscript, handler);
+    return () => client.off(RTVIEvent.UserTranscript, handler);
+  }, []);
+}
+```
+
+Always return a cleanup function from `useEffect` to remove the listener when the component unmounts.
+
+</View>
+
 ---
 
 ## Event reference
@@ -157,6 +185,24 @@ client.on(RTVIEvent.UserTranscript, (data) => {
 
 </View>
 
+<View title="React Native" icon="mobile">
+
+```tsx
+useEffect(() => {
+  const handler = (data) => {
+    if (data.final) {
+      addMessage(data.text); // committed
+    } else {
+      updatePartial(data.text); // still in progress
+    }
+  };
+  client.on(RTVIEvent.UserTranscript, handler);
+  return () => client.off(RTVIEvent.UserTranscript, handler);
+}, []);
+```
+
+</View>
+
 `BotOutput` is the recommended way to display the bot's response text. It provides the best possible representation of what the bot is saying — supporting interruptions and unspoken responses. By default, Pipecat aggregates output by sentences and words (assuming your TTS supports streaming), but custom aggregation strategies are supported too - like breaking out code snippets or other structured content:
 
 <View title="React" icon="react">
@@ -186,6 +232,22 @@ client.on(RTVIEvent.BotOutput, (data) => {
 
 </View>
 
+<View title="React Native" icon="mobile">
+
+```tsx
+useEffect(() => {
+  const handler = (data) => {
+    if (data.aggregated_by === "sentence") {
+      appendSentence(data.text);
+    }
+  };
+  client.on(RTVIEvent.BotOutput, handler);
+  return () => client.off(RTVIEvent.BotOutput, handler);
+}, []);
+```
+
+</View>
+
 ### Errors
 
 | Event | Callback | When it fires |
@@ -226,6 +288,24 @@ client.on(RTVIEvent.Error, ({ data }) => {
 
 </View>
 
+<View title="React Native" icon="mobile">
+
+```tsx
+useEffect(() => {
+  const handler = ({ data }) => {
+    if (data.fatal) {
+      showReconnectPrompt(data.message);
+    } else {
+      showToast(data.message);
+    }
+  };
+  client.on(RTVIEvent.Error, handler);
+  return () => client.off(RTVIEvent.Error, handler);
+}, []);
+```
+
+</View>
+
 ### Devices and tracks
 
 | Event | Callback | When it fires |
@@ -285,3 +365,13 @@ For custom server\<-\>client messaging, see [Custom Messaging](/client/guides/cu
 </CardGroup>
 
 </View>
+
+<View title="React Native" icon="mobile">
+
+<CardGroup cols={1}>
+  <Card title="JavaScript SDK Callbacks" icon="js" href="/api-reference/client/js/callbacks">
+    Complete callback signatures, data types, and transport compatibility
+  </Card>
+</CardGroup>
+
+</View>

client/concepts/media-management.mdx

@@ -13,6 +13,11 @@ You are currently viewing the React version of this page. Use the dropdown to th
 You are currently viewing the JavaScript version of this page. Use the dropdown to the right to customize this page for your client framework.
 </Callout>
 </View>
+<View title="React Native" icon="mobile">
+<Callout icon="mobile" color="#FFC107">
+You are currently viewing the React Native version of this page. Use the dropdown to the right to customize this page for your client framework.
+</Callout>
+</View>
 
 The Pipecat client handles media at two levels: **local devices** (the user's mic, camera, and speakers) and **media tracks** (the live audio/video streams flowing between client and bot). This page covers how to work with both.
 
@@ -57,6 +62,23 @@ client.on(RTVIEvent.TrackStarted, (track, participant) => {
 
 </View>
 
+<View title="React Native" icon="mobile">
+
+Audio output is handled automatically by the platform via `DailyMediaManager` — no additional setup required. The bot's audio plays through the device speaker as soon as the session connects.
+
+```tsx
+import { PipecatClient } from "@pipecat-ai/client-js";
+import { RNSmallWebRTCTransport } from "@pipecat-ai/react-native-small-webrtc-transport";
+import { DailyMediaManager } from "@pipecat-ai/react-native-daily-media-manager";
+
+const client = new PipecatClient({
+  transport: new RNSmallWebRTCTransport({ mediaManager: new DailyMediaManager() }),
+  enableMic: true,
+});
+```
+
+</View>
+
 ---
 
 ## Microphone
@@ -107,6 +129,29 @@ const muted = !client.isMicEnabled;
 
 </View>
 
+<View title="React Native" icon="mobile">
+
+Call [`enableMic()`](/api-reference/client/js/client-methods#enablemic-enable-boolean) to mute and unmute. Track state with `useState`:
+
+```tsx
+import { useState } from "react";
+import { Button } from "react-native";
+
+function MicButton() {
+  const [isMicEnabled, setIsMicEnabled] = useState(true);
+
+  const toggle = () => {
+    const next = !isMicEnabled;
+    client.enableMic(next);
+    setIsMicEnabled(next);
+  };
+
+  return <Button title={isMicEnabled ? "Mute" : "Unmute"} onPress={toggle} />;
+}
+```
+
+</View>
+
 ### Switching microphones
 
 <View title="React" icon="react">
@@ -150,6 +195,17 @@ client.on(RTVIEvent.AvailableMicsUpdated, (mics) => {
 
 </View>
 
+<View title="React Native" icon="mobile">
+
+Enumerate available devices with [`getAllMics()`](/api-reference/client/js/client-methods#getallmics), then switch by `deviceId` using [`updateMic()`](/api-reference/client/js/client-methods#updatemic):
+
+```tsx
+const mics = await client.getAllMics();
+client.updateMic(mics[1].deviceId);
+```
+
+</View>
+
 ---
 
 ## Camera
@@ -212,6 +268,19 @@ Switch cameras with [`getAllCams()`](/api-reference/client/js/client-methods#get
 
 </View>
 
+<View title="React Native" icon="mobile">
+
+Toggle the camera with [`enableCam()`](/api-reference/client/js/client-methods#enablecam-enable-boolean):
+
+```tsx
+client.enableCam(true);
+const isOn = client.isCamEnabled;
+```
+
+Switch cameras with [`getAllCams()`](/api-reference/client/js/client-methods#getallcams) / [`updateCam()`](/api-reference/client/js/client-methods#updatecam). To render video, use the `DailyMediaManager`'s video rendering capabilities per the React Native Daily SDK docs.
+
+</View>
+
 ---
 
 ## Speakers
@@ -237,6 +306,12 @@ client.updateSpeaker(speakers[0].deviceId);
 
 </View>
 
+<View title="React Native" icon="mobile">
+
+Audio routing (speaker vs. earpiece) is managed by the platform and `DailyMediaManager`. Use the React Native audio session APIs (e.g., `react-native-audio-session`) to control routing if needed.
+
+</View>
+
 ---
 
 ## Device initialization before connecting
@@ -293,6 +368,29 @@ client.on(RTVIEvent.TrackStarted, (track, participant) => {
 
 </View>
 
+<View title="React Native" icon="mobile">
+
+Use [`tracks()`](/api-reference/client/js/client-methods#tracks) to access tracks synchronously once the session is ready:
+
+```tsx
+const { local, bot } = client.tracks();
+// local.audio, local.video, bot.audio, bot.video
+```
+
+Or listen for `TrackStarted` to be notified as tracks become available:
+
+```tsx
+useEffect(() => {
+  const handler = (track, participant) => {
+    // process track as needed
+  };
+  client.on(RTVIEvent.TrackStarted, handler);
+  return () => client.off(RTVIEvent.TrackStarted, handler);
+}, []);
+```
+
+</View>
+
 ---
 
 ## Audio visualization
@@ -334,6 +432,34 @@ client.on(RTVIEvent.LocalAudioLevel, (level) => {
 
 </View>
 
+<View title="React Native" icon="mobile">
+
+Listen for `LocalAudioLevel` and `RemoteAudioLevel` events and drive your own visualization with `Animated` or any drawing library:
+
+```tsx
+import { RTVIEvent } from "@pipecat-ai/client-js";
+import { useState, useEffect } from "react";
+import { View } from "react-native";
+
+function AudioViz() {
+  const [level, setLevel] = useState(0);
+
+  useEffect(() => {
+    const handler = (l) => setLevel(l);
+    client.on(RTVIEvent.LocalAudioLevel, handler);
+    return () => client.off(RTVIEvent.LocalAudioLevel, handler);
+  }, []);
+
+  return (
+    <View style={{ width: 200, height: 8, backgroundColor: "#eee" }}>
+      <View style={{ width: 200 * level, height: 8, backgroundColor: "#3b82f6" }} />
+    </View>
+  );
+}
+```
+
+</View>
+
 ---
 
 ## API reference
@@ -363,3 +489,13 @@ client.on(RTVIEvent.LocalAudioLevel, (level) => {
 </CardGroup>
 
 </View>
+
+<View title="React Native" icon="mobile">
+
+<CardGroup cols={1}>
+  <Card title="Client Methods — Devices" icon="js" href="/api-reference/client/js/client-methods#devices">
+    `initDevices`, `getAllMics`, `updateMic`, `enableMic`, `tracks`, and more
+  </Card>
+</CardGroup>
+
+</View>