Skip to main content

Nutrition module (React Native)

The nutrition experience (diary, plans, recipes, scanner, cart, search, etc.) ships inside react-native-azeoo-lib. There is no separate AzeooUI.instance.nutrition object: use getAzeooSDK() or useAzeoo().sdk after initialize and connect.

Ways to open the nutrition UI​

1. Embedded view​

Render NutritionView under AzeooProvider once the user is connected. See UI Components.

2. Full-screen or modal from the host app​

On the shared SDK instance:

  • showNutrition(bottomSafeArea) / hideNutrition() — present the nutrition module as the SDK does for full-screen flows.
  • displayNutritionModal(bottomSafeArea) / dismissNutritionModal() — present it in a modal sheet.

bottomSafeArea is a boolean (often true; use false if your app already handles bottom inset).

3. Navigate to a specific screen inside the module​

Call navigateTo('nutrition', screen), where screen is the segment after /nutrition in the in-app path (no leading slash). The handler switches to the nutrition tab, then pushes /nutrition/<screen> (if screen is empty, that becomes /nutrition/; for the diary root, prefer showNutrition below).

Path reference (second argument to navigateTo, or use showNutrition for tab root):

GoalCall
Diary / nutrition tab rootshowNutrition(bottomSafeArea) (or displayNutritionModal) — switches to the nutrition tab on the diary home
Nutrition plans listnavigateTo('nutrition', 'plans')
Single plan by idnavigateTo('nutrition', 'plans/plan-123')
RecipesnavigateTo('nutrition', 'recipes')
Recipe filtersnavigateTo('nutrition', 'recipes/filters')
Recipe detailnavigateTo('nutrition', 'recipes/12345')
Barcode scannernavigateTo('nutrition', 'scanner/barcode')
Mobile scannernavigateTo('nutrition', 'scanner/mobile')
CartnavigateTo('nutrition', 'cart')
SearchnavigateTo('nutrition', 'search')
Shopping listnavigateTo('nutrition', 'shopping-list')
Add flow entrynavigateTo('nutrition', 'add')
Permission test (dev / QA)navigateTo('nutrition', 'permission-test')
Nutrition settingsnavigateTo('nutrition', 'settings')

Other nested paths follow the same pattern (e.g. food detail foods/<id>, meal detail meals/<id>, add-food steps under foods/add/..., add-meal under meals/add/...).

Query parameters (e.g. diary date, recipe name) are supported on the native navigation API with a params map; the current React Native surface exposes navigateTo(module, screen) only. For URLs with query strings, handleDeepLink(uri) is usually the right tool once your deep-link base URL is configured.

Native Flutter parity for granular screens (e.g. showRecipe with recipeName) lives in the Pigeon nutrition API; if you need that from JS beyond path + deep link, see product roadmap or extend the RN bridge.

Go back in the Flutter stack: goBack() on the same SDK instance.

Code sketch​

import { getAzeooSDK } from 'react-native-azeoo-lib';

const sdk = getAzeooSDK();

// After initialize + connect:
await sdk.showNutrition(true);
// or
await sdk.navigateTo('nutrition', 'scanner/barcode');
await sdk.goBack();

Same calls are available as const { sdk } = useAzeoo() when you are under AzeooProvider.

URLs handled by the SDK (scheme/host from your init config) can open nutrition routes; use handleDeepLink(uri) if you receive links in React Native. See Configuration and the Flutter route list under nutrition in the main SDK router for path shapes.

Next Steps​