feat: rework example UI (#107)

* fixup setup

* feat: add basic screens

* fixup

* streaming

* add logo to header

Author: szymonrybczak

apps/example-apple/assets/ck.png

@@ -31,9 +31,13 @@
     "react-native": "0.79.5",
     "react-native-audio-api": "^0.7.1",
     "react-native-bottom-tabs": "^0.11.0",
+    "react-native-get-random-values": "^1.11.0",
+    "react-native-gifted-chat": "^2.4.0",
+    "react-native-keyboard-controller": "^1.18.6",
     "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "4.15.4",
+    "uuid": "^11.1.0",
     "web-streams-polyfill": "^4.1.0",
     "zod": "^4.0.0"
   },

apps/example-apple/package.json

@@ -5,6 +5,7 @@ import { NavigationContainer } from '@react-navigation/native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { StatusBar } from 'expo-status-bar'
 import React from 'react'
+import { Image } from 'react-native'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
 
 import LLMScreen from './screens/LLMScreen'
@@ -23,7 +24,19 @@ const SpeechStack = createNativeStackNavigator()
 function LLMStackScreen() {
   return (
     <LLMStack.Navigator>
-      <LLMStack.Screen name="LLMScreen" component={LLMScreen} />
+      <LLMStack.Screen
+        name="LLMScreen"
+        component={LLMScreen}
+        options={{
+          headerTitle: () => (
+            <Image
+              source={require('../assets/ck.png')}
+              style={{ width: 36, height: 36, marginTop: 10 }}
+              resizeMode="contain"
+            />
+          ),
+        }}
+      />
     </LLMStack.Navigator>
   )
 }
@@ -34,6 +47,9 @@ function PlaygroundStackScreen() {
       <PlaygroundStack.Screen
         name="PlaygroundScreen"
         component={PlaygroundScreen}
+        options={{
+          title: 'Playground',
+        }}
       />
     </PlaygroundStack.Navigator>
   )
@@ -45,6 +61,9 @@ function TranscribeStackScreen() {
       <TranscribeStack.Screen
         name="TranscribeScreen"
         component={TranscribeScreen}
+        options={{
+          title: 'Speech to Text',
+        }}
       />
     </TranscribeStack.Navigator>
   )
@@ -53,7 +72,13 @@ function TranscribeStackScreen() {
 function SpeechStackScreen() {
   return (
     <SpeechStack.Navigator>
-      <SpeechStack.Screen name="SpeechScreen" component={SpeechScreen} />
+      <SpeechStack.Screen
+        name="SpeechScreen"
+        component={SpeechScreen}
+        options={{
+          title: 'Text to Speech',
+        }}
+      />
     </SpeechStack.Navigator>
   )
 }