Affichage des dernières positions sur la carte

client/app/(tabs)/index.tsx

@@ -6,6 +6,7 @@ import { FAB, Surface, Text } from 'react-native-paper'
 import { useGame } from '@/hooks/useGame'
 import { FontAwesome6 } from '@expo/vector-icons'
 import FreeChaseBanner from '@/components/FreeChaseBanner'
+import { View } from 'react-native'
 
 export default function MapScreen() {
   const [backgroundStatus, requestBackgroundPermission] = useBackgroundPermissions()
@@ -16,20 +17,22 @@ export default function MapScreen() {
 
   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"} />
+      <View style={styles.container}>
+        {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"} />
+      </View>
       <FreeChaseBanner />
     </Surface>
   )
@@ -39,6 +42,11 @@ const styles = StyleSheet.create({
   page: {
     flex: 1,
   },
+  container: {
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   map: {
     flex: 1,
     alignSelf: 'stretch',