Updating SimpleChatbot RN example to use Expo 54.

simple-chatbot/client/react-native/app.json

@@ -59,10 +59,7 @@
         "expo-build-properties",
         {
           "android": {
-            "minSdkVersion": 24,
-            "compileSdkVersion": 35,
-            "targetSdkVersion": 35,
-            "buildToolsVersion": "35.0.0"
+            "minSdkVersion": 24
           },
           "ios": {
             "deploymentTarget": "15.1"

simple-chatbot/client/react-native/env.example

@@ -1 +1 @@
-EXPO_SIMPLE_CHATBOT_SERVER=http://$YOUR_IP:7860
+EXPO_PUBLIC_SIMPLE_CHATBOT_SERVER=http://$YOUR_IP:7860

simple-chatbot/client/react-native/package.json

@@ -9,30 +9,29 @@
     "update": "(cd ../rtvi-client-react-native-daily; yarn build); cp -R ../rtvi-client-react-native-daily/lib/* ./node_modules/react-native-realtime-ai-daily/lib/;"
   },
   "dependencies": {
-    "@daily-co/config-plugin-rn-daily-js": "0.0.10",
+    "@daily-co/config-plugin-rn-daily-js": "0.0.11",
     "@daily-co/react-native-daily-js": "^0.82.0",
     "@daily-co/react-native-webrtc": "^124.0.6-daily.1",
     "@react-native-async-storage/async-storage": "1.24.0",
-    "@react-navigation/native": "^7.0.14",
-    "@react-navigation/stack": "^7.1.1",
-    "expo": "^53.0.23",
-    "expo-asset": "~11.1.7",
-    "expo-status-bar": "~2.2.3",
-    "react": "19.0.0",
-    "react-native": "0.79.2",
+    "@react-navigation/native": "^7.1.19",
+    "@react-navigation/stack": "^7.6.1",
+    "expo": "~54.0.21",
+    "expo-asset": "~12.0.9",
+    "expo-status-bar": "~3.0.8",
+    "react": "19.1.0",
+    "react-native": "^0.81.5",
     "react-native-background-timer": "^2.4.1",
-    "react-native-gesture-handler": "^2.25.0",
+    "react-native-gesture-handler": "^2.29.0",
     "react-native-get-random-values": "^1.11.0",
     "@pipecat-ai/react-native-daily-transport": "^1.4.0",
-    "react-native-safe-area-context": "^5.4.0",
-    "react-native-screens": "^4.10.0",
-    "react-native-toast-message": "^2.3.0"
+    "react-native-safe-area-context": "^5.6.2",
+    "react-native-toast-message": "^2.3.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.1",
+    "@babel/core": "^7.28.5",
     "@types/react-native": "^0.73.0",
-    "typescript": "~5.8.3",
-    "@types/react": "19.0.14"
+    "typescript": "~5.9.3",
+    "@types/react": "19.1.0"
   },
   "private": true,
   "resolutions": {

simple-chatbot/client/react-native/src/components/MicrophoneView.tsx

@@ -5,7 +5,7 @@ import Colors from '../theme/Colors';
 import { useVoiceClient } from '../context/VoiceClientContext';
 
 interface MicrophoneViewProps {
-  style?: ViewStyle; // Optional additional styles for the button container
+  style?: ViewStyle;
 }
 
 const MicrophoneView: React.FC<MicrophoneViewProps> = ({ style }) => {
@@ -14,55 +14,58 @@ const MicrophoneView: React.FC<MicrophoneViewProps> = ({ style }) => {
 
   const onLayout = (event: LayoutChangeEvent) => {
     const { width, height } = event.nativeEvent.layout;
-      setDimensions({ width, height });
+    setDimensions({ width, height });
   };
 
   const { width } = dimensions;
 
   const circleSize = useMemo(() => width * 0.9, [width]);
   const innerCircleSize = useMemo(() => width * 0.82, [width]);
   const audioCircleSize = useMemo(() => audioLevel * width * 0.95, [audioLevel, width]);
+  const iconSize = useMemo(() => width * 0.2, [width]);
 
   return (
     <View style={[styles.container, style]} onLayout={onLayout}>
-      <View
-        style={[
-          styles.outerCircle,
-          { width: circleSize, height: circleSize, borderRadius: circleSize / 2 },
-        ]}
-      >
+      {width > 0 && (
         <View
           style={[
-            styles.innerCircle,
-            {
-              backgroundColor: !isMicEnabled ? Colors.disabledMic : Colors.backgroundCircle,
-              width: innerCircleSize,
-              height: innerCircleSize,
-              borderRadius: innerCircleSize / 2,
-            },
+            styles.outerCircle,
+            { width: circleSize, height: circleSize, borderRadius: circleSize / 2 },
           ]}
-        />
-
-        {isMicEnabled && (
+        >
           <View
             style={[
-              styles.audioCircle,
+              styles.innerCircle,
               {
-                width: audioCircleSize,
-                height: audioCircleSize,
-                borderRadius: audioCircleSize / 2,
+                backgroundColor: !isMicEnabled ? Colors.disabledMic : Colors.backgroundCircle,
+                width: innerCircleSize,
+                height: innerCircleSize,
+                borderRadius: innerCircleSize / 2,
               },
             ]}
           />
-        )}
 
-        <MaterialIcons
-          name={!isMicEnabled ? "mic-off" : "mic"}
-          size={width * 0.2}
-          color="white"
-          style={styles.micIcon}
-        />
-      </View>
+          {isMicEnabled && audioCircleSize > 0 && (
+            <View
+              style={[
+                styles.audioCircle,
+                {
+                  width: audioCircleSize,
+                  height: audioCircleSize,
+                  borderRadius: audioCircleSize / 2,
+                },
+              ]}
+            />
+          )}
+
+          <MaterialIcons
+            name={!isMicEnabled ? "mic-off" : "mic"}
+            size={iconSize > 0 ? iconSize : 1}
+            color="white"
+            style={styles.micIcon}
+          />
+        </View>
+      )}
     </View>
   );
 };
@@ -91,4 +94,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default MicrophoneView;
+export default MicrophoneView;

simple-chatbot/client/react-native/src/settings/SettingsManager.ts

@@ -10,7 +10,7 @@ export interface SettingsManager {
 const defaultSettings: SettingsManager = {
   enableCam: false,
   enableMic: true,
-  backendURL: process.env.EXPO_SIMPLE_CHATBOT_SERVER || "",
+  backendURL: process.env.EXPO_PUBLIC_SIMPLE_CHATBOT_SERVER || "",
 };
 
 export class SettingsManager {