FCE-2777: Update documentation about data channels on mobile

docs/explanation/data-channels.mdx

@@ -42,7 +42,22 @@ This separation allows you to use both channels simultaneously for different pur
 
 ## Using Data Channels
 
-Use the [`useDataChannel`](../api/web/functions/useDataChannel) hook to work with data channels. The typical flow is:
+Use the `useDataChannel` hook to work with data channels. The hook is available in both the web and mobile SDKs with the same API:
+
+<Tabs groupId="platform">
+  <TabItem value="web" label="React (Web)">
+
+Use [`useDataChannel`](../api/web/functions/useDataChannel) from `@fishjam-cloud/react-client`.
+
+  </TabItem>
+  <TabItem value="mobile" label="React Native (Mobile)">
+
+Use [`useDataChannel`](../api/mobile/functions/useDataChannel) from `@fishjam-cloud/react-native-client`.
+
+  </TabItem>
+</Tabs>
+
+The typical flow is:
 
 1. Initialize the data channel after connecting to a room
 2. Subscribe to incoming messages

docs/how-to/client/installation.mdx

@@ -77,23 +77,45 @@ You can also follow more detailed [Expo instructions](https://docs.expo.dev/get-
 
 ## Step 1: Install the Package
 
-Install `@fishjam-cloud/react-native-client` with your preferred package manager.
+<Tabs groupId="app-type">
+
+  <TabItem value="expo" label="Expo (SDK 54+)">
+
+Install `@fishjam-cloud/react-native-client` and `react-native-get-random-values` with your preferred package manager.
+
+```bash npm2yarn
+npm install @fishjam-cloud/react-native-client react-native-get-random-values@1.11.0
+```
+
+Expo SDK 54+ resolves native dependencies recursively, so `@fishjam-cloud/react-native-webrtc` (a transitive dependency) is autolinked automatically.
+
+  </TabItem>
+  <TabItem value="rn" label="Bare React Native / Expo SDK < 54">
+
+Install `@fishjam-cloud/react-native-client`, `@fishjam-cloud/react-native-webrtc`, and `react-native-get-random-values`:
 
 ```bash npm2yarn
-npm install @fishjam-cloud/react-native-client
+npm install @fishjam-cloud/react-native-client @fishjam-cloud/react-native-webrtc react-native-get-random-values@1.11.0
 ```
 
+Bare React Native and Expo SDK versions below 54 only autolink direct dependencies.
+`@fishjam-cloud/react-native-webrtc` must be in your app's `package.json` for its native code to be linked.
+
+  </TabItem>
+</Tabs>
+
 ## Step 2: Configure App Permissions
 
 Your app needs to have permissions configured in order to use the microphone and camera.
 
 ### Android
 
-These permissions are required to stream audio and video with Fishjam on Android:
+The following Android permissions are required by Fishjam:
 
 - `android.permission.CAMERA`
 - `android.permission.RECORD_AUDIO`
 - `android.permission.MODIFY_AUDIO_SETTINGS`
+- `android.permission.ACCESS_NETWORK_STATE`
 
 <Tabs groupId="app-type">
 
@@ -110,7 +132,8 @@ Add required permissions to the `app.json` file.
       "permissions": [
         "android.permission.CAMERA",
         "android.permission.RECORD_AUDIO",
-        "android.permission.MODIFY_AUDIO_SETTINGS"
+        "android.permission.MODIFY_AUDIO_SETTINGS",
+        "android.permission.ACCESS_NETWORK_STATE"
       ]
     }
   }
@@ -128,6 +151,7 @@ Add required permissions to the `AndroidManifest.xml` file.
   <uses-permission android:name="android.permission.CAMERA"/>
   <uses-permission android:name="android.permission.RECORD_AUDIO"/>
   <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
+  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
   ...
 </manifest>
 ```

docs/how-to/client/migration-guide.mdx

@@ -24,7 +24,8 @@ Add the following WebRTC permissions to your Android configuration in `app.json`
       "permissions": [
         "android.permission.CAMERA",
         "android.permission.RECORD_AUDIO",
-        "android.permission.MODIFY_AUDIO_SETTINGS"
+        "android.permission.MODIFY_AUDIO_SETTINGS",
+        "android.permission.ACCESS_NETWORK_STATE"
       ]
     }
   }

docs/how-to/features/text-chat.mdx

@@ -22,7 +22,7 @@ For a deeper understanding of how data channels work, including channel types an
 
 ## Step 1 — Set up the chat hook
 
-Use the [`useDataChannel`](/api/web/functions/useDataChannel) hook to work with data channels. The typical flow is:
+Use the [`useDataChannel`](/api/web/functions/useDataChannel) (web) or [`useDataChannel`](/api/mobile/functions/useDataChannel) (mobile) hook to work with data channels. The typical flow is:
 
 1. Initialize the data channel after connecting to a room
 2. Subscribe to incoming messages
@@ -84,9 +84,67 @@ export function useChat() {
 ```
 
   </TabItem>
