Skip to main content

React Native Integration

After installing the SDK and adding the Android Gradle line, wire it into your app in three steps: provider, user session, then UI.

1. Wrap the app with AzeooProvider​

Place AzeooProvider at the root (or above any tree that uses SDK hooks or views). It loads the native SDK with your API key and optional settings.

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

<AzeooProvider
  apiKey={API_KEY}
  config={{
    locale: 'en',
    analyticsEnabled: true,
    offlineEnabled: true,
  }}
  theme={{ isDarkMode: false, colors: { primary: '#007AFF' } }}
  autoInitialize={true}
  onInitialized={() => {}}
  onConnected={(profile) => {}}
  onError={(error) => console.error(error)}
>
  <App />
</AzeooProvider>

You can also pass safeArea and deepLinks when needed. onConnected runs after a successful connect call (see below).

2. Open a session for the current user​

Inside the provider, use useAzeoo() and call connect with the JWT your backend issues for this user, plus profile fields the SDK expects: gender (string), height in centimeters, weight in kilograms.

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

function LoginOrHome() {
  const { connect, isConnected, isInitialized } = useAzeoo();

  async function signInIntoAzeoo(
    token: string,
    gender: string,
    heightCm: number,
    weightKg: number
  ) {
    await connect(token, gender, heightCm, weightKg);
  }

  // After your own auth: obtain `token`, then call signInIntoAzeoo(...)
}

Call disconnect from the same hook when the user signs out.

3. Use the module views​

Import NutritionView from react-native-azeoo-lib. It must render under AzeooProvider; the module content appears once the user is connected.

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

<NutritionView
  bottomSafeArea={false}
  style={{ flex: 1 }}
  onLoad={() => {}}
  onError={(err) => console.error(err)}
/>

Next steps​