ynerant/traintrape-moi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Installation de React Native Paper

Browse Source
This commit is contained in:
Emmy D'Anello 2024-12-09 21:00:15 +01:00
parent c08fbb762a
commit a9cb1ec425
Signed by: ynerant
GPG Key ID: 3A75C55819C8CF85
16 changed files with 291 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/app/(tabs)/_layout.tsx
View File

@ -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={{

13
client/app/(tabs)/challenges.tsx
View File

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

12
client/app/(tabs)/history.tsx
View File

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

9
client/app/(tabs)/index.tsx
View File

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

13
client/app/(tabs)/settings.tsx
View File

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

12
client/app/(tabs)/train.tsx
View File

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

23
client/app/_layout.tsx
View File

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

11
client/babel.config.js Normal file
View File

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

59
client/components/ThemedText.tsx
View File

@ -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',
},
})

13
client/components/ThemedView.tsx
View File

@ -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} />
}

49
client/components/ui/TabBar.tsx Normal file
View File

@ -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

26
client/constants/Colors.ts
View File

@ -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,
},
}

21
client/hooks/useThemeColor.ts
View File

@ -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]
}
}

190
client/package-lock.json generated
View File

@ -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",

8
client/package.json
View File

@ -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",
"expo-secure-store": "~14.0.0"
"react-redux": "^9.1.2"
},
"devDependencies": {
"@babel/core": "^7.25.2",

2
client/tsconfig.json
View File

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