Skip to main content
Version: 1.1.0

🔌 React Native Integration

After installing the SDK and adding the Android Gradle line, integrate the SDK in your app.

1. Wrap the app with AzeooProvider​

Use AzeooProvider at the root (or above any screen that uses the SDK). It handles initialization only — connection is a separate step.

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

<AzeooProvider
  apiKey={API_KEY}
  config={{
    locale: 'en',
    analyticsEnabled: true,
    offlineEnabled: true,
  }}
  connector={connectorConfig}  // optional — see Connectors
  theme={{ isDarkMode: false, colors: { primary: '#007AFF' } }}
  safeArea={{ top: true, bottom: true, left: true, right: true }}
  deepLinks={{ scheme: 'https', host: 'yourapp.com' }}
  autoInitialize={true}
  onInitialized={() => {}}
  onConnected={(profile) => {}}
  onError={(error) => console.error(error)}
>
  <App />
</AzeooProvider>
No userId or authToken props

AzeooProvider does not accept userId, authToken, or autoConnect. Call useAzeoo().connect() after your login flow.

2. Connect after login​

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

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

  const handleLogin = async (jwt: string) => {
    if (!isInitialized) return;
    await connect(
      jwt,
      'male',
      { values: ['180'], unit: 'centimeters' },
      { values: ['75'], unit: 'kilograms' },
    );
  };
  // ...
}

The JWT must be a User JWT created by your backend.

3. Use native views​

Import the views from react-native-azeoo-lib:

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

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

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

Show views after connect succeeds.

Next steps​