Skip to main content

React Native Quick Start

Get started with the Azeoo SDK in a few minutes.

Prerequisites​

  • A React Native project (Expo or bare workflow; match versions to your stack — the bundled example targets React Native 0.81+)
  • Node.js compatible with your React Native toolchain
  • react-native-nitro-modules (required alongside react-native-azeoo-lib)
  • iOS: Xcode 15+, iOS 12+
  • Android: Android Studio, minSdkVersion 21
  • An API key from Azeoo Client Platform
  • A connection JWT for the signed-in user from your backend (see Getting SDK Token)

Step 1: Installation​

Install the SDK from Bitbucket and apply the Android Gradle line. See the Installation Guide and Downloads for the exact URL and steps.

Summary:

yarn add "https://bitbucket.org/azeoo/react-native-azeoo-lib.git"
yarn add react-native-nitro-modules
cd ios && pod install && cd ..

In android/build.gradle (project level), add:

apply from: "../node_modules/react-native-azeoo-lib/android/azeoolib-dependencies.gradle"

Step 2: API key and user token​

  1. In Azeoo Client Platform, create an API key for initialize / AzeooProvider.
  2. Your backend (or test setup) must issue a JWT used only for connect. Details: Getting SDK Token.

Step 3: Wrap your app with AzeooProvider​

AzeooProvider initializes the native SDK. It does not take userId, authToken, or autoConnect. Call connect separately when you have a token (Step 4).

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

export default function App() {
  return (
    <AzeooProvider
      apiKey="your-sdk-api-key"
      config={{
        locale: 'en',
        analyticsEnabled: true,
        offlineEnabled: true,
      }}
      theme={{ isDarkMode: false, colors: { primary: '#007AFF' } }}
      autoInitialize={true}
      onInitialized={() => console.log('SDK initialized')}
      onConnected={(profile) =>
        console.log('Connected:', profile?.displayName ?? profile?.name)
      }
      onError={(error) => console.error('SDK error:', error)}
    >
      <YourAppContent />
    </AzeooProvider>
  );
}

Optional: safeArea, deepLinks.

Step 4: Connect the user​

From any child of the provider, use useAzeoo() and connect(token, gender, height, weight) (gender string, height in cm, weight in kg).

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

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

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

  // ...
}

Step 5: Show SDK UI​

Use the view components under the same provider. They show module content after connect.

  • NutritionView — Nutrition module UI
import { NutritionView } from 'react-native-azeoo-lib';

export function NutritionTab() {
  return (
    <NutritionView
      bottomSafeArea={false}
      style={{ flex: 1 }}
      onLoad={() => console.log('Nutrition view loaded')}
      onError={(err) => console.error('Nutrition view error', err)}
    />
  );
}

If the user is not connected yet, the view shows a short placeholder until connect succeeds.

What's next?​

Reference example​

See the react-native example in the repository for a full app with connect flow, tabs, and SDK integration.