use current locale

mobile/src/App.tsx

@@ -11,6 +11,7 @@ import { RTMTWS } from './rtmt/rtmt_websocket';
 import { ConnectionState } from './rtmt/rtmt';
 import { useTranslation } from 'react-i18next';
 import Snackbar from 'react-native-snackbar';
+import { NativeModules, I18nManager, Platform } from 'react-native'
 
 // https://github.com/uuidjs/uuid/issues/514#issuecomment-691475020
 import 'react-native-get-random-values';
@@ -21,7 +22,20 @@ const context = initContext();
 
 function App() {
 
-  const { t } = useTranslation();
+  // Get device language
+  const deviceLanguage =
+    Platform.OS === 'ios'
+      ? NativeModules.SettingsManager.settings.AppleLocale // iOS
+      : NativeModules.I18nManager.localeIdentifier; // Android
+
+
+  const { t, i18n } = useTranslation();
+
+  React.useEffect(() => {
+    console.log(deviceLanguage);
+    
+    i18n.changeLanguage(deviceLanguage === "tr_TR" ? "tr" : "en")
+  }, []);
 
   const [userKey, setUserKey] = React.useState<string | undefined>(undefined);
 
@@ -71,7 +85,6 @@ function App() {
   //    context.themeManager.theme.textColor,
   //    context.themeManager.theme.textLightColor
   //);
-  
   return (
     <NavigationContainer>
       <Stack.Navigator>
@@ -80,7 +93,7 @@ function App() {
         <Stack.Screen name="Loby" component={LobyScreen}
           options={{ title: t("Mancala"), headerStyle: { backgroundColor: context.themeManager.theme.appBarBgColor } }} />
         <Stack.Screen name="Game" component={GameScreen}
-          options={{title: t("Mancala"), headerStyle: { backgroundColor: context.themeManager.theme.appBarBgColor }}}/>
+          options={{ title: t("Mancala"), headerStyle: { backgroundColor: context.themeManager.theme.appBarBgColor }, headerTintColor: '#fff', }} />
       </Stack.Navigator>
     </NavigationContainer>
   );