SDKsReact Native

Reference

Props for the Koah React Native ad components.

Component props

The three ad components share most props. adContext (required on the text and feed components) takes a KoahAdContext; cacheKey is a stable per-slot id; chrome toggles the card background/border/padding; sizing uses per-axis width / height of type KoahAxisSize — KoahAxisSize.fixed(dp), KoahAxisSize.range({ min, max }), or KoahAxisSize.fill(); omit an axis to hug the content.

Component Props

interface KoahTextAdComponentProps {
  // Required props
  adContext: KoahAdContext          // e.g. KoahAdContext.conversation({ question, answer })

  // Optional props
  cacheKey?: string                 // Stable key for the slot (default: random UUID per mount)
  width?: KoahAxisSize              // Horizontal sizing (omit to hug the content)
  height?: KoahAxisSize             // Vertical sizing (omit to hug the content)
  chrome?: "standard" | "bare"      // Card chrome (default: "standard")
  children?: ReactNode              // AI response component to wrap

  // Callbacks
  onEvent?: (event: KoahEvent) => void
}

The legacy props were removed in 1.0: question / response / isResponseReady / messageId / conversationId / shouldGenerateAd / didReceiveAd on KoahTextAdComponent, text / source / description on KoahFeedAdComponent, and the deprecated size prop plus overrideMaxWidth / overrideMaxHeight / widthBehavior everywhere. KoahCachedAdComponent's messageId prop is renamed to cacheKey. See the migration guide for the before/after of each.

Event handling

The onEvent callback notifies you of ad lifecycle events. KoahEvent is a discriminated union on kind:

Kind	When it fires
`noAdFill`	An ad request resolved with no ad
`adServed`	An ad request resolved with an ad
`slotTooSmall`	The card rendered nothing instead of clipping — a served ad couldn't fit the slot's bounds, or `fill()` was used on an axis the parent leaves unbounded
`impressionTracked`	The ad became visible and the impression was recorded
`adViewed`	The ad stayed visible long enough to count as viewed
`adClicked`	The user tapped the ad
`inAppBrowserClosed`	The in-app browser opened from the ad was dismissed

import { KoahAdContext } from 'koah-react-native'

<KoahTextAdComponent
  adContext={KoahAdContext.conversation({ question, answer })}
  cacheKey={messageId}
  onEvent={(event) => {
    switch (event.kind) {
      case 'noAdFill':
        // no inventory for this request
        break
      case 'adServed':
        // ad delivered
        break
      case 'impressionTracked':
        // impression recorded
        break
      case 'adClicked':
        // user tapped the ad
        break
    }
  }}
/>

Theme properties

Set these on the theme prop of KoahThemeProvider.

Property	Type	Default	Description
`colorScheme`	`"light" \| "dark" \| "auto"`	`"auto"`	`"auto"` follows the device via React Native's `useColorScheme()`
`accentColor`	`string`	`"#0D0D0D"`	Accent for CTA buttons and accents. Text-on-accent is computed automatically for contrast — never expose it.
`fontFamily`	`string`	`undefined` (inherits from host app)	Font family applied to all ad text
`cornerRadius`	`number`	`19`	Card corner radius