Skip to main content

💡 React Native Examples

Minimal setup with AzeooProvider​

Wrap your app (or the part that uses the SDK) with AzeooProvider, then use NutritionView or 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>
  );
}

After login​

Pass userId and authToken from your auth state so the SDK connects after login:

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())} />
    </>
  );
}

Sync your tabs with cross-module navigation​

useEffect(() => {
  if (!sdk) return;
  sdk.setModuleContainer((module) => {
    setActiveTab(module);   // your local tab state, React Navigation, etc.
    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​