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>
   )
 }

client/app/_layout.tsx

@@ -2,7 +2,8 @@ import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native
 import { Stack } from "expo-router"
 import { useColorScheme } from '@/hooks/useColorScheme'
 import { StatusBar } from 'expo-status-bar'
-import { Provider } from 'react-redux'
+import { Provider as StoreProvider } from 'react-redux'
+import { MD3DarkTheme, MD3LightTheme, PaperProvider } from 'react-native-paper'
 import store from '@/utils/store'
 import { useStartGeolocationServiceEffect } from '@/utils/geolocation'
 
@@ -11,14 +12,16 @@ export default function RootLayout() {
   const colorScheme = useColorScheme()
 
   return (
-    <Provider store={store}>
-      <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-        <Stack>
-          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-          <Stack.Screen name="+not-found" />
-        </Stack>
-        <StatusBar style="auto" />
-      </ThemeProvider>
-    </Provider>
+    <StoreProvider store={store}>
+      <PaperProvider theme={colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme}>
+        <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+          <Stack>
+            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+            <Stack.Screen name="+not-found" />
+          </Stack>
+          <StatusBar style="auto" />
+        </ThemeProvider>
+      </PaperProvider>
+    </StoreProvider>
   )
 }