Starting to create a react native client for the bot ready example.

.gitignore

@@ -32,6 +32,21 @@ fly.toml
 
 # Example files
 pipecat/examples/twilio-chatbot/templates/streams.xml
+pipecat/examples/bot-ready-signalling/client/react-native/node_modules/
+pipecat/examples/bot-ready-signalling/client/react-native/.expo/
+pipecat/examples/bot-ready-signalling/client/react-native/dist/
+pipecat/examples/bot-ready-signalling/client/react-native/npm-debug.*
+pipecat/examples/bot-ready-signalling/client/react-native/*.jks
+pipecat/examples/bot-ready-signalling/client/react-native/*.p8
+pipecat/examples/bot-ready-signalling/client/react-native/*.p12
+pipecat/examples/bot-ready-signalling/client/react-native/*.key
+pipecat/examples/bot-ready-signalling/client/react-native/*.mobileprovision
+pipecat/examples/bot-ready-signalling/client/react-native/*.orig.*
+pipecat/examples/bot-ready-signalling/client/react-native/web-build/
+
+# macOS
+.DS_Store
+
 
 # Documentation
 docs/api/_build/

examples/bot-ready-signalling/client/react-native/.nvmrc

@@ -0,0 +1 @@
+18.18

examples/bot-ready-signalling/client/react-native/README.md

@@ -0,0 +1,56 @@
+# React Native Implementation
+
+Basic implementation using the [Pipecat React Native SDK](https://docs.pipecat.ai/client/react-native/introduction).
+
+## Usage
+
+### Expo requirements
+
+This project cannot be used with an [Expo Go](https://docs.expo.dev/workflow/expo-go/) app because [it requires custom native code](https://docs.expo.io/workflow/customizing/).
+
+When a project requires custom native code or a config plugin, we need to transition from using [Expo Go](https://docs.expo.dev/workflow/expo-go/) 
+to a [development build](https://docs.expo.dev/development/introduction/).
+
+More details about the custom native code used by this demo can be found in [rn-daily-js-expo-config-plugin](https://github.com/daily-co/rn-daily-js-expo-config-plugin).
+
+### Building remotely
+
+If you do not have experience with Xcode and Android Studio builds or do not have them installed locally on your computer, you will need to follow [this guide from Expo to use EAS Build](https://docs.expo.dev/development/create-development-builds/#create-and-install-eas-build).
+
+### Building locally
+
+You will need to have installed locally on your computer:
+- [Xcode](https://developer.apple.com/xcode/) to build for iOS;
+- [Android Studio](https://developer.android.com/studio) to build for Android;
+
+#### Install the demo dependencies
+
+```bash
+# Use the version of node specified in .nvmrc
+nvm i
+
+# Install dependencies
+npm i
+
+# Before a native app can be compiled, the native source code must be generated.
+npx expo prebuild
+```
+
+#### Running on Android
+
+After plugging in an Android device [configured for debugging](https://developer.android.com/studio/debug/dev-options), run the following command:
+
+```
+npm run android
+```
+
+#### Running on iOS
+
+Run the following command:
+
+```
+npm run ios
+```
+
+#### Connect to the server
+Use the http://localhost:5173 in your app.

examples/bot-ready-signalling/client/react-native/app.json

@@ -0,0 +1,75 @@
+{
+  "expo": {
+    "name": "bot-ready-rn",
+    "slug": "bot-ready-rn",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bitcode": false,
+      "bundleIdentifier": "co.daily.expo.BotReady",
+      "infoPlist": {
+        "UIBackgroundModes": [
+          "voip"
+        ]
+      },
+      "appleTeamId": "EEBGKV9N3N"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      },
+      "package": "co.daily.expo.BotReady",
+      "permissions": [
+        "android.permission.ACCESS_NETWORK_STATE",
+        "android.permission.BLUETOOTH",
+        "android.permission.CAMERA",
+        "android.permission.INTERNET",
+        "android.permission.MODIFY_AUDIO_SETTINGS",
+        "android.permission.RECORD_AUDIO",
+        "android.permission.SYSTEM_ALERT_WINDOW",
+        "android.permission.WAKE_LOCK",
+        "android.permission.FOREGROUND_SERVICE",
+        "android.permission.FOREGROUND_SERVICE_CAMERA",
+        "android.permission.FOREGROUND_SERVICE_MICROPHONE",
+        "android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION",
+        "android.permission.POST_NOTIFICATIONS"
+      ]
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": [
+      "@config-plugins/react-native-webrtc",
+      "@daily-co/config-plugin-rn-daily-js",
+      [
+        "expo-build-properties",
+        {
+          "android": {
+            "minSdkVersion": 24,
+            "compileSdkVersion": 35,
+            "targetSdkVersion": 34,
+            "buildToolsVersion": "35.0.0"
+          },
+          "ios": {
+            "deploymentTarget": "15.1"
+          }
+        }
+      ]
+    ]
+  }
+}

examples/bot-ready-signalling/client/react-native/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

examples/bot-ready-signalling/client/react-native/index.js

@@ -0,0 +1,7 @@
+import { registerRootComponent } from "expo";
+
+import App from "./src/App";
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that the environment is set up appropriately
+registerRootComponent(App);

examples/bot-ready-signalling/client/react-native/metro.config.js

@@ -0,0 +1,4 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
+
+module.exports = getDefaultConfig(__dirname);

examples/bot-ready-signalling/client/react-native/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "bot-ready-rn",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start --dev-client",
+    "android": "expo run:android --device",
+    "ios": "expo run:ios --device",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@config-plugins/react-native-webrtc": "^10.0.0",
+    "@daily-co/config-plugin-rn-daily-js": "0.0.7",
+    "@daily-co/react-native-daily-js": "^0.70.0",
+    "@daily-co/react-native-webrtc": "^118.0.3-daily.2",
+    "@react-native-async-storage/async-storage": "1.23.1",
+    "expo": "^52.0.0",
+    "expo-build-properties": "~0.13.1",
+    "expo-dev-client": "~5.0.5",
+    "expo-splash-screen": "~0.29.16",
+    "expo-status-bar": "~2.0.0",
+    "react": "18.3.1",
+    "react-native": "0.76.3",
+    "react-native-background-timer": "^2.4.1",
+    "react-native-get-random-values": "^1.11.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9"
+  },
+  "private": true
+}

examples/bot-ready-signalling/client/react-native/src/App.js

@@ -0,0 +1,153 @@
+import {
+  View,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  Button,
+  TextInput,
+} from "react-native";
+import React, { useEffect, useState, useCallback } from "react";
+import Daily, {
+  DailyMediaView,
+  DailyEventObjectParticipant,
+} from "@daily-co/react-native-daily-js";
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: "#f7f9fa",
+    width: "100%",
+  },
+  outCallContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  inCallContainer: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+  },
+  dailyMediaView: {
+    flex: 1,
+    aspectRatio: 9 / 16,
+  },
+  roomUrlInput: {
+    borderRadius: 8,
+    marginVertical: 8,
+    padding: 12,
+    fontStyle: "normal",
+    fontWeight: "normal",
+    borderWidth: 1,
+    width: "100%",
+  },
+  infoView: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  controlButton: {
+    flex: 1,
+  },
+});
+
+const ROOM_URL_TEMPLATE = "https://filipi.daily.co/public";
+
+export default function App() {
+  const [videoTrack, setVideoTrack] = useState();
+  const [callObject, setCallObject] = useState();
+  const [inCall, setInCall] = useState(false);
+  const [roomUrl, setRoomUrl] = useState(ROOM_URL_TEMPLATE);
+  const [remoteParticipantCount, setRemoteParticipantCount] = useState(0);
+
+  const handleNewParticipantsState = (event: DailyEventObjectParticipant) => {
+    const participant = event.participant;
+    // Early out as needed to avoid display the local participant's video
+    if (participant.local) {
+      return;
+    }
+    const videoTrack = participant.tracks.video;
+    setVideoTrack(videoTrack.persistentTrack);
+    // Set participant count minus the local participant
+    setRemoteParticipantCount(callObject.participantCounts().present - 1);
+  };
+
+  const joinRoom = () => {
+    console.log("Joining room");
+    callObject.join({
+      url: roomUrl,
+    });
+  };
+
+  const leaveRoom = async () => {
+    console.log("Leaving the room");
+    await callObject.leave();
+  };
+
+  // Create the callObject and join the meeting
+  useEffect(() => {
+    const callObject = Daily.createCallObject();
+    setCallObject(callObject);
+    return () => {};
+  }, []);
+
+  //Add the listeners
+  useEffect(() => {
+    if (!callObject) {
+      return;
+    }
+    callObject
+      .on("joined-meeting", () => setInCall(true))
+      .on("left-meeting", () => setInCall(false))
+      .on("participant-joined", handleNewParticipantsState)
+      .on("participant-updated", handleNewParticipantsState)
+      .on("participant-left", handleNewParticipantsState);
+    return () => {};
+  }, [callObject]);
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      {inCall ? (
+        <View style={styles.inCallContainer}>
+          {remoteParticipantCount > 0 ? (
+            <DailyMediaView
+              videoTrack={videoTrack}
+              mirror={false}
+              objectFit="cover"
+              style={styles.dailyMediaView}
+            />
+          ) : (
+            <View style={styles.infoView}>
+              <Text>No one else is in the call yet!</Text>
+              <Text>Invite others to join the call using this link:</Text>
+              <Text>{roomUrl}</Text>
+            </View>
+          )}
+          <Button
+            style={styles.controlButton}
+            onPress={() => leaveRoom()}
+            title="Leave call"
+          ></Button>
+        </View>
+      ) : (
+        <View style={styles.outCallContainer}>
+          <View style={styles.infoView}>
+            <Text>Not in a call yet</Text>
+            <TextInput
+              style={styles.roomUrlInput}
+              value={roomUrl}
+              onChangeText={(newRoomURL) => {
+                setRoomUrl(newRoomURL);
+              }}
+            />
+            <Button
+              style={styles.controlButton}
+              onPress={() => joinRoom()}
+              title="Join call"
+            ></Button>
+          </View>
+        </View>
+      )}
+    </SafeAreaView>
+  );
+}