React Native sponsored offer component

Render Genesis sponsored offers in mobile AI apps with visible disclosure, impression tracking, and click tracking.

Install after registry publication

Public npm installation is a post-publication launch gate. Until `sdk:registries:verify` passes, use the workspace packages in local development.

npm install @thegenesis/react-native @thegenesis/api-client-js

Provider setup

import { GenesisClient } from "@thegenesis/api-client-js";
import { GenesisProvider } from "@thegenesis/react-native";

const genesis = new GenesisClient({
  apiKey: process.env.EXPO_PUBLIC_GENESIS_KEY!,
  mode: "test",
  timeoutMs: 1200,
  fallbackOnError: true
});

export function AppShell({ children }: { children: React.ReactNode }) {
  return <GenesisProvider client={genesis}>{children}</GenesisProvider>;
}

Request offers

const response = await genesis.requestOffers({
  testMode: true,
  placement: {
    placementId: "mobile_assistant_recommendation",
    appId: "app_mobile_docs",
    agentType: "mobile_ai_app",
    surface: "mobile"
  },
  context: {
    userMessage: "Find a project management app for a remote design team.",
    intentKeywords: ["project_management", "collaboration"],
    categories: ["productivity"],
    country: "US"
  },
  controls: {
    maxOffers: 1,
    requireDisclosure: true
  }
});

const [offer] = response.offers;

Render and track

import { SponsoredOffer } from "@thegenesis/react-native";

export function OfferSlot({ offer }: { offer?: GenesisOffer }) {
  if (!offer) return null;
  return <SponsoredOffer offer={offer} disclosureLabel="Sponsored" />;
}