Aller au contenu principal

💡 Exemples React Native

Configuration minimale avec AzeooProvider​

Enveloppez votre app (ou la partie qui utilise le SDK) avec AzeooProvider, puis utilisez NutritionView ou TrainingView :

import { AzeooProvider, NutritionView } 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}
    >
      <NutritionView
        bottomSafeArea={false}
        style={{ flex: 1 }}
        onLoad={() => {}}
        onError={(e) => console.error(e)}
      />
    </AzeooProvider>
  );
}

Après connexion​

Passez userId et authToken depuis votre état d'authentification pour que le SDK se connecte après la connexion :

const [user, setUser] = useState(null);

<AzeooProvider
  apiKey={API_KEY}
  userId={user?.id ?? ''}
  authToken={user?.token ?? ''}
  autoInitialize={true}
  autoConnect={true}
  onConnected={(profile) => console.log('Connected', profile?.name)}
  onError={(err) => console.error(err)}
  config={{ locale: 'en', analyticsEnabled: true, offlineEnabled: true }}
>
  {user ? <MainTabs /> : <LoginScreen onLogin={setUser} />}
</AzeooProvider>
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="AI Scanner" onPress={() => sdk?.navigate(Destination.nutrition.scanner('ai'))} />
      <Button title="Workouts" onPress={() => sdk?.navigate(Destination.training.workouts())} />
    </>
  );
}

Synchroniser vos onglets avec la navigation inter-modules​

useEffect(() => {
  if (!sdk) return;
  sdk.setModuleContainer((module) => {
    setActiveTab(module);   // your local tab state, React Navigation, etc.
    return true;
  });
  return () => sdk.setModuleContainer(null);
}, [sdk]);

Application d'exemple complète​

Voir l'exemple React Native dans le dépôt pour une app complète avec connexion, onglets (Accueil, Nutrition, Entraînement, SDK) et intégration SDK.

Étapes suivantes​