initialise and add react native app environment, UI and foundational code for user authentication

mobile/App.tsx

@@ -0,0 +1,34 @@
+import { StatusBar } from 'expo-status-bar';
+import { useState } from 'react';
+import { useColorScheme } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import AppNavigator from './src/navigation/AppNavigator';
+import AnimatedSplash from './src/screens/AnimatedSplash';
+import * as SplashScreen from 'expo-splash-screen';
+import * as SystemUI from 'expo-system-ui';
+import { AppLightTheme, AppDarkTheme } from './src/navigation/themes';
+
+SplashScreen.preventAutoHideAsync();
+
+export default function App() {
+  const [isSplashFinished, setSplashFinished] = useState(false);
+  const colorScheme = useColorScheme();
+
+  // Fix for white background behind modals
+  const backgroundColor = colorScheme === 'dark' ? AppDarkTheme.colors.background : AppLightTheme.colors.background;
+  SystemUI.setBackgroundColorAsync(backgroundColor);
+
+  return (
+    <SafeAreaProvider>
+      <NavigationContainer theme={colorScheme === 'dark' ? AppDarkTheme : AppLightTheme}>
+        <AppNavigator />
+        <StatusBar style={colorScheme === 'dark' ? "light" : "dark"} />
+      </NavigationContainer>
+
+      {!isSplashFinished && (
+        <AnimatedSplash onFinish={() => setSplashFinished(true)} />
+      )}
+    </SafeAreaProvider>
+  );
+}