Mobile SDKs

// App.tsx
import { JustKalmProvider } from '@justkalm/react-native';

export default function App() {
  return (
    <JustKalmProvider 
      apiKey={process.env.JUSTKALM_API_KEY}
      environment="production"
    >
      <NavigationContainer>
        <MainStack />
      </NavigationContainer>
    </JustKalmProvider>
  );
}

// components/ProductScanner.tsx
import { useJustKalm, useProductAnalysis } from '@justkalm/react-native';
import { Camera, useCameraDevice } from 'react-native-vision-camera';

export function ProductScanner() {
  const device = useCameraDevice('back');
  const { analyzeBarcode, isLoading } = useJustKalm();
  const [product, setProduct] = useState(null);

  const onBarcodeScanned = async (barcode: string) => {
    const result = await analyzeBarcode(barcode);
    setProduct(result);
  };

  return (
    <View style={styles.container}>
      <Camera
        device={device}
        isActive={true}
        codeScanner={{
          codeTypes: ['ean-13', 'qr'],
          onCodeScanned: (codes) => onBarcodeScanned(codes[0].value),
        }}
      />
      
      {isLoading && <ActivityIndicator />}
      
      {product && (
        <ProductCard
          name={product.name}
          healthScore={product.healthScore}
          valuation={product.valuation}
        />
      )}
    </View>
  );
}

// hooks/useHealthScore.ts
import { useProductAnalysis } from '@justkalm/react-native';

export function ProductHealthCard({ productUrl }: { productUrl: string }) {
  const { data, isLoading, error } = useProductAnalysis(productUrl, {
    includeHealthScore: true,
    includeSustainability: true,
  });

  if (isLoading) return <LoadingSkeleton />;
  if (error) return <ErrorCard error={error} />;

  return (
    <View style={styles.card}>
      <HealthScoreCircle score={data.healthScore.overall} />
      <Text style={styles.brand}>{data.brand}</Text>
      <Text style={styles.name}>{data.name}</Text>
      
      <View style={styles.metrics}>
        <MetricRow 
          label="Material Safety" 
          value={data.healthScore.materialSafety} 
        />
        <MetricRow 
          label="Environmental" 
          value={data.healthScore.environmentalImpact} 
        />
        <MetricRow 
          label="Circularity" 
          value={data.sustainability.circularityScore} 
        />
      </View>
    </View>
  );
}