Aller au contenu principal

Exemples React Native

Configuration minimale avec AzeooProvider​

Enveloppez votre application avec AzeooProvider, puis appelez connect(token, gender, height, weight) depuis un composant enfant (via useAzeoo()) avant que NutritionView puisse afficher le contenu du module.

import { useEffect } from 'react';
import { AzeooProvider, NutritionView, useAzeoo } from 'react-native-azeoo-lib';

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

  useEffect(() => {
    // When you have the JWT and profile fields from your backend / auth:
    connect('jwt-from-backend', 'male', 175, 72).catch(console.error);
  }, [connect]);

  if (!isConnected) {
    return null; // or a loading screen
  }

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

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

AzeooProvider ne prend pas en charge userId, authToken ni autoConnect.

Après la connexion​

Gardez <AzeooProvider> à la racine ; lorsque votre propre connexion se termine, appelez connect avec la session que vous avez reçue (JWT + gender + taille + poids en cm / kg) :

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

type Session = {
  token: string;
  gender: string;
  heightCm: number;
  weightKg: number;
};

function MainAfterLogin({ session }: { session: Session }) {
  const { connect, isConnected } = useAzeoo();

  useEffect(() => {
    if (!isConnected) {
      connect(session.token, session.gender, session.heightCm, session.weightKg).catch(
        console.error
      );
    }
  }, [session, isConnected, connect]);

  if (!isConnected) {
    return null; // or loading
  }

  return <MainTabs />;
}

Utilisez votre “auth gate” pour rendre MainAfterLogin uniquement lorsque session est définie.

Application d’exemple complète​

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

Prochaines étapes​