Aller au contenu principal

React Native Quick Start

Get started with the Azeoo SDK in a few minutes.

Prerequisites​

  • React Native 0.60+ (e.g. Expo or bare workflow)
  • Node.js 16+
  • iOS: Xcode 15+, iOS 12+
  • Android: Android Studio, minSdkVersion 21
  • An API key from Azeoo Client Platform

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: Get your API key​

  1. Register at Azeoo Client Platform
  2. Generate an SDK token

See Getting SDK Token.

Step 3: Wrap your app with AzeooProvider​

Use AzeooProvider with your API key and config. After the user is authenticated, the provider can connect with userId and authToken.

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

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

You can set userId and authToken after login (e.g. from state) and use autoConnect={true} so the SDK connects when those are available.

Step 4: Show SDK UI​

Use the native view components:

  • NutritionView — Nutrition module UI
  • TrainingView — Training module UI

Example:

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)}
    />
  );
}

That’s it. You should see the SDK UI when the view is mounted.

What’s next?​

Reference example​

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