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
+    <Tabs tabBar={(props) => <TabBar {...props} />}>
-      screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-      }}>
       <Tabs.Screen
         name="index"
         options={{

client/app/(tabs)/challenges.tsx

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

client/app/(tabs)/history.tsx

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

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}>
+    <Surface style={styles.page}>
-      {backgroundStatus?.granted ? <Map /> : <ThemedText>La géolocalisation est requise pour utiliser la carte.</ThemedText>}
+      {backgroundStatus?.granted ? <Map /> : <Text>La géolocalisation est requise pour utiliser la carte.</Text>}
-    </ThemedView>
+    </Surface>
   )
 }
 

client/app/(tabs)/settings.tsx

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

client/app/(tabs)/train.tsx

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

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}>
+    <StoreProvider store={store}>
-      <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+      <PaperProvider theme={colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme}>
-        <Stack>
+        <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+          <Stack>
-          <Stack.Screen name="+not-found" />
+            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        </Stack>
+            <Stack.Screen name="+not-found" />
-        <StatusBar style="auto" />
+          </Stack>
-      </ThemeProvider>
+          <StatusBar style="auto" />
-    </Provider>
+        </ThemeProvider>
+      </PaperProvider>
+    </StoreProvider>
   )
 }

client/babel.config.js

@@ -0,0 +1,11 @@
+module.exports = function(api) {
+    api.cache(true);
+    return {
+      presets: ['babel-preset-expo'],
+      env: {
+        production: {
+          plugins: ['react-native-paper/babel'],
+        },
+      },
+    }
+  }

client/components/ThemedText.tsx

@@ -1,59 +0,0 @@
-import { Text, type TextProps, StyleSheet } from 'react-native'
-import { useThemeColor } from '@/hooks/useThemeColor'
-
-export type ThemedTextProps = TextProps & {
-  lightColor?: string
-  darkColor?: string
-  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link'
-}
-
-export function ThemedText({
-  style,
-  lightColor,
-  darkColor,
-  type = 'default',
-  ...rest
-}: ThemedTextProps) {
-  const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text')
-
-  return (
-    <Text
-      style={[
-        { color },
-        type === 'default' ? styles.default : undefined,
-        type === 'title' ? styles.title : undefined,
-        type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
-        type === 'subtitle' ? styles.subtitle : undefined,
-        type === 'link' ? styles.link : undefined,
-        style,
-      ]}
-      {...rest}
-    />
-  )
-}
-
-const styles = StyleSheet.create({
-  default: {
-    fontSize: 16,
-    lineHeight: 24,
-  },
-  defaultSemiBold: {
-    fontSize: 16,
-    lineHeight: 24,
-    fontWeight: '600',
-  },
-  title: {
-    fontSize: 32,
-    fontWeight: 'bold',
-    lineHeight: 32,
-  },
-  subtitle: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  link: {
-    lineHeight: 30,
-    fontSize: 16,
-    color: '#0a7ea4',
-  },
-})

client/components/ThemedView.tsx

@@ -1,13 +0,0 @@
-import { View, type ViewProps } from 'react-native'
-import { useThemeColor } from '@/hooks/useThemeColor'
-
-export type ThemedViewProps = ViewProps & {
-  lightColor?: string
-  darkColor?: string
-}
-
-export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
-  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background')
-
-  return <View style={[{ backgroundColor }, style]} {...otherProps} />
-}

client/components/ui/TabBar.tsx

