Aller au contenu principal
Version: 1.1.0

💡 Exemples React Native

Configuration minimale avec AzeooProvider​

Enveloppez votre app avec AzeooProvider, connectez après login, puis utilisez NutritionView ou TrainingView :

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

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

  useEffect(() => {
    if (userJwt && !isConnected) {
      connect(userJwt, gender, height, weight);
    }
  }, [userJwt, isConnected]);

  if (!isConnected) return <LoginScreen />;
  return <NutritionView bottomSafeArea={false} style={{ flex: 1 }} />;
}

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

Après login​

Appelez connect depuis useAzeoo() quand votre état d'auth fournit un JWT :

const { connect, isInitialized } = useAzeoo();

const onLogin = async (jwt: string) => {
  if (!isInitialized) return;
  await connect(jwt, user.gender, user.height, user.weight);
};
import { useAzeoo, Destination } from 'react-native-azeoo-lib';

function NavButtons() {
  const { sdk } = useAzeoo();
  return (
    <>
      <Button title="Plan" onPress={() => sdk?.navigate(Destination.nutrition.plan('abc'))} />
      <Button title="Scanner IA" onPress={() => sdk?.navigate(Destination.nutrition.scanner('ai'))} />
      <Button title="Workouts" onPress={() => sdk?.navigate(Destination.training.workouts())} />
    </>
  );
}

Synchroniser vos onglets avec la navigation cross-module​

useEffect(() => {
  if (!sdk) return;
  sdk.setModuleContainer((module) => {
    setActiveTab(module);
    return true;
  });
  return () => sdk.setModuleContainer(null);
}, [sdk]);

App exemple complète​

Voir l'exemple React Native dans le dépôt.

Étapes suivantes​