add readme

software/source/clients/ios/README.md

@@ -1,13 +1,29 @@
 # iOS/Android Client
 
-[WORK IN PROGRESS]
+***WORK IN PROGRESS***
 
 This repository contains the source code for the 01 iOS/Android app. Work in progress, we will continue to improve this application to get it working properly.
 
 Feel free to improve this and make a pull request!
 
-If you want to run it on your own, you will need expo.
+If you want to run it on your own, you will need to install Expo Go on your mobile device.
 
-1. Install dependencies `npm install`
+## Setup Instructions
-2. Run the app `npx expo start`
+Follow the **[software setup steps](https://github.com/OpenInterpreter/01?tab=readme-ov-file#software)** in the main repo's README first before you read this
-3. Open the app in your simulator or on your device with the expo app by scanning the QR code
+
+```shell
+cd software/source/clients/ios/react-native  # cd into `react-native`
+npm install                                  # install dependencies
+npx expo start                               # start local development server
+```
+
+In **Expo Go** select _Scan QR code_ to scan the QR code produced by the `npx expo start` command
+
+## Using the App
+```shell
+poetry run 01 --mobile                  # exposes QR code for 01 Light server
+```
+
+In the app, select _Scan Code_ to scan the QR code produced by the `poetry run 01 --mobile` command
+
+Press and hold the button to speak, release to make the request. To rescan the QR code, swipe left on the screen to go back.

software/source/clients/ios/react-native/src/screens/Main.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef } from "react";
-import { View, Text, TouchableOpacity, StyleSheet, Image } from "react-native";
+import { View, Text, TouchableOpacity, StyleSheet, BackHandler, Image } from "react-native";
 import * as FileSystem from "expo-file-system";
 import { AVPlaybackStatus, AVPlaybackStatusSuccess, Audio } from "expo-av";
 import { polyfill as polyfillEncoding } from "react-native-polyfill-globals/src/encoding";
@@ -306,6 +306,23 @@ const Main: React.FC<MainProps> = ({ route }) => {
       useNativeDriver: false, // 'backgroundColor' does not support native driver
     }).start();
   };
+
+  useEffect(() => {
+    const backAction = () => {
+      navigation.navigate('Home');  // Always navigate back to Home
+      return true;  // Prevent default action
+    };
+
+    // Add event listener for hardware back button on Android
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      backAction
+    );
+
+    return () => backHandler.remove();
+  }, [navigation]);
+
+
   return (
     <Animated.View style={[styles.container, { backgroundColor }]}>
       {/* <TouchableOpacity
@@ -331,16 +348,6 @@ const Main: React.FC<MainProps> = ({ route }) => {
         >
           {connectionStatus}
         </Text>
-        <RecordButton
-          playPip={playPip}
-          playPop={playPop}
-          recording={recording}
-          setRecording={setRecording}
-          ws={ws}
-          backgroundColorAnim={backgroundColorAnim}
-          buttonBackgroundColorAnim={buttonBackgroundColorAnim}
-          setIsPressed={setIsPressed}
-        />
         <TouchableOpacity
           style={styles.button}
           onPressIn={() => {