Skip to main content
Version: 1.1.0

💡 React Native Examples

Minimal setup with AzeooProvider​

Wrap your app with AzeooProvider, connect after login, then use NutritionView or 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>
  );
}

After login​

Call connect from useAzeoo() when your auth state provides a 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="AI Scanner" onPress={() => sdk?.navigate(Destination.nutrition.scanner('ai'))} />
      <Button title="Workouts" onPress={() => sdk?.navigate(Destination.training.workouts())} />
    </>
  );
}

Sync your tabs with cross-module navigation​

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

Full example app​

See the React Native example in the repository for a complete app with login, tabs (Home, Nutrition, Training, SDK), and SDK integration.

Next steps​