-  <TabItem value="mobile" label="React Native (Mobile)" disabled>
+  <TabItem value="mobile" label="React Native (Mobile)">
 
-Mobile SDK support for data channels will be available in a future release.
+```tsx
+import {
+  useConnection,
+  useDataChannel,
+} from "@fishjam-cloud/react-native-client";
+import { useCallback, useEffect, useState } from "react";
+
+export function useChat() {
+  const { peerStatus } = useConnection();
+  const {
+    initializeDataChannel,
+    publishData,
+    subscribeData,
+    dataChannelReady,
+    dataChannelLoading,
+    dataChannelError,
+  } = useDataChannel();
+
+  const [messages, setMessages] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (peerStatus === "connected") {
+      initializeDataChannel();
+    }
+  }, [peerStatus, initializeDataChannel]);
+
+  useEffect(() => {
+    if (dataChannelLoading || !dataChannelReady) return;
+
+    const unsubscribe = subscribeData(
+      (data: Uint8Array) => {
+        const message = new TextDecoder().decode(data);
+        setMessages((prev) => [...prev, message]);
+      },
+      { reliable: true },
+    );
+
+    return unsubscribe;
+  }, [dataChannelReady, dataChannelLoading, subscribeData]);
+
+  const sendMessage = useCallback(
+    (text: string) => {
+      if (!dataChannelReady) return;
+
+      const encoded = new TextEncoder().encode(text);
+      publishData(encoded, { reliable: true });
+    },
+    [publishData, dataChannelReady],
+  );
+
+  return {
+    messages,
+    sendMessage,
+    ready: dataChannelReady,
+    loading: dataChannelLoading,
+    error: dataChannelError,
+  };
+}
+```
 
   </TabItem>
 </Tabs>
@@ -185,9 +243,97 @@ function ChatPanel() {
 ```
 
   </TabItem>
-  <TabItem value="mobile" label="React Native (Mobile)" disabled>
+  <TabItem value="mobile" label="React Native (Mobile)">
+
+```tsx
+import React, { useState, useEffect, useCallback } from "react";
+import { View, Text, TextInput, FlatList, Pressable } from "react-native";
+import {
+  useConnection,
+  useDataChannel,
+} from "@fishjam-cloud/react-native-client";
+
+function useChat() {
+  const { peerStatus } = useConnection();
+  const {
+    initializeDataChannel,
+    publishData,
+    subscribeData,
+    dataChannelReady,
+  } = useDataChannel();
+
+  const [messages, setMessages] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (peerStatus === "connected") {
+      initializeDataChannel();
+    }
+  }, [peerStatus, initializeDataChannel]);
 
