Aller au contenu principal

Intégration React Native

Après avoir installé le SDK et ajouté la ligne Gradle Android, intégrez-le à votre application en trois étapes : provider, session utilisateur, puis UI.

1. Envelopper l’application avec AzeooProvider​

Placez AzeooProvider à la racine (ou au-dessus de tout arbre qui utilise des hooks ou vues du SDK). Il charge le SDK natif avec votre clé API et des paramètres optionnels.

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>

Vous pouvez aussi passer safeArea et deepLinks si nécessaire. onConnected s’exécute après un appel connect réussi (voir ci-dessous).

2. Ouvrir une session pour l’utilisateur courant​

Dans le provider, utilisez useAzeoo() et appelez connect avec le JWT fourni par votre backend pour cet utilisateur, ainsi que les champs de profil attendus par le SDK : gender (string), taille en centimètres, poids en kilogrammes.

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(...)
}

Appelez disconnect via le même hook lorsque l’utilisateur se déconnecte.

3. Utiliser les vues des modules​

Importez NutritionView depuis react-native-azeoo-lib. Il doit être rendu sous AzeooProvider ; le contenu du module apparaît une fois l’utilisateur connecté.

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

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

Prochaines étapes​