@@ -0,0 +1,49 @@
+import { BottomTabBarProps } from '@react-navigation/bottom-tabs'
+import { CommonActions } from '@react-navigation/native'
+import React from 'react'
+import { BottomNavigation } from 'react-native-paper'
+
+const TabBar = (props: BottomTabBarProps) => (
+  <BottomNavigation.Bar
+    shifting
+    navigationState={props.state}
+    safeAreaInsets={props.insets}
+    onTabPress={({ route, preventDefault }) => {
+      const event = props.navigation.emit({
+        type: 'tabPress',
+        target: route.key,
+        canPreventDefault: true,
+      })
+
+      if (event.defaultPrevented) {
+        preventDefault()
+      } else {
+        props.navigation.dispatch({
+          ...CommonActions.navigate(route.name, route.params),
+          target: props.state.key,
+        })
+      }
+    }}
+    renderIcon={({ route, focused, color }) => {
+      const { options } = props.descriptors[route.key]
+      if (options.tabBarIcon) {
+        return options.tabBarIcon({ focused, color, size: 24 })
+      }
+
+      return null
+    }}
+    getLabelText={({ route }) => {
+      const { options } = props.descriptors[route.key]
+      const label =
+        options.tabBarLabel !== undefined
+          ? options.tabBarLabel.toString()
+          : options.title !== undefined
+            ? options.title
+            : route.name
+
+      return label
+    }}
+  />
+)
+
+export default TabBar

client/constants/Colors.ts

@@ -1,26 +0,0 @@
-/**
- * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
- * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
- */
-
-const tintColorLight = '#0a7ea4'
-const tintColorDark = '#fff'
-
-export const Colors = {
-  light: {
-    text: '#11181C',
-    background: '#fff',
-    tint: tintColorLight,
-    icon: '#687076',
-    tabIconDefault: '#687076',
-    tabIconSelected: tintColorLight,
-  },
-  dark: {
-    text: '#ECEDEE',
-    background: '#151718',
-    tint: tintColorDark,
-    icon: '#9BA1A6',
-    tabIconDefault: '#9BA1A6',
-    tabIconSelected: tintColorDark,
-  },
-}

client/hooks/useThemeColor.ts

@@ -1,21 +0,0 @@
-/**
- * Learn more about light and dark modes:
- * https://docs.expo.dev/guides/color-schemes/
- */
-
-import { Colors } from '@/constants/Colors'
-import { useColorScheme } from '@/hooks/useColorScheme'
-
-export function useThemeColor(
-  props: { light?: string; dark?: string },
-  colorName: keyof typeof Colors.light & keyof typeof Colors.dark
-) {
-  const theme = useColorScheme() ?? 'light'
-  const colorFromProps = props[theme]
-
-  if (colorFromProps) {
-    return colorFromProps
-  } else {
-    return Colors[theme][colorName]
-  }
-}

client/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@expo/vector-icons": "^14.0.2",
         "@maplibre/maplibre-react-native": "^10.0.0-alpha.28",
+        "@pchmn/expo-material3-theme": "github:pchmn/expo-material3-theme",
         "@react-navigation/bottom-tabs": "^7.0.0",
         "@react-navigation/native": "^7.0.0",
         "@reduxjs/toolkit": "^2.4.0",
@@ -37,8 +38,9 @@
         "react-map-gl": "^7.1.7",
         "react-native": "0.76.3",
         "react-native-gesture-handler": "~2.20.2",
+        "react-native-paper": "^5.12.5",
         "react-native-reanimated": "~3.16.1",
-        "react-native-safe-area-context": "4.12.0",
+        "react-native-safe-area-context": "~4.12.0",
         "react-native-screens": "~4.1.0",
         "react-native-web": "~0.19.13",
         "react-native-webview": "13.12.2",
@@ -2258,6 +2260,28 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@callstack/react-theme-provider": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz",
+      "integrity": "sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==",
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^3.2.0",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/@callstack/react-theme-provider/node_modules/deepmerge": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
+      "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -3651,6 +3675,12 @@
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "license": "MIT"
     },
+    "node_modules/@material/material-color-utilities": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@material/material-color-utilities/-/material-color-utilities-0.2.7.tgz",
+      "integrity": "sha512-0FCeqG6WvK4/Cc06F/xXMd/pv4FeisI0c1tUpBbfhA2n9Y8eZEv4Karjbmf2ZqQCPUWMrGp8A571tCjizxoTiQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3710,6 +3740,20 @@
         "node": ">=10"
       }
     },
