Skip to main content

React Native Examples

Minimal setup with AzeooProvider​

Wrap your app with AzeooProvider, then call connect(token, gender, height, weight) from a child (via useAzeoo()) before NutritionView can show module content.

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 does not support userId, authToken, or autoConnect.

After login​

Keep <AzeooProvider> at the root; when your own login finishes, call connect with the session you received (JWT + gender + height + weight in 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 />;
}

Use your auth gate to render MainAfterLogin only once session is set.

Full example app​

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

Next steps​