Creating a RN example for simple-chatbot

examples/simple-chatbot/client/react-native/src/views/MeetingView.tsx

@@ -0,0 +1,159 @@
+import {
+  View,
+  StyleSheet,
+  Text,
+  Image,
+  TouchableOpacity,
+} from 'react-native';
+
+import React from "react"
+
+import { useVoiceClient } from '../context/VoiceClientContext';
+
+import { Images } from '../theme/Assets';
+import { MaterialIcons } from '@expo/vector-icons';
+
+import WaveformView from '../components/WaveformView';
+import MicrophoneView from '../components/MicrophoneView';
+import CameraButtonView from '../components/CameraButtonView';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import Colors from '../theme/Colors';
+import CustomButton from '../theme/CustomButton';
+
+const MeetingView: React.FC = () => {
+
+  const { leave, toggleMicInput, toggleCamInput, timerCountDown } = useVoiceClient();
+
+  const timerString = (count: number): string => {
+    const hours = Math.floor(count / 3600);
+    const minutes = Math.floor((count % 3600) / 60);
+    const seconds = count % 60;
+    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+  };
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <View style={styles.container}>
+        <View style={styles.header}>
+          <Image source={Images.dailyBot} style={styles.botImage} />
+          <View style={styles.timerContainer}>
+            <MaterialIcons name="timelapse" size={24} color="black" />
+            <Text style={styles.timerText}>{timerString(timerCountDown)}</Text>
+          </View>
+        </View>
+
+        <View style={styles.mainPanel}>
+          <WaveformView/>
+          <View style={styles.bottomControls}>
+            <TouchableOpacity onPress={toggleMicInput}>
+              <MicrophoneView
+                style={styles.microphone}
+              />
+            </TouchableOpacity>
+            <TouchableOpacity onPress={toggleCamInput}>
+              <CameraButtonView
+                style={styles.camera}
+              />
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        {/* Bottom Panel */}
+        <View style={styles.bottomPanel}>
+          <CustomButton
+            title="End"
+            iconName={"exit-to-app"}
+            onPress={leave}
+            backgroundColor={Colors.black}
+          />
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    width: "100%",
+    backgroundColor: Colors.backgroundApp,
+  },
+  container: {
+    flex: 1,
+    padding: 20,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingBottom: 10,
+  },
+  botImage: {
+    width: 48,
+    height: 48,
+  },
+  timerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.timer,
+    padding: 10,
+    borderRadius: 12,
+  },
+  timerText: {
+    color: 'black',
+    fontWeight: '500',
+    fontSize: 18,
+    marginLeft: 5,
+  },
+  mainPanel: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bottomControls: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    paddingBottom: 20,
+  },
+  microphone: {
+    width: 160,
+    height: 160,
+  },
+  camera: {
+    width: 120,
+    height: 120,
+  },
+  bottomPanel: {
+    paddingVertical: 10,
+  },
+  settingsButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#ccc', // Replace with Color.buttonsBorder equivalent
+    borderRadius: 12,
+    padding: 10,
+    marginBottom: 10,
+  },
+  settingsText: {
+    marginLeft: 5,
+    color: 'black',
+  },
+  endButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'black',
+    borderRadius: 12,
+    padding: 10,
+  },
+  endText: {
+    marginLeft: 5,
+    color: 'white',
+  },
+});
+
+export default MeetingView;

examples/simple-chatbot/client/react-native/src/views/PreJoinView.tsx

@@ -0,0 +1,82 @@
+import {
+  View,
+  StyleSheet,
+  Text,
+  TextInput,
+  Image
+} from "react-native"
+
+import React, { useEffect, useState } from 'react';
+
+import { useVoiceClient } from '../context/VoiceClientContext';
+
+import Colors from '../theme/Colors';
+import { Images } from '../theme/Assets';
+import CustomButton from '../theme/CustomButton';
+import { SettingsManager } from '../settings/SettingsManager';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: Colors.backgroundApp,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  image: {
+    width: 64,
+    height: 64,
+    marginBottom: 20,
+  },
+  header: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 20,
+  },
+  textInput: {
+    width: '100%',
+    padding: 10,
+    borderColor: Colors.buttonsBorder,
+    backgroundColor: Colors.white,
+    borderWidth: 1,
+    borderRadius: 5,
+    marginBottom: 10,
+  },
+  lastTextInput: {
+    marginBottom: 20,
+  },
+});
+
+const PreJoinView: React.FC = () => {
+  const { start } = useVoiceClient();
+
+  const [backendURL, setBackendURL] = useState<string>('')
+
+  useEffect(() => {
+    const loadSettings = async () => {
+      const loadedSettings = await SettingsManager.getSettings();
+      setBackendURL(loadedSettings.backendURL)
+    };
+    loadSettings();
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <Image source={Images.dailyBot} style={styles.image} />
+      <Text style={styles.header}>Connect to Pipecat.</Text>
+      <TextInput
+        placeholder="Server URL"
+        value={backendURL}
+        onChangeText={setBackendURL}
+        style={[styles.textInput, styles.lastTextInput]}
+      />
+      <CustomButton
+        title="Connect"
+        onPress={() => start(backendURL)}
+        backgroundColor={Colors.backgroundCircle}
+      />
+    </View>
+  )
+};
+
+export default PreJoinView;