Le menu de carte est dans un ficher map.tsx

client/app/(tabs)/index.tsx

@@ -1,58 +1,3 @@
-import { StyleSheet } from 'react-native'
+import MapScreen from './map'
-import "maplibre-gl/dist/maplibre-gl.css"
-import { useBackgroundPermissions } from 'expo-location'
-import Map from '@/components/Map'
-import { FAB, Surface, Text } from 'react-native-paper'
-import { useGame } from '@/hooks/useGame'
-import { FontAwesome6 } from '@expo/vector-icons'
 
-export default function MapScreen() {
+export default MapScreen
-  const [backgroundStatus, requestBackgroundPermission] = useBackgroundPermissions()
-  if (!backgroundStatus?.granted && backgroundStatus?.canAskAgain)
-    requestBackgroundPermission()
-
-  const game = useGame()
-
-  return (
-    <Surface style={styles.page}>
-      {backgroundStatus?.granted ? <Map /> : <Text>La géolocalisation est requise pour utiliser la carte.</Text>}
-      <FAB
-          style={styles.moneyBadge}
-          visible={game.gameStarted || game.money > 0}
-          icon={(props) => <FontAwesome6 {...props} name='coins' size={20} />}
-          color='black'
-          label={`${game.money}`} />
-      <FAB
-          style={styles.statusBadge}
-          visible={game.gameStarted || game.money > 0}
-          size='small'
-          color='black'
-          icon={game.currentRunner ? 'run-fast' : () => <FontAwesome6 name='cat' size={20} />}
-          label={game.currentRunner ? "Coureuse" : "Poursuiveuse"} />
-    </Surface>
-  )
-}
-
-const styles = StyleSheet.create({
-  page: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  map: {
-    flex: 1,
-    alignSelf: 'stretch',
-  },
-  moneyBadge: {
-    position: 'absolute',
-    top: 40,
-    right: 20,
-    backgroundColor: 'orange',
-  },
-  statusBadge: {
-    position: 'absolute',
-    top: 40,
-    left: 20,
-    backgroundColor: 'pink',
-  },
-})

client/app/(tabs)/map.tsx

@@ -0,0 +1,58 @@
+import { StyleSheet } from 'react-native'
+import "maplibre-gl/dist/maplibre-gl.css"
+import { useBackgroundPermissions } from 'expo-location'
+import Map from '@/components/Map'
+import { FAB, Surface, Text } from 'react-native-paper'
+import { useGame } from '@/hooks/useGame'
+import { FontAwesome6 } from '@expo/vector-icons'
+
+export default function MapScreen() {
+  const [backgroundStatus, requestBackgroundPermission] = useBackgroundPermissions()
+  if (!backgroundStatus?.granted && backgroundStatus?.canAskAgain)
+    requestBackgroundPermission()
+
+  const game = useGame()
+
+  return (
+    <Surface style={styles.page}>
+      {backgroundStatus?.granted ? <Map /> : <Text>La géolocalisation est requise pour utiliser la carte.</Text>}
+      <FAB
+          style={styles.moneyBadge}
+          visible={game.gameStarted || game.money > 0}
+          icon={(props) => <FontAwesome6 {...props} name='coins' size={20} />}
+          color='black'
+          label={`${game.money}`} />
+      <FAB
+          style={styles.statusBadge}
+          visible={game.gameStarted || game.money > 0}
+          size='small'
+          color='black'
+          icon={game.currentRunner ? 'run-fast' : () => <FontAwesome6 name='cat' size={20} />}
+          label={game.currentRunner ? "Coureuse" : "Poursuiveuse"} />
+    </Surface>
+  )
+}
+
+const styles = StyleSheet.create({
+  page: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  map: {
+    flex: 1,
+    alignSelf: 'stretch',
+  },
+  moneyBadge: {
+    position: 'absolute',
+    top: 40,
+    right: 20,
+    backgroundColor: 'orange',
+  },
+  statusBadge: {
+    position: 'absolute',
+    top: 40,
+    left: 20,
+    backgroundColor: 'pink',
+  },
+})