fix issues. Remove babel.

app/(screens)/_layout.tsx

@@ -1,57 +0,0 @@
-import React, { useEffect } from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { useFonts } from 'expo-font';
-import * as SplashScreen from 'expo-splash-screen';
-import { ThemeProvider, DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
-import Settings from '@/components/Settings';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import HomeScreen from '.';
-import { LanguageSelection } from '@/components/LanguageSelection';
-import { language_matrix_entry } from '../i18n/api';
-import ConversationThread from '@/components/ConversationThread';
-
-
-const Stack = createNativeStackNavigator();
-
-export default function _layout() {
-  const [loaded] = useFonts({
-    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
-  });
-
-  useEffect(() => {
-    if (loaded) {
-      SplashScreen.hideAsync();
-    }
-  }, [loaded]);
-
-  if (!loaded) {
-    return null;
-  }
-
-  return (
-    <NavigationContainer>
-      <Stack.Navigator>
-        <Stack.Screen
-          name="Home"
-          component={HomeScreen}
-          options={{title: 'Welcome'}}
-        />
-        <Stack.Screen
-          name="LanguageSelection"
-          component={LanguageSelection}
-        />
-        <Stack.Screen
-          name="Conversation"
-          component={ConversationThread}
-        />
-        <Stack.Screen name="Settings" component={Settings} />
-      </Stack.Navigator>
-    </NavigationContainer>
-  );
-}
-
-const styles = StyleSheet.create({
-  settingsIconContainer: {
-    marginLeft: 16,
-  },
-});

app/(screens)/index.tsx

@@ -1,45 +0,0 @@
-import { LanguageSelection } from '@/components/LanguageSelection';
-import { useState } from 'react';
-import { Button, Text, View } from 'react-native';
-import { Image, StyleSheet, Platform } from 'react-native';
-import { Conversation, Speaker } from '../lib/conversation';
-import { language_matrix_entry, Translator } from '../i18n/api';
-import ConversationThread from '@/components/ConversationThread';
-import { NavigationContainerProps, NavigationProp, ParamListBase } from '@react-navigation/native';
-
-export default function HomeScreen({navigation} : {navigation: NavigationProp<ParamListBase>}) {
-
-  const [language, setLanguage] = useState<language_matrix_entry | undefined>()
-  const [conversation, setConversation] = useState<Conversation | undefined>();
-
-  return (
-    conversation ? <ConversationThread conversation={conversation} /> :
-      <View>
-        <Button
-          title="Settings"
-          onPress={() =>
-            navigation.navigate('Settings')
-          }
-        />
-      </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  titleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  stepContainer: {
-    gap: 8,
-    marginBottom: 8,
-  },
-  reactLogo: {
-    height: 178,
-    width: 290,
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
-  },
-});

app/+not-found.tsx

@@ -1,25 +0,0 @@
-import { Link, Stack } from 'expo-router';
-import { StyleSheet } from 'react-native';
-
-import { ThemedText } from '@/components/ThemedText';
-import { Text } from 'react-native';
-export default function NotFoundScreen() {
-  return (
-    <>
-      <Text>Not Found</Text>
-    </>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 20,
-  },
-  link: {
-    marginTop: 15,
-    paddingVertical: 15,
-  },
-});

app/_layout.tsx

@@ -1,38 +1,17 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
-import { useFonts } from 'expo-font';
 import { Stack } from 'expo-router';
-import * as SplashScreen from 'expo-splash-screen';
-import { StatusBar } from 'expo-status-bar';
-import { useEffect } from 'react';
-import 'react-native-reanimated';
-
-import { useColorScheme } from '@/hooks/useColorScheme';
-
-// Prevent the splash screen from auto-hiding before asset loading is complete.
-SplashScreen.preventAutoHideAsync();
-
-export default function RootLayout() {
-  const colorScheme = useColorScheme();
-  const [loaded] = useFonts({
-    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
-  });
-
-  useEffect(() => {
-    if (loaded) {
-      SplashScreen.hideAsync();
-    }
-  }, [loaded]);
-
-  if (!loaded) {
-    return null;
-  }
 
+export default function Layout() {
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="(screens)" options={{ headerShown: false }} />
-        <Stack.Screen name="+not-found" />
-      </Stack>
-    </ThemeProvider>
+    <Stack
+      screenOptions={{
+        headerStyle: {
+          backgroundColor: '#f4511e',
+        },
+        headerTintColor: '#fff',
+        headerTitleStyle: {
+          fontWeight: 'bold',
+        },
+      }}
+    />
   );
 }

app/index.tsx

@@ -0,0 +1,67 @@
+import { LanguageSelection } from "@/components/LanguageSelection";
+import { Link, Stack } from "expo-router";
+import { useState } from "react";
+import { Image, Text, View, StyleSheet } from "react-native";
+import { Translator, language_matrix_entry } from "./i18n/api";
+import ConversationThread from "@/components/ConversationThread";
+import { Conversation } from "./lib/conversation";
+
+function LogoTitle() {
+  return (
+    <Image
+      style={styles.image}
+      source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
+    />
+  );
+}
+
+export default function Home() {
+  const [lang, setLang] = useState<language_matrix_entry | undefined>();
+  const [conversation, setConversation] = useState<Conversation | undefined>();
+
+  function onLangSelected(lang: language_matrix_entry | undefined) {
+    console.log("Language %s selected", lang?.code);
+    setLang(lang);
+    if (!lang?.code) return;
+    setConversation(
+      new Conversation(
+        new Translator("en", lang.code),
+        { id: "host", language: "en" },
+        { id: "guest", language: lang.code }
+      )
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Stack.Screen
+        options={{
+          title: "My home",
+          headerStyle: { backgroundColor: "#f4511e" },
+          headerTintColor: "#fff",
+          headerTitleStyle: {
+            fontWeight: "bold",
+          },
+        }}
+      />
+      <Text>Home Screen</Text>
+      {conversation ? (
+        <ConversationThread conversation={conversation} />
+      ) : (
+        <LanguageSelection onLangSelected={onLangSelected} />
+      )}
+      )
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "flex-start",
+  },
+  image: {
+    width: 50,
+    height: 50,
+  },
+});

app/lib/conversation.ts

@@ -30,8 +30,8 @@ export class Message {
 
 export class Conversation extends Array<Message> {
 
-    public onAddMessage? : (conversation : Conversation) => Promise<any>;
-    public onTranslationDone? : (conversation : Conversation) => Promise<any>;
+    public onAddMessage? : (conversation : Conversation) => any;
+    public onTranslationDone? : (conversation : Conversation) => any;
 
     constructor (
         private translator : Translator,

app/settings.tsx

@@ -0,0 +1,18 @@
+import {StyleSheet, Text, View} from "react-native"; 
+
+export type SettingsScreenProps = {
+
+};
+
+export const SettingsScreen = (props: SettingsScreenProps) => {
+  return (
+    <View style={styles.wrapper}>
+        <Text>Settings Here</Text>
+    </View>
+  )
+};
+
+export const styles = StyleSheet.create({
+  wrapper: {
+  }
+});