1- import React from 'react' ;
1+ import React , { useCallback } from 'react' ;
22import { NavigationContainer } from '@react-navigation/native' ;
33import { createStackNavigator } from '@react-navigation/stack' ;
44import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' ;
@@ -25,6 +25,18 @@ import color from './app/theme/color';
2525const Stack = createStackNavigator ( ) ;
2626const Tab = createBottomTabNavigator ( ) ;
2727
28+ const HomeIcon = ( { color : iconColor , size } : { color : string ; size : number } ) =>
29+ < Home color = { iconColor } size = { size } /> ;
30+
31+ const DumbbellIcon = ( { color : iconColor , size } : { color : string ; size : number } ) =>
32+ < Dumbbell color = { iconColor } size = { size } /> ;
33+
34+ const BarChartIcon = ( { color : iconColor , size } : { color : string ; size : number } ) =>
35+ < BarChart3 color = { iconColor } size = { size } /> ;
36+
37+ const UserIcon = ( { color : iconColor , size } : { color : string ; size : number } ) =>
38+ < User color = { iconColor } size = { size } /> ;
39+
2840function TabNavigator ( ) {
2941 return (
3042 < Tab . Navigator
@@ -44,39 +56,31 @@ function TabNavigator() {
4456 component = { HomeScreen }
4557 options = { {
4658 tabBarLabel : 'Accueil' ,
47- tabBarIcon : ( { color, size } ) => (
48- < Home color = { color } size = { size } />
49- ) ,
59+ tabBarIcon : HomeIcon ,
5060 } }
5161 />
5262 < Tab . Screen
5363 name = "Exercises"
5464 component = { ExercisesScreen }
5565 options = { {
5666 tabBarLabel : 'Exercices' ,
57- tabBarIcon : ( { color, size } ) => (
58- < Dumbbell color = { color } size = { size } />
59- ) ,
67+ tabBarIcon : DumbbellIcon ,
6068 } }
6169 />
6270 < Tab . Screen
6371 name = "Analysis"
6472 component = { AnalysisScreen }
6573 options = { {
6674 tabBarLabel : 'Analyse' ,
67- tabBarIcon : ( { color, size } ) => (
68- < BarChart3 color = { color } size = { size } />
69- ) ,
75+ tabBarIcon : BarChartIcon ,
7076 } }
7177 />
7278 < Tab . Screen
7379 name = "Profile"
7480 component = { ProfileScreen }
7581 options = { {
7682 tabBarLabel : 'Profil' ,
77- tabBarIcon : ( { color, size } ) => (
78- < User color = { color } size = { size } />
79- ) ,
83+ tabBarIcon : UserIcon ,
8084 } }
8185 />
8286 </ Tab . Navigator >
@@ -98,10 +102,66 @@ export default function App() {
98102 < Stack . Screen name = "Login" component = { LoginScreen } />
99103 < Stack . Screen name = "Register" component = { RegisterScreen } />
100104 < Stack . Screen name = "Main" component = { TabNavigator } />
101- < Stack . Screen name = "ExerciseDetail" component = { ExerciseDetailScreen } />
102- < Stack . Screen name = "ExerciseSession" component = { ExerciseSessionScreen } />
103- < Stack . Screen name = "ExerciseResults" component = { ExerciseResultsScreen } />
104- < Stack . Screen name = "Analyze" component = { AnalyzeScreen } />
105+ < Stack . Screen
106+ name = "ExerciseDetail"
107+ component = { ExerciseDetailScreen }
108+ options = { {
109+ headerShown : true ,
110+ title : "Détail de l'exercice" ,
111+ headerStyle : {
112+ backgroundColor : color . colors . background ,
113+ } ,
114+ headerTintColor : color . colors . textPrimary ,
115+ headerTitleStyle : {
116+ fontWeight : 'bold' ,
117+ } ,
118+ } }
119+ />
120+ < Stack . Screen
121+ name = "ExerciseSession"
122+ component = { ExerciseSessionScreen }
123+ options = { {
124+ headerShown : true ,
125+ title : "Session d'exercice" ,
126+ headerStyle : {
127+ backgroundColor : color . colors . background ,
128+ } ,
129+ headerTintColor : color . colors . textPrimary ,
130+ headerTitleStyle : {
131+ fontWeight : 'bold' ,
132+ } ,
133+ } }
134+ />
135+ < Stack . Screen
136+ name = "ExerciseResults"
137+ component = { ExerciseResultsScreen }
138+ options = { {
139+ headerShown : true ,
140+ title : 'Résultats' ,
141+ headerStyle : {
142+ backgroundColor : color . colors . background ,
143+ } ,
144+ headerTintColor : color . colors . textPrimary ,
145+ headerTitleStyle : {
146+ fontWeight : 'bold' ,
147+ } ,
148+ } }
149+ />
150+ < Stack . Screen
151+ name = "Analyze"
152+ component = { AnalyzeScreen }
153+ options = { {
154+ headerShown : true ,
155+ title : 'Analyse' ,
156+ headerStyle : {
157+ backgroundColor : color . colors . background ,
158+ } ,
159+ headerTintColor : color . colors . textPrimary ,
160+ headerTitleStyle : {
161+ fontWeight : 'bold' ,
162+ } ,
163+ } }
164+ />
105165 < Stack . Screen name = "NotFound" component = { NotFoundScreen } />
106166 </ Stack . Navigator >
107167 </ AuthProvider >
0 commit comments