Skip to main content

UI Components

After the SDK is initialized (AzeooProvider or getAzeooSDK().initialize(...)) and the user is connected (connect(...)), you can either embed module UI in your layout or open it as overlays from code.

Native views​

NutritionView renders the nutrition experience inline. Wrap your app (or the subtree that uses it) with AzeooProvider, complete connect, then mount the view.

Common props:

  • bottomSafeArea — pad the bottom for home indicators / tab bars (default true; often set to false when a tab bar already insets content).
  • style — usual React Native view style (e.g. { flex: 1 }).
  • onLoad / onError — when the native surface is ready or fails.

Until the user is connected, these components show a short Not connected state instead of the Flutter module.

See Quick Start and Examples.

Opening modules from code​

Use getAzeooSDK() from react-native-azeoo-lib or useAzeoo().sdk after connect. Typical calls:

  • Full-screen style presentation: showNutrition(bottomSafeArea), hideNutrition()
  • Modal sheet: displayNutritionModal(bottomSafeArea), dismissNutritionModal()
  • In-module navigation: navigateTo(module, screen), goBack(), handleDeepLink(uri)

bottomSafeArea is a boolean, same meaning as on the view components.

Full list and patterns: Client API. Module-focused notes: Nutrition Module.

Next steps​