[mobile] hello world with navigation

mobile/App.tsx

@@ -1,118 +1,48 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- */
 
-import React from 'react';
+import * as React from 'react';
-import type {PropsWithChildren} from 'react';
+import { View, Text, Button } from 'react-native';
-import {
+import { NavigationContainer } from '@react-navigation/native';
-  SafeAreaView,
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
-  ScrollView,
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
 
-import {
+type RootStackParamList = {
-  Colors,
+  Home: undefined,
-  DebugInstructions,
+  Loby: undefined,
-  Header,
+  Game: {gameId: string}
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-type SectionProps = PropsWithChildren<{
-  title: string;
-}>;
-
-function Section({children, title}: SectionProps): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-  return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
-    </View>
-  );
-}
-
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
 };
 
+type HomeScreenProps = NativeStackScreenProps<RootStackParamList, 'Home'>;
+type LobyScreenProps = NativeStackScreenProps<RootStackParamList, 'Loby'>;
+
+function HomeScreen({ navigation, route }: HomeScreenProps) {
   return (
-    <SafeAreaView style={backgroundStyle}>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <StatusBar
+      <Button 
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        title='New Game'
-        backgroundColor={backgroundStyle.backgroundColor}
+        onPress={() => navigation.navigate('Loby')}></Button>
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-            screen and then come back to see your edits.
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
     </View>
-      </ScrollView>
-    </SafeAreaView>
   );
 }
 
-const styles = StyleSheet.create({
+function LobyScreen({ navigation, route }: LobyScreenProps) {
-  sectionContainer: {
+  return (
-    marginTop: 32,
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-    paddingHorizontal: 24,
+      <Text>Loby Screen</Text>
-  },
+    </View>
-  sectionTitle: {
+  );
-    fontSize: 24,
+}
-    fontWeight: '600',
+
-  },
+const Stack = createNativeStackNavigator<RootStackParamList>();
-  sectionDescription: {
+
-    marginTop: 8,
+function App() {
-    fontSize: 18,
+  return (
-    fontWeight: '400',
+    <NavigationContainer>
-  },
+      <Stack.Navigator>
-  highlight: {
+        <Stack.Screen name="Home" component={HomeScreen} />
-    fontWeight: '700',
+        <Stack.Screen name="Loby" component={LobyScreen} />
-  },
+      </Stack.Navigator>
-});
+    </NavigationContainer>
+  );
+}
 
 export default App;