+    "node_modules/@pchmn/expo-material3-theme": {
+      "version": "1.3.2",
+      "resolved": "git+ssh://git@github.com/pchmn/expo-material3-theme.git#a32494e4a40b69cecd288f6dd0b87239f1fa2fbe",
+      "license": "MIT",
+      "dependencies": {
+        "@material/material-color-utilities": "^0.2.7",
+        "color": "^4.2.3"
+      },
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -13120,6 +13164,57 @@
         "react-native": ">=0.73.0"
       }
     },
+    "node_modules/react-native-paper": {
+      "version": "5.12.5",
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.12.5.tgz",
+      "integrity": "sha512-Qpqd1g9PClmjGj/Dkr1htAwt8cTZ3SCHVmhttxRuG/QML7KzHm5ArLNgR7vz5dW1EwJqTmyl/3gd6gnrtw90mw==",
+      "license": "MIT",
+      "dependencies": {
+        "@callstack/react-theme-provider": "^3.0.9",
+        "color": "^3.1.2",
+        "use-latest-callback": "^0.1.5"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": "*",
+        "react-native-vector-icons": "*"
+      }
+    },
+    "node_modules/react-native-paper/node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
+    "node_modules/react-native-paper/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/react-native-paper/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "license": "MIT"
+    },
+    "node_modules/react-native-paper/node_modules/use-latest-callback": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.11.tgz",
+      "integrity": "sha512-8nhb73STSD/z3GTHklvNjL8F9wMOo0bj0AFnulpIYuFTm6aQlT3ZcNbXF2YurKImIY8+kpSFSDHZZyQmurGrhw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/react-native-reanimated": {
       "version": "3.16.3",
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.16.3.tgz",
@@ -13168,6 +13263,99 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-vector-icons": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.2.0.tgz",
+      "integrity": "sha512-n5HGcxUuVaTf9QJPs/W22xQpC2Z9u0nb0KgLPnVltP8vdUvOp6+R26gF55kilP/fV4eL4vsAHUqUjewppJMBOQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "prop-types": "^15.7.2",
+        "yargs": "^16.1.1"
+      },
+      "bin": {
+        "fa-upgrade.sh": "bin/fa-upgrade.sh",
+        "fa5-upgrade": "bin/fa5-upgrade.sh",
+        "fa6-upgrade": "bin/fa6-upgrade.sh",
+        "generate-icon": "bin/generate-icon.js"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/react-native-vector-icons/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.19.13",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.13.tgz",

client/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@expo/vector-icons": "^14.0.2",
     "@maplibre/maplibre-react-native": "^10.0.0-alpha.28",
+    "@pchmn/expo-material3-theme": "github:pchmn/expo-material3-theme",
     "@react-navigation/bottom-tabs": "^7.0.0",
     "@react-navigation/native": "^7.0.0",
     "@reduxjs/toolkit": "^2.4.0",
@@ -29,6 +30,7 @@
     "expo-linking": "~7.0.3",
     "expo-location": "^18.0.2",
     "expo-router": "~4.0.9",
+    "expo-secure-store": "~14.0.0",
     "expo-splash-screen": "~0.29.13",
     "expo-status-bar": "~2.0.0",
     "expo-symbols": "~0.2.0",
@@ -42,13 +44,13 @@
     "react-map-gl": "^7.1.7",
     "react-native": "0.76.3",
     "react-native-gesture-handler": "~2.20.2",
+    "react-native-paper": "^5.12.5",
     "react-native-reanimated": "~3.16.1",
-    "react-native-safe-area-context": "4.12.0",
+    "react-native-safe-area-context": "~4.12.0",
     "react-native-screens": "~4.1.0",
     "react-native-web": "~0.19.13",
     "react-native-webview": "13.12.2",
-    "react-redux": "^9.1.2",
+    "react-redux": "^9.1.2"
-    "expo-secure-store": "~14.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

client/tsconfig.json

@@ -14,5 +14,5 @@
     ".expo/types/**/*.ts",
     "expo-env.d.ts",
     "app/(tabs)/index.tsx"
-  ]
+, "babel.config.js"  ]
 }