FCE-2777: Add data channels example on mobile

examples/mobile-client/text-chat/.env.example

@@ -0,0 +1 @@
+EXPO_PUBLIC_FISHJAM_ID=

examples/mobile-client/text-chat/.gitignore

@@ -0,0 +1,39 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+android/*
+ios/*
+.env
+.cursor/

examples/mobile-client/text-chat/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 80
+}

examples/mobile-client/text-chat/App.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { FishjamProvider } from "@fishjam-cloud/react-native-client";
+import RootNavigation from "./navigation/RootNavigation";
+
+const App = () => {
+  return (
+    <FishjamProvider fishjamId={process.env.EXPO_PUBLIC_FISHJAM_ID}>
+      <SafeAreaProvider>
+        <NavigationContainer>
+          <RootNavigation />
+        </NavigationContainer>
+      </SafeAreaProvider>
+    </FishjamProvider>
+  );
+};
+
+export default App;

examples/mobile-client/text-chat/README.md

@@ -0,0 +1,141 @@
+# Text Chat Example
+
+A React Native mobile app demonstrating real-time text messaging using [Fishjam Cloud](https://fishjam.io/) data channels. This example shows how to implement peer-to-peer text chat functionality in a mobile application using the Fishjam Cloud React Native SDK.
+
+## Features
+
+- Join a room with a custom room name and user name
+- Real-time text messaging between participants using WebRTC data channels
+- Reliable message delivery with automatic reconnection
+- Message history with sender names and timestamps
+
+## Getting Started
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/) (v18 or newer recommended)
+- [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/)
+- [Expo](https://docs.expo.dev/get-started/installation/): You do **not** need to install Expo CLI globally. Use `npx expo` to run Expo commands.
+
+### Installation
+
+1. **Clone the repository:**
+
+   ```sh
+   git clone https://github.com/fishjam-cloud/web-client-sdk.git
+   cd web-client-sdk
+   ```
+
+2. **Install dependencies:**
+
+   ```sh
+   yarn install
+   ```
+
+3. **Build the project:**
+
+   ```sh
+   yarn build
+   ```
+
+4. **Set up environment variables:**
+   - Create a `.env` file in the `examples/mobile-client/text-chat` directory:
+     ```env
+     EXPO_PUBLIC_FISHJAM_ID=<your_fishjam_id>
+     ```
+   - _You can obtain your Fishjam ID at [https://fishjam.io/app/](https://fishjam.io/app/)._
+   - You can also copy `.env.example` as a starting point:
+     ```sh
+     cp .env.example .env
+     ```
+
+5. **Prebuild native files:**
+   ```sh
+   cd examples/mobile-client/text-chat
+   npx expo prebuild --clean
+   ```
+   > [!NOTE]
+   > Be sure to run `npx expo prebuild` and not `yarn prebuild` as there's an issue with path generation for the `ios/.xcode.env.local` file
+
+### Running the App
+
+- **Start the Expo development server:**
+
+  ```sh
+  cd examples/mobile-client/text-chat
+  yarn start
+  ```
+
+- **Run on Android:**
+
+  ```sh
+  yarn android
+  ```
+
+- **Run on iOS:**
+  ```sh
+  yarn ios
+  ```
+
+## Usage
+
+1. Enter a room name and your user name on the Home screen.
+2. Tap **Connect** to join the room and initialize the data channel.
+3. Once connected, you can send and receive text messages in real-time.
+4. Messages from other participants will appear automatically.
+5. Tap **Leave** to disconnect from the room.
+
+## What This Demo Shows
+
+This example demonstrates how to use Fishjam Cloud's data channel functionality for real-time text messaging:
+
+- **Data Channel Initialization**: Shows how to initialize a reliable data channel after connecting to a Fishjam room
+- **Message Publishing**: Demonstrates encoding and sending JSON messages via the data channel using `publishData`
+- **Message Subscription**: Shows how to subscribe to incoming messages and decode them using `subscribeData`
+- **Peer-to-Peer Communication**: All messages are sent directly between peers using WebRTC data channels, without going through a server
+- **Reliable Delivery**: Uses reliable data channels to ensure messages are delivered in order
+
+## Architecture Overview
+
+- **React Native + Expo**: Cross-platform mobile app framework
+- **Fishjam Cloud SDK**: Handles WebRTC peer connections and data channel management
+- **Data Channels**: WebRTC data channels for peer-to-peer text messaging
+- **TypeScript**: Provides type safety and better developer experience
+
+## Troubleshooting & FAQ
+
+- **App fails to connect to a room:**
+  - Ensure your `.env` file is present and `EXPO_PUBLIC_FISHJAM_ID` is set correctly
+  - Check your network connection
+  - Review logs in the Metro/Expo console for errors
+
+- **Messages not appearing:**
+  - Make sure multiple participants have joined the same room
+  - Check that the data channel has initialized successfully (watch for "Opening data channel..." status)
+  - Verify both devices are connected to the internet
+
+- **Data channel errors:**
+  - Ensure you're using a recent version of the Fishjam SDK
+  - Check that both peers support data channels (most modern devices do)
+  - Review error messages in the app's status display
+
+## Development
+
+1. Whenever you make changes in the `packages` directory, make sure to build the app in the root directory (not in `examples/mobile-client/text-chat`). This ensures that all related workspaces are also built:
+
+   ```sh
+   yarn build
+   ```
+
+2. Linter (run in the root directory):
+   ```sh
+   yarn lint
+   ```
+
+## License
+
+This example is provided under the MIT License. See [LICENSE](../../LICENSE) for details.
+
+---
+
+_This project is maintained by the Fishjam team. For questions or support, visit [fishjam.io](https://fishjam.io/) or open an issue on GitHub._

examples/mobile-client/text-chat/app.json

@@ -0,0 +1,41 @@
+{
+  "expo": {
+    "name": "mobile-text-chat",
+    "slug": "mobile-text-chat",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "../minimal-react-native/assets/icon.png",
+    "userInterfaceStyle": "light",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "../minimal-react-native/assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "io.fishjam.mobile.example.textchat",
+      "appleTeamId": "J5FM626PE2"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "../minimal-react-native/assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true,
+      "package": "io.fishjam.mobile.example.textchat",
+      "permissions": [
+        "android.permission.ACCESS_NETWORK_STATE",
+        "android.permission.ACCESS_WIFI_STATE"
+      ]
+    },
+    "web": {
+      "favicon": "../minimal-react-native/assets/favicon.png"
+    },
+    "plugins": [
+      [
+        "@fishjam-cloud/react-native-client"
+      ]
+    ]
+  }
+}

examples/mobile-client/text-chat/eslint.config.js

@@ -0,0 +1,10 @@
+// https://docs.expo.dev/guides/using-eslint/
+const { defineConfig } = require('eslint/config');
+const expoConfig = require('eslint-config-expo/flat');
+
+module.exports = defineConfig([
+    expoConfig,
+    {
+        ignores: ['dist/*'],
+    },
+]);

examples/mobile-client/text-chat/hooks/useConnectFishjam.ts

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import { NavigationProp, useNavigation } from "@react-navigation/native";
+import {
+  useConnection,
+  useSandbox,
+} from "@fishjam-cloud/react-native-client";
+import { RootStackParamList } from "../navigation/RootNavigation";
+
+export const useConnectFishjam = () => {
+  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
+  const { leaveRoom, joinRoom } = useConnection();
+  const { getSandboxPeerToken } = useSandbox();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const connect = async (roomName: string, userName: string) => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const peerToken = await getSandboxPeerToken(
+        roomName,
+        userName,
+        "conference",
+      );
+      await joinRoom({
+        peerToken,
+        peerMetadata: {
+          displayName: userName,
+        },
+      });
+      navigation.navigate("Chat", { roomName, userName });
+    } catch (err) {
+      const error =
+        err instanceof Error ? err : new Error("Failed to connect to Fishjam");
+      console.error("Error connecting to Fishjam", error);
+      setError(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      leaveRoom();
+    };
+  }, [leaveRoom]);
+
+  return {
+    connect,
+    isLoading,
+    error,
+  };
+};

examples/mobile-client/text-chat/index.ts

@@ -0,0 +1,5 @@
+import { registerRootComponent } from "expo";
+
+import App from "./App";
+
+registerRootComponent(App);

examples/mobile-client/text-chat/navigation/RootNavigation.tsx

@@ -0,0 +1,38 @@
+import {
+  createNativeStackNavigator,
+  NativeStackScreenProps,
+} from "@react-navigation/native-stack";
+import HomeScreen from "../screens/home";
+import ChatScreen from "../screens/chat";
+
+export type RootStackParamList = {
+  Home: undefined;
+  Chat: {
+    roomName: string;
+    userName: string;
+  };
+};
+
+export type RootScreenProps<T extends keyof RootStackParamList> =
+  NativeStackScreenProps<RootStackParamList, T>;
+
+const RootStack = createNativeStackNavigator<RootStackParamList>();
+
+const RootNavigation = () => {
+  return (
+    <RootStack.Navigator>
+      <RootStack.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{ headerShown: false }}
+      />
+      <RootStack.Screen
+        name="Chat"
+        component={ChatScreen}
+        options={{ headerShown: false }}
+      />
+    </RootStack.Navigator>
+  );
+};
+
+export default RootNavigation;

examples/mobile-client/text-chat/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "mobile-text-chat",
+  "version": "1.0.0",
+  "main": "index.ts",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@fishjam-cloud/react-native-client": "workspace:*",
+    "@react-navigation/elements": "^2.5.2",
+    "@react-navigation/native": "^7.1.14",
+    "@react-navigation/native-stack": "^7.3.21",
+    "expo": "~54.0.25",
+    "expo-status-bar": "~3.0.8",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.14.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.0",
+    "@types/react": "~19.1.0",
+    "eslint": "^9.29.0",
+    "eslint-config-expo": "~9.2.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.5.1",
+    "prettier": "^3.6.2",
+    "typescript": "~5.9.2"
+  },
+  "private": true
+}