Structure globale de l'application client

Signed-off-by: Emmy D'Anello <emmy@luemy.eu>

client/.env

@@ -0,0 +1 @@
+ANDROID_HOME=/opt/android-sdk

client/app.json

@@ -15,7 +15,8 @@
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "package": "eu.luemy.traintrapemoi"
     },
     "web": {
       "bundler": "metro",
@@ -36,6 +37,14 @@
     ],
     "experiments": {
       "typedRoutes": true
+    },
+    "extra": {
+      "router": {
+        "origin": false
+      },
+      "eas": {
+        "projectId": "1898a5de-1db1-41f7-b883-1b02885f750a"
+      }
     }
   }
 }

client/app/(tabs)/_layout.tsx

@@ -0,0 +1,50 @@
+import { Tabs } from 'expo-router'
+import React from 'react'
+
+import { Colors } from '@/constants/Colors'
+import { useColorScheme } from '@/hooks/useColorScheme'
+import { FontAwesome6, MaterialIcons } from '@expo/vector-icons'
+
+export default function TabLayout() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+      }}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Carte',
+          headerShown: false,
+          tabBarIcon: ({ color }) => <FontAwesome6 name="map-location-dot" size={24} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="challenges"
+        options={{
+          title: 'Challenges',
+          headerTitleStyle: {fontSize: 32},
+          tabBarIcon: ({ color }) => <FontAwesome6 name="coins" size={24} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="train"
+        options={{
+          title: 'Ajouter un trajet',
+          headerTitleStyle: {fontSize: 32},
+          tabBarIcon: ({ color }) => <FontAwesome6 name="train" size={24} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="history"
+        options={{
+          title: 'Historique',
+          headerTitleStyle: {fontSize: 32},
+          tabBarIcon: ({ color }) => <MaterialIcons name="history" size={24} color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}

client/app/(tabs)/challenges.tsx

@@ -0,0 +1,14 @@
+import { ScrollView } from 'react-native';
+
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+
+export default function ChallengesScreen() {
+  return (
+    <ScrollView>
+      <ThemedView>
+        <ThemedText>Ici on aura la gestion des challenges</ThemedText>
+      </ThemedView>
+    </ScrollView>
+  );
+}

client/app/(tabs)/history.tsx

@@ -0,0 +1,14 @@
+import { ScrollView } from 'react-native';
+
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+
+export default function HistoryScreen() {
+  return (
+    <ScrollView>
+      <ThemedView>
+        <ThemedText>Ici on aura la gestion de l'historique des trains empruntés et des challenges effectués</ThemedText>
+      </ThemedView>
+    </ScrollView>
+  );
+}

client/app/(tabs)/index.jsx

@@ -0,0 +1,46 @@
+import { Platform, StyleSheet } from 'react-native'
+import { ThemedView } from '@/components/ThemedView'
+
+export default function MapScreen() {
+  if (Platform.OS === "web") {
+    const maplibre = require('react-map-gl/maplibre')
+    const Map = maplibre.Map
+    return <ThemedView style={styles.page}>
+        <Map
+        initialViewState={{
+          longitude: 0,
+          latitude: 0,
+          zoom: 1
+        }}
+        mapStyle="https://demotiles.maplibre.org/style.json"
+      />
+    </ThemedView>
+  }
+  else {
+    const MapLibreGL = require('@maplibre/maplibre-react-native')
+    MapLibreGL.setAccessToken(null)
+    return (
+      <ThemedView style={styles.page}>
+        <MapLibreGL.MapView
+            style={styles.map}
+            logoEnabled={false}
+            styleURL="https://demotiles.maplibre.org/style.json"
+            children={[]}
+          />
+      </ThemedView>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  page: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  map: {
+    flex: 1,
+    alignSelf: 'stretch',
+  },
+});

client/app/(tabs)/train.tsx

@@ -0,0 +1,14 @@
+import { ScrollView } from 'react-native';
+
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+
+export default function TrainScreen() {
+  return (
+    <ScrollView>
+      <ThemedView>
+        <ThemedText>Ici on aura la page pour ajouter un trajet en train depuis Rail Planner</ThemedText>
+      </ThemedView>
+    </ScrollView>
+  );
+}

client/app/_layout.tsx

@@ -1,10 +1,15 @@
 import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
 import { Stack } from "expo-router"
 import { useColorScheme } from '@/hooks/useColorScheme'
+import { StatusBar } from 'expo-status-bar'
 
 export default function RootLayout() {
   const colorScheme = useColorScheme()
   return <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-    <Stack />
+    <Stack>
+      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      <Stack.Screen name="+not-found" />
+    </Stack>
+    <StatusBar style="auto" />
   </ThemeProvider>
 }

client/app/index.tsx

@@ -1,16 +0,0 @@
-import { View } from "react-native"
-import { ThemedText } from "@/components/ThemedText"
-
-export default function Index() {
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <ThemedText>Bienvue sur « Traintrape-moi » !</ThemedText>
-    </View>
-  );
-}

client/eas.json

@@ -0,0 +1,21 @@
+{
+  "cli": {
+    "version": ">= 13.4.2",
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {
+      "autoIncrement": true
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}

client/package.json

@@ -15,11 +15,13 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^14.0.2",
+    "@maplibre/maplibre-react-native": "^10.0.0-alpha.28",
     "@react-navigation/bottom-tabs": "^7.0.0",
     "@react-navigation/native": "^7.0.0",
     "expo": "~52.0.11",
     "expo-blur": "~14.0.1",
     "expo-constants": "~17.0.3",
+    "expo-dev-client": "~5.0.4",
     "expo-font": "~13.0.1",
     "expo-haptics": "~14.0.0",
     "expo-linking": "~7.0.3",
@@ -29,8 +31,10 @@
     "expo-symbols": "~0.2.0",
     "expo-system-ui": "~4.0.4",
     "expo-web-browser": "~14.0.1",
+    "maplibre-gl": "^4.7.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-map-gl": "^7.1.7",
     "react-native": "0.76.3",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-reanimated": "~3.16.1",

client/tsconfig.json

@@ -12,6 +12,7 @@
     "**/*.ts",
     "**/*.tsx",
     ".expo/types/**/*.ts",
-    "expo-env.d.ts"
+    "expo-env.d.ts",
+    "app/(tabs)/index.jsx"
   ]
 }