feat: custom food (#16)

example/ios/Podfile.lock

@@ -1083,7 +1083,7 @@ PODS:
     - React-Core
   - RNCAsyncStorage (1.21.0):
     - React-Core
-  - RNCPicker (2.6.1):
+  - RNCPicker (2.7.7):
     - React-Core
   - RNDateTimePicker (7.6.3):
     - React-Core
@@ -1405,7 +1405,7 @@ SPEC CHECKSUMS:
   ReactCommon: 45b5d4f784e869c44a6f5a8fad5b114ca8f78c53
   ReactNativePassioSDK: 058706b380c8a0de2c73fb11fa2589f4bae60463
   RNCAsyncStorage: 618d03a5f52fbccb3d7010076bc54712844c18ef
-  RNCPicker: b18aaf30df596e9b1738e7c1f9ee55402a229dca
+  RNCPicker: b7873ba797dc586bfaf3307d737cbdc620a9ff3e
   RNDateTimePicker: 7b38b71bcd7c4cfa1cb95f2dff9a4f1faed2dced
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNGestureHandler: 727b656d5a3fa247aac2c8cc70b8757356066451

example/package.json

@@ -22,7 +22,7 @@
     "@react-native-async-storage/async-storage": "^1.21.0",
     "@react-native-community/datetimepicker": "^7.6.3",
     "@react-native-community/slider": "^4.5.0",
-    "@react-native-picker/picker": "^2.6.1",
+    "@react-native-picker/picker": "^2.7.7",
     "@react-native-voice/voice": "^3.2.4",
     "@react-navigation/bottom-tabs": "^6.5.20",
     "@react-navigation/native": "^6.1.17",

example/src/App.tsx

@@ -11,10 +11,10 @@ import { SplashScreen } from './SplashScreen';
 import { ENV_PASSIO_KEY } from '@env';
 
 export default function App() {
-  const { isReady } = usePassioConfig({ key: ENV_PASSIO_KEY });
+  const { isReady, error } = usePassioConfig({ key: ENV_PASSIO_KEY });
 
   if (!isReady) {
-    return <SplashScreen />;
+    return <SplashScreen error={error} />;
   }
 
   return (

example/src/SplashScreen.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Image, ImageBackground, StyleSheet, Text, View } from 'react-native';
 
-export const SplashScreen = () => {
+export const SplashScreen = ({ error }: { error: string | undefined }) => {
   return (
     <ImageBackground
       resizeMethod="resize"
@@ -17,7 +17,7 @@ export const SplashScreen = () => {
       />
       <View style={styles.actions}>
         <Text style={styles.config}>
-          {'Please wait...\nSDK Configuring...'}
+          {error ? error : 'Please wait...\nSDK Configuring...'}
         </Text>
       </View>
     </ImageBackground>

example/yarn.lock

@@ -1626,10 +1626,10 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-4.5.0.tgz#5c55488ee30060cd87100fb746b9d8655dbab04e"
   integrity sha512-pyUvNTvu5IfCI5abzqRfO/dd3A009RC66RXZE6t0gyOwI/j0QDlq9VZRv3rjkpuIvNTnsYj+m5BHlh0DkSYUyA==
 
-"@react-native-picker/picker@^2.6.1":
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-2.6.1.tgz#3b20ddd1385fab0487db103dc6519570f8892e6d"
-  integrity sha512-oJftvmLOj6Y6/bF4kPcK6L83yNBALGmqNYugf94BzP0FQGpHBwimVN2ygqkQ2Sn2ZU3pGUZMs0jV6+Gku2GyYg==
+"@react-native-picker/picker@^2.7.7":
+  version "2.7.7"
+  resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-2.7.7.tgz#6e19c3a72a482be015f5194794e6c14efe8762e8"
+  integrity sha512-CTHthVmx8ujlH/u5AnxLQfsheh/DoEbo+Kbx0HGTlbKVLC1eZ4Kr9jXIIUcwB7JEgOXifdZIPQCsoTc/7GQ0ag==
 
 "@react-native-voice/voice@^3.2.4":
   version "3.2.4"

package.json

@@ -75,7 +75,7 @@
     "@react-native-async-storage/async-storage": "^1.21.0",
     "@react-native-community/datetimepicker": "^7.6.3",
     "@react-native-community/slider": "^4.5.0",
-    "@react-native-picker/picker": "^2.6.1",
+    "@react-native-picker/picker": "^2.7.7",
     "@react-native-voice/voice": "^3.2.4",
     "@react-navigation/bottom-tabs": "^6.5.20",
     "@react-navigation/native": "^6.1.17",

src/assets/index.ts

@@ -16,6 +16,9 @@ export const ICONS = {
   calendar: require('./icons/new_calander.png'),
   left: require('./icons/new_diary_left_arrow.png'),
   apple: require('./icons/new_apple_blue.png'),
+  modeBarcode: require('./icons/mode_barcode.png'),
+  modeNutritionFact: require('./icons/mode_nutritionfact.png'),
+  modeVisual: require('./icons/mode_visual.png'),
   chart: require('./icons/new_macro_chart.png'),
   weeklyAdherence: require('./icons/weekly_adherence.png'),
   right: require('./icons/new_diary_right_arrow.png'),
@@ -45,6 +48,7 @@ export const ICONS = {
   foodScannerInfo: require('./icons/food_scanner_info.png'),
   addedToDiary: require('./icons/added_to_diary.png'),
   barcode: require('./icons/barocde.png'),
+  barcodeNotFound: require('./icons/scan_barcode_not_fouind.png'),
 
   foodScannerBarcode: require('./icons/food_scanner_barcode.png'),
   foodScannerBeverage: require('./icons/food_scanner_beverage.png'),

src/components/alternatives/alternativesItem.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet, View } from 'react-native';
+import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { PassioIDEntityType } from '@passiolife/nutritionai-react-native-sdk-v3/src/sdk/v2';
 import React from 'react';
 
@@ -7,10 +7,14 @@ import { useBranding, type Branding } from '../../contexts';
 import { scaleHeight } from '../../utils';
 import { Text } from '../texts';
 import type { QuickResult } from '../../models';
+import { ICONS } from '../../assets';
 
-const AlternateFoodLogView: React.FC<QuickResult> = (
-  alternate: QuickResult
-) => {
+interface Props {
+  alternate: QuickResult;
+  onLogPress: (result: QuickResult) => void;
+}
+
+const AlternateFoodLogView = ({ alternate, onLogPress }: Props) => {
   const styles = alternateFoodLogViewStyle(useBranding());
   return (
     <View style={styles.container}>
@@ -25,14 +29,32 @@ const AlternateFoodLogView: React.FC<QuickResult> = (
       <View style={styles.textConainer}>
         <Text
           weight="600"
-          size="_12px"
+          size="_14px"
           numberOfLines={2}
           ellipsizeMode="tail"
           style={styles.text}
         >
           {alternate.name}
         </Text>
       </View>
+      <TouchableOpacity
+        style={{
+          alignSelf: 'center',
+        }}
+        onPress={() => {
+          onLogPress(alternate);
+        }}
+      >
+        <Image
+          source={ICONS.newAddPlus}
+          style={{
+            height: 28,
+            width: 28,
+            alignSelf: 'center',
+            marginHorizontal: 16,
+          }}
+        />
+      </TouchableOpacity>
     </View>
   );
 };
@@ -66,6 +88,7 @@ const alternateFoodLogViewStyle = ({ indigo50 }: Branding) =>
     textConainer: {
       alignSelf: 'center',
       textTransform: 'capitalize',
+      flex: 1,
       marginHorizontal: 16,
     },
   });

src/components/backNavigations/styles.ts

@@ -46,8 +46,8 @@ const headerStyle = ({}: Branding, insets: EdgeInsets) => {
       height: scaleHeight(28),
     },
     rightIcon: {
-      width: scaleWidth(20),
-      height: scaleHeight(20),
+      width: scaleWidth(24),
+      height: scaleHeight(24),
     },
   });
 };

src/components/cards/Card.tsx

@@ -17,7 +17,7 @@ const cardStyle = ({ card }: Branding) => {
   return StyleSheet.create({
     container: {
       backgroundColor: card,
-      borderRadius: 12,
+      borderRadius: 8,
       shadowColor: '#00000029',
       shadowOpacity: 1,
       shadowOffset: {

src/components/doughnutChart/DoughnutChart.tsx

@@ -57,23 +57,25 @@ const DoughnutChart: React.FC<DoughnutChartProps> = ({
 
   return (
     <View style={{ width: size, height: size }}>
-      <Svg width={size + 10} height={size + 10}>
-        {data.map((item, index) => {
-          const path = calculatePath(item.progress, index);
-          startAngle += 360 * (item.progress / totalProgress);
-          return (
-            <G key={index}>
-              <Path
-                d={path}
-                fill="transparent"
-                stroke={item.color}
-                strokeWidth={strokeWidth}
-                strokeLinecap={strokeLinecap}
-              />
-            </G>
-          );
-        })}
-      </Svg>
+      {totalProgress > 0 && (
+        <Svg width={size + 10} height={size + 10}>
+          {data.map((item, index) => {
+            const path = calculatePath(item.progress, index);
+            startAngle += 360 * (item.progress / totalProgress);
+            return (
+              <G key={index}>
+                <Path
+                  d={path}
+                  fill="transparent"
+                  stroke={item.color}
+                  strokeWidth={strokeWidth}
+                  strokeLinecap={strokeLinecap}
+                />
+              </G>
+            );
+          })}
+        </Svg>
+      )}
     </View>
   );
 };

src/components/imagePickerOptions/ImagePickerOptions.tsx

@@ -9,7 +9,6 @@ import {
 } from 'react-native';
 import { ICONS } from '../../assets';
 import { COLORS } from '../../constants';
-import { screenHeight } from '../../utils';
 
 interface Props {
   onCloseModel: () => void;
@@ -70,8 +69,12 @@ const styles = StyleSheet.create({
   },
   modalContent: {
     padding: 20,
-    margin: 24,
-    top: screenHeight / 3.5,
+    margin: 2,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingBottom: 42,
+    position: 'absolute',
     backgroundColor: 'white',
     borderRadius: 10,
     alignItems: 'center',

src/components/passio/PassioFoodIcon.tsx

@@ -3,43 +3,84 @@ import {
   type PassioID,
   PassioIconView,
 } from '@passiolife/nutritionai-react-native-sdk-v3/src/sdk/v2';
-import { Image, type ImageStyle, type StyleProp } from 'react-native';
 
-import React from 'react';
+import {
+  Image,
+  ImageSourcePropType,
+  type ImageStyle,
+  type StyleProp,
+} from 'react-native';
+
+import React, { useEffect, useState } from 'react';
 import type { PassioIconType } from '../../models';
+import { CUSTOM_USER_FOOD } from '../../screens/foodCreator/FoodCreator.utils';
+import { useServices } from '../../contexts';
+import { ICONS } from '../../assets';
 
 interface Props {
   style?: StyleProp<ImageStyle>;
   passioID?: PassioID;
   imageName?: string;
   userFoodImage?: string;
   iconID?: string;
+  extra?: string;
   size?: IconSize;
   entityType?: PassioIconType;
+  defaultImage?: ImageSourcePropType | undefined;
 }
 
 /*
   PassioFoodIcon: RENDER FOOD IMAGE From Server
   */
+
 export const PassioFoodIcon = (props: Props) => {
-  const { passioID, imageName, size, userFoodImage, iconID } = props;
+  const { passioID, imageName, size, iconID, extra, defaultImage } = props;
+  const [base64, setBase64] = useState('');
+  const { dataService } = useServices();
+
+  useEffect(() => {
+    async function init() {
+      if (iconID && iconID.includes(CUSTOM_USER_FOOD)) {
+        const image = await dataService.getImage(iconID);
+        if (image) {
+          setBase64(image.base64);
+        }
+      }
+    }
+    init();
+  }, [dataService, iconID, extra]);
+
+  let icon = iconID || passioID || imageName;
+
   return (
     <>
-      {userFoodImage ? (
+      {base64 ? (
         <Image
           testID="testPassioFoodIconImage"
           style={[props.style]}
-          source={{ uri: `data:image/png;base64,${userFoodImage}` }}
+          source={{ uri: `data:image/png;base64,${base64}` }}
         />
-      ) : (
+      ) : icon ? (
         <PassioIconView
           testID="testPassioFoodIconImage"
           style={[props.style]}
           config={{
-            passioID: iconID ?? imageName ?? passioID ?? '',
+            passioID: icon ?? '',
             iconSize: size ?? IconSize.PX90,
           }}
         />
+      ) : (
+        <Image
+          testID="testPassioFoodIconImage"
+          style={[
+            {
+              height: 24,
+              width: 24,
+            },
+            props.style,
+          ]}
+          source={defaultImage ?? ICONS.FoodEditImage}
+        />
       )}
     </>
   );

src/components/toast/toastConfig.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { scaledSize, scaleHeight, scaleWidth, screenWidth } from '../../utils';
+import {
+  scaledSize,
+  scaleHeight,
+  scaleWidth,
+  screenHeight,
+  screenWidth,
+} from '../../utils';
 
 import { Text } from '../texts';
 
@@ -47,7 +53,7 @@ export const styles = StyleSheet.create({
     borderColor: 'rgba(0, 0, 0, 0.6)',
     borderRadius: scaledSize(7),
     borderWidth: 0.2,
-    marginBottom: 120,
+    marginBottom: screenHeight / 3,
     flexDirection: 'row',
     height: scaledSize(50),
     overflow: 'hidden',

src/contexts/services/NutritionDataService.ts

@@ -1,5 +1,11 @@
 import type { Water } from 'src/models/Water';
-import type { CustomFood, NutritionProfile, Recipe } from '../../models';
+import type {
+  CustomFood,
+  CustomImageID,
+  Image,
+  NutritionProfile,
+  Recipe,
+} from '../../models';
 import type { FoodLog, FavoriteFoodItem } from '../../models';
 import type { PatientProfile } from '../../models';
 import type { Weight } from '../../models/Weight';
@@ -27,4 +33,6 @@ export interface NutritionDataService {
   saveWater: (water: Water) => Promise<void>;
   getWeight: (startDate: Date, endDate: Date) => Promise<Weight[]>;
   saveWeight: (weight: Weight) => Promise<void>;
+  saveImage: (image: Image) => Promise<CustomImageID>;
+  getImage: (id: CustomImageID) => Promise<Image | undefined | null>;
 }