Installation de React Native Paper

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