-Mobile SDK support for data channels will be available in a future release.
+  useEffect(() => {
+    if (!dataChannelReady) return;
+
+    const unsubscribe = subscribeData(
+      (data: Uint8Array) => {
+        const message = new TextDecoder().decode(data);
+        setMessages((prev) => [...prev, message]);
+      },
+      { reliable: true },
+    );
+
+    return unsubscribe;
+  }, [subscribeData, dataChannelReady]);
+
+  const sendMessage = useCallback(
+    (text: string) => {
+      if (!dataChannelReady) return;
+
+      const encoded = new TextEncoder().encode(text);
+      publishData(encoded, { reliable: true });
+    },
+    [publishData, dataChannelReady],
+  );
+
+  return { messages, sendMessage, ready: dataChannelReady };
+}
+
+// ---cut---
+
+function ChatPanel() {
+  const { messages, sendMessage, ready } = useChat();
+  const [input, setInput] = useState("");
+
+  const handleSend = () => {
+    if (input.trim()) {
+      sendMessage(input);
+      setInput("");
+    }
+  };
+
+  if (!ready) {
+    return <Text>Connecting to chat...</Text>;
+  }
+
+  return (
+    <View>
+      <FlatList
+        data={messages}
+        keyExtractor={(_, i) => String(i)}
+        renderItem={({ item }) => <Text>{item}</Text>}
+      />
+      <TextInput
+        value={input}
+        onChangeText={setInput}
+        placeholder="Type a message..."
+        onSubmitEditing={handleSend}
+      />
+      <Pressable onPress={handleSend}>
+        <Text>Send</Text>
+      </Pressable>
+    </View>
+  );
+}
+```
 
   </TabItem>
 </Tabs>
@@ -209,4 +355,5 @@ This ensures no chat messages are lost or arrive out of order.
 
 - [Data Channels](../../explanation/data-channels) — detailed explanation of channel types and broadcast behavior
 - [Connecting to a room](../../how-to/client/connecting) — prerequisite for using data channels
-- [`useDataChannel` API reference](../../api/web/functions/useDataChannel)
+- [`useDataChannel` API reference (Web)](../../api/web/functions/useDataChannel)
+- [`useDataChannel` API reference (Mobile)](../../api/mobile/functions/useDataChannel)

docs/tutorials/react-native-quick-start.mdx

@@ -53,7 +53,8 @@ Add required permissions to the `app.json` file:
       "permissions": [
         "android.permission.CAMERA",
         "android.permission.RECORD_AUDIO",
-        "android.permission.MODIFY_AUDIO_SETTINGS"
+        "android.permission.MODIFY_AUDIO_SETTINGS",
+        "android.permission.ACCESS_NETWORK_STATE"
       ]
     }
   }

versioned_docs/version-0.25.0/explanation/data-channels.mdx

@@ -42,7 +42,22 @@ This separation allows you to use both channels simultaneously for different pur
 
 ## Using Data Channels
 
-Use the [`useDataChannel`](../api/web/functions/useDataChannel) hook to work with data channels. The typical flow is:
+Use the `useDataChannel` hook to work with data channels. The hook is available in both the web and mobile SDKs with the same API:
+
+<Tabs groupId="platform">
+  <TabItem value="web" label="React (Web)">
+
+Use [`useDataChannel`](../api/web/functions/useDataChannel) from `@fishjam-cloud/react-client`.
+
+  </TabItem>
+  <TabItem value="mobile" label="React Native (Mobile)">
+
+Use [`useDataChannel`](../api/mobile/functions/useDataChannel) from `@fishjam-cloud/react-native-client`.
+
+  </TabItem>
+</Tabs>
+
+The typical flow is:
 
 1. Initialize the data channel after connecting to a room
 2. Subscribe to incoming messages

versioned_docs/version-0.25.0/how-to/client/installation.mdx

@@ -77,23 +77,45 @@ You can also follow more detailed [Expo instructions](https://docs.expo.dev/get-
 
 ## Step 1: Install the Package
 
-Install `@fishjam-cloud/react-native-client` with your preferred package manager.
+<Tabs groupId="app-type">
+
+  <TabItem value="expo" label="Expo (SDK 54+)">
+
+Install `@fishjam-cloud/react-native-client` and `react-native-get-random-values` with your preferred package manager.
+
+```bash npm2yarn
+npm install @fishjam-cloud/react-native-client react-native-get-random-values@1.11.0
+```
+
+Expo SDK 54+ resolves native dependencies recursively, so `@fishjam-cloud/react-native-webrtc` (a transitive dependency) is autolinked automatically.
+
+  </TabItem>
+  <TabItem value="rn" label="Bare React Native / Expo SDK < 54">
+
+Install `@fishjam-cloud/react-native-client`, `@fishjam-cloud/react-native-webrtc`, and `react-native-get-random-values`:
 
 ```bash npm2yarn
-npm install @fishjam-cloud/react-native-client
+npm install @fishjam-cloud/react-native-client @fishjam-cloud/react-native-webrtc react-native-get-random-values@1.11.0
 ```
 
+Bare React Native and Expo SDK versions below 54 only autolink direct dependencies.
+`@fishjam-cloud/react-native-webrtc` must be in your app's `package.json` for its native code to be linked.
+
+  </TabItem>
+</Tabs>
+
 ## Step 2: Configure App Permissions
 
 Your app needs to have permissions configured in order to use the microphone and camera.
 
 ### Android
 
-These permissions are required to stream audio and video with Fishjam on Android:
+The following Android permissions are required by Fishjam:
 
 - `android.permission.CAMERA`
 - `android.permission.RECORD_AUDIO`
 - `android.permission.MODIFY_AUDIO_SETTINGS`
+- `android.permission.ACCESS_NETWORK_STATE`
 
 <Tabs groupId="app-type">
 
@@ -110,7 +132,8 @@ Add required permissions to the `app.json` file.
       "permissions": [
         "android.permission.CAMERA",
         "android.permission.RECORD_AUDIO",
-        "android.permission.MODIFY_AUDIO_SETTINGS"
+        "android.permission.MODIFY_AUDIO_SETTINGS",
+        "android.permission.ACCESS_NETWORK_STATE"
       ]
     }
   }
@@ -128,6 +151,7 @@ Add required permissions to the `AndroidManifest.xml` file.
   <uses-permission android:name="android.permission.CAMERA"/>
   <uses-permission android:name="android.permission.RECORD_AUDIO"/>
   <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
+  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
   ...
 </manifest>
 ```