Feat/take a picture flow

example/ios/NutritionUxExample/Info.plist

@@ -39,6 +39,8 @@
 	<string></string>
 	<key>NSMicrophoneUsageDescription</key>
 	<string>Description of why you require the use of the microphone</string>
+	<key>NSPhotoLibraryUsageDescription</key>
+	<string>The photo library is used for food detection on a photo</string>
 	<key>NSSpeechRecognitionUsageDescription</key>
 	<string>Description of why you require the use of the speech recognition</string>
 	<key>UILaunchStoryboardName</key>

example/ios/Podfile.lock

@@ -894,6 +894,10 @@ PODS:
     - React-debug
   - react-native-blob-util (0.19.6):
     - React-Core
+  - react-native-image-picker (7.1.2):
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
   - react-native-nutrition-ux (3.1.0-alpha-1):
     - React-Core
   - react-native-pdf (6.7.4):
@@ -1104,6 +1108,12 @@ PODS:
   - RNSVG (15.1.0):
     - React-Core
   - SocketRocket (0.6.1)
+  - VisionCamera (4.3.2):
+    - VisionCamera/Core (= 4.3.2)
+    - VisionCamera/React (= 4.3.2)
+  - VisionCamera/Core (4.3.2)
+  - VisionCamera/React (4.3.2):
+    - React-Core
   - Yoga (1.14.0)
 
 DEPENDENCIES:
@@ -1141,6 +1151,7 @@ DEPENDENCIES:
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
   - react-native-blob-util (from `../node_modules/react-native-blob-util`)
