[mobile] reorganize folder structure

mobile/App.tsx

@@ -1,51 +0,0 @@
-
-import * as React from 'react';
-import { View, Text, Button } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import type { NativeStackScreenProps } from '@react-navigation/native-stack';
-import { useTranslation } from 'react-i18next';
-
-type RootStackParamList = {
-  Home: undefined,
-  Loby: undefined,
-  Game: {gameId: string}
-};
-
-type HomeScreenProps = NativeStackScreenProps<RootStackParamList, 'Home'>;
-type LobyScreenProps = NativeStackScreenProps<RootStackParamList, 'Loby'>;
-
-function HomeScreen({ navigation, route }: HomeScreenProps) {
-  return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button 
-        title='New Game'
-        onPress={() => navigation.navigate('Loby')}></Button>
-    </View>
-  );
-}
-
-function LobyScreen({ navigation, route }: LobyScreenProps) {
-  const { t } = useTranslation();
-
-  return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>{t('hello')}</Text>
-    </View>
-  );
-}
-
-const Stack = createNativeStackNavigator<RootStackParamList>();
-
-function App() {
-  return (
-    <NavigationContainer>
-      <Stack.Navigator>
-        <Stack.Screen name="Home" component={HomeScreen} />
-        <Stack.Screen name="Loby" component={LobyScreen} />
-      </Stack.Navigator>
-    </NavigationContainer>
-  );
-}
-
-export default App;

mobile/__tests__/App.test.tsx

@@ -4,7 +4,7 @@
 
 import 'react-native';
 import React from 'react';
-import App from '../App';
+import App from '../src/App';
 
 // Note: import explicitly to use the types shipped with jest.
 import {it} from '@jest/globals';

mobile/app.json

@@ -1,4 +1,4 @@
 {
   "name": "mancala_mobile",
-  "displayName": "mancala_mobile"
+  "displayName": "Mancala"
 }

mobile/index.js

@@ -3,7 +3,7 @@
  */
 
 import {AppRegistry} from 'react-native';
-import App from './App';
+import App from './src/App';
 import {name as appName} from './app.json';
 import './src/localization/i18n';
 

mobile/src/App.tsx

@@ -0,0 +1,22 @@
+
+import * as React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { RootStackParamList } from './types';
+import { HomeScreen } from './screens/HomeScreen';
+import LobyScreen from './screens/LobyScreen';
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="Loby" component={LobyScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+export default App;

mobile/src/localization/en.ts

@@ -1,5 +1,6 @@
 export default {
     translation: { 
-        hello: 'Hello',
+        newGame: "New Game",
+        searchingOppenent: 'Please wait, searching opponent...',
     }
 };

mobile/src/localization/tr.ts

@@ -1,5 +1,6 @@
 export default {
     translation: { 
-        hello: 'Merhaba',
+        newGame: "Yeni Oyun",
+        searchingOppenent: 'Lütfen bekleyin, rakip bulunuyor...',
     }
 };

mobile/src/screens/GameScreen.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { View, Button } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import { GameScreenProps } from '../types';
+
+export function GameScreen({ navigation, route }: GameScreenProps) {
+  const { t } = useTranslation();
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+    </View>
+  );
+}

mobile/src/screens/HomeScreen.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { View, Button } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import { HomeScreenProps } from '../types';
+
+export function HomeScreen({ navigation, route }: HomeScreenProps) {
+  const { t } = useTranslation();
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Button
+        title={t('newGame')}
+        onPress={() => navigation.navigate('Loby')}></Button>
+    </View>
+  );
+}

mobile/src/screens/LobyScreen.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { View, Text, Button } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import { LobyScreenProps } from '../types';
+
+export default function LobyScreen({ navigation, route }: LobyScreenProps) {
+    const { t } = useTranslation();
+
+    return (
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            <Text>{t('searchingOppenent')}</Text>
+        </View>
+    );
+}

mobile/src/types/index.ts

@@ -0,0 +1,13 @@
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+
+export type RootStackParamList = {
+    Home: undefined,
+    Loby: undefined,
+    Game: { gameId: string }
+};
+
+export type HomeScreenProps = NativeStackScreenProps<RootStackParamList, 'Home'>;
+
+export type LobyScreenProps = NativeStackScreenProps<RootStackParamList, 'Loby'>;
+
+export type GameScreenProps = NativeStackScreenProps<RootStackParamList, 'Game'>;