[WIP] Feature/spike/global page

package.json

@@ -6,6 +6,7 @@
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "start": "react-native start",
     "test": "jest"
   },
@@ -20,6 +21,7 @@
     "react-native-logs": "^5.1.0",
     "react-native-safe-area-context": "^4.9.0",
     "react-native-screens": "^3.29.0",
+    "react-native-vector-icons": "^10.0.3",
     "react-native-vision-camera": "^3.9.0",
     "react-redux": "^9.1.0"
   },
@@ -32,6 +34,7 @@
     "@react-native/metro-config": "0.74.1",
     "@react-native/typescript-config": "0.74.1",
     "@types/react": "^18.2.60",
+    "@types/react-native-vector-icons": "^6.4.18",
     "@types/react-test-renderer": "^18.0.7",
     "babel-jest": "^29.7.0",
     "eslint": "^8.57.0",

src/App.tsx

@@ -1,14 +1,23 @@
 import React, {useEffect} from 'react';
+import {NavigationContainer} from '@react-navigation/native';
 import {SafeAreaView, StyleSheet, Text} from 'react-native';
-import {Provider} from 'react-redux';
-
-// import {NavigationContainer} from '@react-navigation/native';
-// import TabNavigator from './components/navigators/TabNavigator.tsx';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {useCameraPermission} from 'react-native-vision-camera';
+import {Provider} from 'react-redux';
 import store from './service/redux/store.ts';
 
+const Tab = createBottomTabNavigator();
+
+const LastScanScreen = () => null;
+const PlateScreen = () => null;
+const QRScanScreen = () => null;
+const SearchScreen = () => null;
+const AccountScreen = () => null;
+
 const App = () => {
   const {hasPermission, requestPermission} = useCameraPermission();
+  const renderIcon = (name) => ({color, size}) => <Icon name={name} color={color} size={size} />;
 
   useEffect(() => {
     if (!hasPermission) {
@@ -17,22 +26,46 @@
   }, [hasPermission, requestPermission]);
 
   return (
-    <SafeAreaView style={styles.screen}>
-      <Provider store={store}>
-        <Text>App</Text>
-        {/*<NavigationContainer>*/}
-        {/*  <TabNavigator />*/}
-        {/*</NavigationContainer>*/}
-      </Provider>
-    </SafeAreaView>
+    <NavigationContainer>
+      <Tab.Navigator>
+        <Tab.Screen
+          name="Veggies"
+          component={LastScanScreen}
+          options={{
+            tabBarIcon: this.renderIcon("carrot"),
+          }}
+        />
+        <Tab.Screen
+          name="Plate"
+          component={PlateScreen}
+          options={{
+            tabBarIcon: this.renderIcon("food"),
+          }}
+        />
+        <Tab.Screen
+          name="QRScan"
+          component={QRScanScreen}
+          options={{
+            tabBarIcon: this.renderIcon("qrcode-scan"),
+          }}
+        />
+        <Tab.Screen
+          name="Search"
+          component={SearchScreen}
+          options={{
+            tabBarIcon: this.renderIcon("magnify"),
+          }}
+        />
+        <Tab.Screen
+          name="Account"
+          component={AccountScreen}
+          options={{
+            tabBarIcon: this.renderIcon("account-circle"),
+          }}
+        />
+      </Tab.Navigator>
+    </NavigationContainer>
   );
 };
 
-const styles = StyleSheet.create({
-  screen: {
-    flex: 1,
-    backgroundColor: 'white',
-  },
-});
-
 export default App;

src/MockApiComponent.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {SafeAreaView, StyleSheet, ScrollView} from 'react-native';
+import NutritionInfo from './NutritionInfo';
+
+const fakeApiData = {
+  product_name: 'Ourson Chocolat',
+  ingredients_text: 'Cacao, sucre, lait',
+  nutriments: {
+    carbohydrates: 54,
+    proteins: 7,
+    fat: 30,
+    sugars: 100,
+    salt: 0.2,
+  },
+  ecoscore_score: '75',
+  nutriscore_grade: 'B',
+};
+
+const App = () => {
+  return (
+    <SafeAreaView style={styles.screen}>
+      <ScrollView contentContainerStyle={styles.content}>
+        <NutritionInfo data={fakeApiData} />
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  content: {
+    padding: 20,
+  },
+});
+
+export default App;

src/NutritionInfo.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+
+const NutritionInfo = ({data}) => {
+  const {
+    product_name,
+    ingredients_text,
+    nutriments,
+    ecoscore_score,
+    nutriscore_grade,
+  } = data;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{product_name}</Text>
+      <Text style={styles.subtitle}>Ingrédients: {ingredients_text}</Text>
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Informations Nutritionnelles:</Text>
+        <Text>Carbohydrates: {nutriments.carbohydrates}g</Text>
+        <Text>Protéines: {nutriments.proteins}g</Text>
+        <Text>Graisses: {nutriments.fat}g</Text>
+        <Text>Sucres: {nutriments.sugars}g</Text>
+        <Text>Sel: {nutriments.salt}g</Text>
+      </View>
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Scores:</Text>
+        <Text>Eco-Score: {ecoscore_score}</Text>
+        <Text>Nutri-Score: {nutriscore_grade}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  subtitle: {
+    fontSize: 14,
+    marginVertical: 10,
+  },
+  section: {
+    marginVertical: 10,
+  },
+  sectionTitle: {
+    fontWeight: 'bold',
+  },
+});
+
+export default NutritionInfo;