Creating a RN example for simple-chatbot

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;