[WIP] Feature/spike/global page

package.json

@@ -16,7 +16,8 @@
     "react-native": "^0.73.5",
     "react-native-logs": "^5.1.0",
     "react-native-safe-area-context": "^4.9.0",
-    "react-native-screens": "^3.29.0"
+    "react-native-screens": "^3.29.0",
+    "react-native-vector-icons": "^10.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
@@ -27,6 +28,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,21 +1,68 @@
 import React from 'react';
-import {SafeAreaView, StyleSheet, Text} from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 
-// import {NavigationContainer} from '@react-navigation/native';
+const Tab = createBottomTabNavigator();
+
+const LastScanScreen = () => null;
+const PlateScreen = () => null;
+const QRScanScreen = () => null;
+const SearchScreen = () => null;
+const AccountScreen = () => null;
 
 const App = () => {
   return (
-    <SafeAreaView style={styles.screen}>
-      <Text>App</Text>
-    </SafeAreaView>
+    <NavigationContainer>
+      <Tab.Navigator>
+        <Tab.Screen
+          name="Veggies"
+          component={LastScanScreen}
+          options={{
+            tabBarIcon: ({ color, size }) => (
+              <Icon name="carrot" color={color} size={size} />
+            ),
+          }}
+        />
+        <Tab.Screen
+          name="Plate"
+          component={PlateScreen}
+          options={{
+            tabBarIcon: ({ color, size }) => (
+              <Icon name="food" color={color} size={size} />
+            ),
+          }}
+        />
+        <Tab.Screen
+          name="QRScan"
+          component={QRScanScreen}
+          options={{
+            tabBarIcon: ({ color, size }) => (
+              <Icon name="qrcode-scan" color={color} size={size} />
+            ),
+          }}
+        />
+        <Tab.Screen
+          name="Search"
+          component={SearchScreen}
+          options={{
+            tabBarIcon: ({ color, size }) => (
+              <Icon name="magnify" color={color} size={size} />
+            ),
+          }}
+        />
+        <Tab.Screen
+          name="Account"
+          component={AccountScreen}
+          options={{
+            tabBarIcon: ({ color, size }) => (
+              <Icon name="account-circle" color={color} size={size} />
+            ),
+          }}
+        />
+      </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,48 @@
+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;