+  - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - react-native-nutrition-ux (from `../..`)
   - react-native-pdf (from `../node_modules/react-native-pdf`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
@@ -1176,6 +1187,7 @@ DEPENDENCIES:
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
+  - VisionCamera (from `../node_modules/react-native-vision-camera`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1248,6 +1260,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   react-native-blob-util:
     :path: "../node_modules/react-native-blob-util"
+  react-native-image-picker:
+    :path: "../node_modules/react-native-image-picker"
   react-native-nutrition-ux:
     :path: "../.."
   react-native-pdf:
@@ -1318,6 +1332,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-screens"
   RNSVG:
     :path: "../node_modules/react-native-svg"
+  VisionCamera:
+    :path: "../node_modules/react-native-vision-camera"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -1355,6 +1371,7 @@ SPEC CHECKSUMS:
   React-logger: 66b168e2b2bee57bd8ce9e69f739d805732a5570
   React-Mapbuffer: 9ee041e1d7be96da6d76a251f92e72b711c651d6
   react-native-blob-util: d8fa1a7f726867907a8e43163fdd8b441d4489ea
+  react-native-image-picker: 994a97b28e7f2c2197e21801569bb19f6e494e38
   react-native-nutrition-ux: ee2cfaa810f02017b6df580b19f586aabc5e9bc6
   react-native-pdf: 79aa75e39a80c1d45ffe58aa500f3cf08f267a2e
   react-native-safe-area-context: 0ee144a6170530ccc37a0fd9388e28d06f516a89
@@ -1391,6 +1408,7 @@ SPEC CHECKSUMS:
   RNScreens: 77fc79e66b726ee45b091486b348418ee1d792ab
   RNSVG: 50cf2c7018e57cf5d3522d98d0a3a4dd6bf9d093
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
+  VisionCamera: 2c4cb89c573c5d54d1191e433bd224998d3b14b7
   Yoga: e64aa65de36c0832d04e8c7bd614396c77a80047
 
 PODFILE CHECKSUM: a2947df3ae3fe759cfd0e850554bc385583bc722

example/package.json

@@ -37,6 +37,7 @@
     "react-native-blob-util": "^0.19.6",
     "react-native-dotenv": "^3.4.11",
     "react-native-gesture-handler": "^2.16.0",
+    "react-native-image-picker": "^7.1.2",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-modal-datetime-picker": "^17.1.0",
     "react-native-pdf": "^6.7.4",
@@ -45,6 +46,7 @@
     "react-native-screens": "^3.30.1",
     "react-native-sqlite-storage": "^6.0.1",
     "react-native-svg": "^15.1.0",
+    "react-native-vision-camera": "^4.3.2",
     "victory-native": "^37.0.2"
   },
   "resolutions": {

example/yarn.lock

@@ -5250,6 +5250,11 @@ react-native-gesture-handler@^2.16.0:
     lodash "^4.17.21"
     prop-types "^15.7.2"
 
+react-native-image-picker@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-7.1.2.tgz#383849d1953caf4578874a1f5e5dd11c737bd5cd"
+  integrity sha512-b5y5nP60RIPxlAXlptn2QwlIuZWCUDWa/YPUVjgHc0Ih60mRiOg1PSzf0IjHSLeOZShCpirpvSPGnDExIpTRUg==
+
 react-native-linear-gradient@^2.8.3:
   version "2.8.3"
   resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.8.3.tgz#9a116649f86d74747304ee13db325e20b21e564f"
@@ -5310,6 +5315,11 @@ react-native-svg@^15.1.0:
     css-select "^5.1.0"
     css-tree "^1.1.3"
 
+react-native-vision-camera@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/react-native-vision-camera/-/react-native-vision-camera-4.3.2.tgz#4acf80b62328275a69b22cd142f71a4e4aa2c12e"
+  integrity sha512-zrMWS+I5kIV9UShryRBOjV0PfOvKIH1LlvnQKw8n4D2NOuT6d3dTZ1KtwmktorwrPxRPf3FRktSn2Gv6F1kmWQ==
+
 [email protected]:
   version "0.73.2"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.73.2.tgz#74ee163c8189660d41d1da6560411da7ce41a608"

package.json

@@ -90,6 +90,7 @@
     "react-error-boundary": "^4.0.12",
     "react-native-blob-util": "^0.19.6",
     "react-native-gesture-handler": "^2.16.0",
+    "react-native-image-picker": "^7.1.2",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-modal": "^13.0.1",
     "react-native-modal-datetime-picker": "^17.1.0",
@@ -103,6 +104,7 @@
     "react-native-swipe-gestures": "^1.0.5",
     "react-native-toast-message": "^2.2.0",
     "react-native-uuid": "^2.0.1",
+    "react-native-vision-camera": "^4.3.2",
     "use-async-resource": "^2.2.2",
     "victory-native": "^37.0.2"
   },

react-native.config.js

@@ -16,5 +16,7 @@ module.exports = {
     '@notifee/react-native': {},
     '@react-native-async-storage/async-storage': {},
     'react-native-screens': {},
+    'react-native-vision-camera': {},
+    'react-native-image-picker': {},
   },
 };

src/assets/index.ts

