Aller au contenu principal

Démarrage rapide React Native

Démarrez avec le SDK Azeoo en quelques minutes.

Pré-requis​

  • Un projet React Native (Expo ou workflow “bare”; adaptez les versions à votre stack — l’exemple fourni cible React Native 0.81+)
  • Node.js compatible avec votre toolchain React Native
  • react-native-nitro-modules (requis en plus de react-native-azeoo-lib)
  • iOS : Xcode 15+, iOS 12+
  • Android : Android Studio, minSdkVersion 21
  • Une clé API depuis Azeoo Client Platform
  • Un JWT de connexion pour l’utilisateur connecté, fourni par votre backend (voir Obtenir le jeton SDK)

Étape 1 : Installation​

Installez le SDK depuis Bitbucket et appliquez la ligne Gradle Android. Reportez-vous au Guide d’installation et à la page Téléchargements pour l’URL exacte et les étapes.

Résumé :

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"

Étape 2 : Clé API et jeton utilisateur​

  1. Dans Azeoo Client Platform, créez une clé API pour initialize / AzeooProvider.
  2. Votre backend (ou configuration de test) doit émettre un JWT utilisé uniquement pour connect. Détails : Obtenir le jeton SDK.

Étape 3 : Envelopper votre application avec AzeooProvider​

AzeooProvider initialise le SDK natif. Il ne prend pas userId, authToken ni autoConnect. Appelez connect séparément quand vous avez un token (Étape 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.

Étape 4 : Connecter l’utilisateur​

Depuis n’importe quel composant enfant du provider, utilisez useAzeoo() et connect(token, gender, height, weight) (gender en string, taille en cm, poids en 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);
  }

  // ...
}

Étape 5 : Afficher l’UI du SDK​

Utilisez les composants d’affichage sous le même provider. Ils affichent le contenu des modules après 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.

Et ensuite ?​

Exemple de référence​

Consultez le exemple React Native dans le dépôt pour une application complète (flow de connexion, onglets, intégration du SDK).