Installation de React Native Paper

client/app/(tabs)/_layout.tsx

@@ -1,18 +1,11 @@
 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'
+import TabBar from '@/components/ui/TabBar'
 
 export default function TabLayout() {
-  const colorScheme = useColorScheme()
-
   return (
-    <Tabs
-      screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-      }}>
+    <Tabs tabBar={(props) => <TabBar {...props} />}>
       <Tabs.Screen
         name="index"
         options={{

client/app/(tabs)/challenges.tsx

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

client/app/(tabs)/history.tsx

@@ -1,13 +1,9 @@
-import { ScrollView } from 'react-native'
-import { ThemedText } from '@/components/ThemedText'
-import { ThemedView } from '@/components/ThemedView'
+import { Surface, Text } from 'react-native-paper'
 
 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>
+    <Surface>
+      <Text>Ici on aura la gestion de l'historique des trains empruntés et des challenges effectués</Text>
+    </Surface>
   )
 }

client/app/(tabs)/index.tsx

@@ -1,9 +1,8 @@
 import { StyleSheet } from 'react-native'
-import { ThemedView } from '@/components/ThemedView'
 import "maplibre-gl/dist/maplibre-gl.css"
 import { useBackgroundPermissions } from 'expo-location'
 import Map from '@/components/Map'
-import { ThemedText } from '@/components/ThemedText'
+import { Surface, Text } from 'react-native-paper'
 
 export default function MapScreen() {
   const [backgroundStatus, requestBackgroundPermission] = useBackgroundPermissions()
@@ -11,9 +10,9 @@ export default function MapScreen() {
     requestBackgroundPermission()
 
   return (
-    <ThemedView style={styles.page}>
-      {backgroundStatus?.granted ? <Map /> : <ThemedText>La géolocalisation est requise pour utiliser la carte.</ThemedText>}
-    </ThemedView>
+    <Surface style={styles.page}>
+      {backgroundStatus?.granted ? <Map /> : <Text>La géolocalisation est requise pour utiliser la carte.</Text>}
+    </Surface>
   )
 }
 

client/app/(tabs)/settings.tsx

@@ -1,15 +1,12 @@
-import { FlatList, ScrollView } from 'react-native'
-import { ThemedText } from '@/components/ThemedText'
-import { ThemedView } from '@/components/ThemedView'
+import { FlatList } from 'react-native'
+import { Surface, Text } from 'react-native-paper'
 // import * as SecureStore from 'expo-secure-store'
 
 export default function HistoryScreen() {
   // const token = SecureStore.getItem("apiToken")
   return (
-    <ScrollView>
-      <ThemedView>
-        <FlatList data={["Se connecter à l'API"]} renderItem={({item}) => <ThemedText>{item}</ThemedText>} />
-      </ThemedView>
-    </ScrollView>
+    <Surface>
+      <FlatList data={["Se connecter à l'API"]} renderItem={({item}) => <Text>{item}</Text>} />
+    </Surface>
   )
 }

client/app/(tabs)/train.tsx

@@ -1,14 +1,10 @@
 import { ScrollView } from 'react-native'
-
-import { ThemedText } from '@/components/ThemedText'
-import { ThemedView } from '@/components/ThemedView'
+import { Surface, Text } from 'react-native-paper'
 
 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>
+    <Surface>
+      <Text>Ici on aura la page pour ajouter un trajet en train depuis Rail Planner</Text>
+    </Surface>
   )
 }