@@ -4,6 +4,7 @@ export const ic_left_white = require('./chev_left_white.png');
 export const ic_right_white = require('./chev_right_white.png');
 export const chev_down = require('./chev_down.png');
 export const ICONS = {
+  close: require('./icons/close.png'),
   back: require('./icons/back.png'),
   menu: require('./icons/menu.png'),
   bottomDiary: require('./icons/bottom_diary.png'),
@@ -74,6 +75,7 @@ export const ICONS = {
   editGreyIc: require('./icons/edit_grey_ic.png'),
   RecordingStop: require('./icons/stop_white.png'),
   Mic: require('./icons/mic_blue.png'),
+  CaptureIcon: require('./icons/capture.png'),
 };
 export const onBoardingAssets = {
   onBoardingStep1: require('./images/onboarding_01.png'),

src/components/button/BasicButton.tsx

@@ -24,6 +24,7 @@ interface Props {
   boarderColor?: string;
   testId?: string;
   rightIcon?: JSX.Element;
+  disabled?: boolean;
 }
 
 export const BasicButton: React.FC<Props> = (props) => {
@@ -39,6 +40,7 @@ export const BasicButton: React.FC<Props> = (props) => {
     boarderColor = brandingContext.primaryColor,
     testId,
     rightIcon,
+    disabled = false,
   } = props;
   const styles = basicButtonStyle(brandingContext);
 
@@ -86,6 +88,7 @@ export const BasicButton: React.FC<Props> = (props) => {
 
   return (
     <TouchableHighlight
+      disabled={disabled}
       testID={testId}
       style={[
         styles.container,

src/components/logOptions/LogOptions.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Image, Pressable, View } from 'react-native';
 import { useBranding } from '../../contexts';
 import logOptionsStyle from './LogOptions.styles';
@@ -10,16 +10,23 @@ interface Props {
   onTextSearch: () => void;
   onFavorite: () => void;
   onVoiceLogging: () => void;
+  onTakePicture: () => void;
+  onTakeCamera: () => void;
 }
 
+type Type = 'All' | 'UseImage';
+
 export const LogOptions = ({
   onFavorite,
   onFoodScanner,
   onTextSearch,
   onVoiceLogging,
+  onTakePicture,
+  onTakeCamera,
 }: Props) => {
   const branding = useBranding();
   const styles = logOptionsStyle(branding);
+  const [type, setType] = useState<Type>('All');
 
   const renderItem = (icon: number, title: string, onPress: () => void) => {
     return (
@@ -34,10 +41,32 @@ export const LogOptions = ({
 
   return (
     <View style={styles.main}>
-      {renderItem(ICONS.logOptionFavorite, 'Favorites', onFavorite)}
-      {renderItem(ICONS.Mic, 'Voice Logging', onVoiceLogging)}
-      {renderItem(ICONS.logOptionSearch, 'Text Search', onTextSearch)}
-      {renderItem(ICONS.logOptionFoodScanner, 'Food Scanner', onFoodScanner)}
+      {type === 'All' ? (
+        <>
+          {renderItem(ICONS.logOptionFavorite, 'Favorites', onFavorite)}
+          {renderItem(ICONS.Mic, 'Voice Logging', onVoiceLogging)}
+          {renderItem(ICONS.logOptionSearch, 'Text Search', onTextSearch)}
+          {renderItem(
+            ICONS.logOptionFoodScanner,
+            'Food Scanner',
+            onFoodScanner
+          )}
+          {renderItem(ICONS.logOptionFoodScanner, 'Use Image', () => {
+            setType('UseImage');
+          })}
+        </>
+      ) : (
+        <>
+          <>
+            {renderItem(ICONS.logOptionSearch, 'Take Photos', onTakeCamera)}
+            {renderItem(
+              ICONS.logOptionFoodScanner,
+              'Select Photos',
+              onTakePicture
+            )}
+          </>
+        </>
+      )}
     </View>
   );
 };

src/components/svgs/scan.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { Dimensions } from 'react-native';
 import { Path, Svg } from 'react-native-svg';
 
-const ScanSVG = () => {
+const ScanSVG = ({ margin = 20 }: { margin?: number }) => {
   return (
     <Svg
-      width={Dimensions.get('window').width - 20}
+      width={Dimensions.get('window').width - margin}
       height="384"
       fill="none"
       viewBox="0 0 384 384"

src/navigaitons/BottomTabNavigations.tsx

@@ -20,6 +20,8 @@ export interface TabBarProps extends BottomTabBarProps {
   onTextSearch: () => void;
   onFavorite: () => void;
   onVoiceLogging: () => void;
+  onTakePicture: () => void;
+  onTakeCamera: () => void;
 }
 
 export const renderTabBarIcons = (

src/navigaitons/HomeBottomNavigations.tsx

@@ -94,6 +94,14 @@ export const HomeBottomNavigation = React.memo(() => {
 
   const mealLogDateRef = useRef(new Date());
 
+  const onTakePicture = () => {
+    navigation.navigate('TakePictureScreen', {
+      logToDate: mealLogDateRef.current,
+      logToMeal: undefined,
+      type: 'picture',
+    });
+  };
+
   const renderTabs = (props: BottomTabBarProps) => {
     return (
       <SafeAreaView edges={['bottom']} style={styles.safeAreaStyle}>
@@ -123,6 +131,14 @@ export const HomeBottomNavigation = React.memo(() => {
               logToMeal: undefined,
             });
           }}
+          onTakeCamera={() => {
+            navigation.navigate('TakePictureScreen', {
+              logToDate: mealLogDateRef.current,
+              logToMeal: undefined,
+              type: 'camera',
+            });
+          }}
+          onTakePicture={onTakePicture}
           {...props}
           items={menu}
         />

src/navigaitons/Nutrition-Navigator.tsx

@@ -16,6 +16,7 @@ import {
   RecipeEditorScreen,
   IngredientQuickScanScreen,
   VoiceLoggingScreen,
+  TakePictureScreen,
 } from '../screens';
 import {
   DashboardScreenRoute,
@@ -38,6 +39,7 @@ import {
   WeightEntryRoute,
   SettingScreenRoute,
   NutritionInformationScreenRoute,
+  TakePictureScreenRoute,
 } from './Route';
 import MyPlanScreen from '../screens/myPlans/MyPlanScreen';
 import { HomeBottomNavigation } from './HomeBottomNavigations';
@@ -180,6 +182,11 @@ export const NutritionNavigator = () => {
             name={ROUTES.VoiceLoggingScreen}
             component={VoiceLoggingScreen}
           />
+          <Stack.Screen
+            options={{ headerShown: false }}
+            name={TakePictureScreenRoute}
+            component={TakePictureScreen}
+          />
         </Stack.Navigator>
       </NavigationContainer>
       <Toast

src/navigaitons/Route.tsx

@@ -24,6 +24,7 @@ export const WeightScreenRoute = 'WeightScreen';
 export const WeightEntryRoute = 'WeightEntry';
 export const SettingScreenRoute = 'SettingScreen';
 export const NutritionInformationScreenRoute = 'NutritionInformationScreen';
+export const TakePictureScreenRoute = 'TakePictureScreen';
 
 export const ROUTES = {
   NutritionProfileScreen: 'NutritionProfileScreen',
@@ -39,4 +40,5 @@ export const ROUTES = {
   ExploreActionPlans: 'ExploreActionPlans',
   ProgressScreenRoute: 'ProgressScreen',
   VoiceLoggingScreen: 'VoiceLoggingScreen',
+  TakePictureScreen: 'TakePictureScreen',
 };

src/navigaitons/TabBar.tsx

@@ -63,6 +63,14 @@ export const TabBar = React.memo((props: TabBarProps) => {
                     floatingRef.current?.onClose();
                     props.onVoiceLogging();
                   }}
+                  onTakePicture={async () => {
+                    floatingRef.current?.onClose();
+                    props.onTakePicture();
+                  }}
+                  onTakeCamera={() => {
+                    floatingRef.current?.onClose();
+                    props.onTakeCamera();
+                  }}
                 />
               }
             />

src/navigaitons/params/NutritionNavigatorParam.ts

@@ -12,7 +12,10 @@ import type {
 import type { IngredientQuickScanScreenProps } from '../../screens/recipeEditor/RecipesScan/IngredientQuickScanScreen/IngredientQuickScanScreen';
 import type { Nutrient, Water, Weight } from '../../models';
 import type { FavoritesScreenProps } from '../../screens/myFavoritess';
-import type { VoiceLoggingScreenProps } from '../../screens/voiceLogging';
+import type {
+  TakePictureScreenProps,
+  VoiceLoggingScreenProps,
+} from '../../screens/voiceLogging';
 
 export type Module =
   | 'QuickScan'
@@ -73,4 +76,5 @@ export type ParamList = {
   SettingScreen: SettingScreenProps;
   NutritionInformationScreen: NutritionScreenProps;
   VoiceLoggingScreen: VoiceLoggingScreenProps;
+  TakePictureScreen: TakePictureScreenProps;
 };

src/screens/index.tsx

@@ -18,3 +18,4 @@ export * from './water';
 export * from './weight';
 export * from './nutritionInformation';
 export * from './voiceLogging';
+export * from './takePicture';