SDKsReact Native

Appearance

Theme Koah ads in React Native with KoahThemeProvider.

Theming

💡

See how it looks in the playground.

To customize the appearance of Koah ads, wrap your tree with KoahThemeProvider once and every Koah ad below it picks the theme up automatically:

import {
  Koah,
  KoahProvider,
  KoahBrowserModal,
  KoahThemeProvider,
} from 'koah-react-native'

const koah = Koah.init({ publisherId: 'YOUR_PUBLISHER_ID' })

export default function App() {
  return (
    <KoahProvider client={koah}>
      <KoahThemeProvider theme={{ accentColor: '#22C55E' }} >
        <YourApp />
      </KoahThemeProvider>
      <KoahBrowserModal />
    </KoahProvider>
  )
}

To see a full list of the available theme properties, see Theme properties in the reference.

Sizing

Koah ads are fully resizable. Size each axis independently with the width and height props:

omit the prop — the ad hugs its content
KoahAxisSize.fixed(dp) — an exact size
KoahAxisSize.range({ min, max }) — a bounded band (at least one bound required; a fully unbounded axis is spelled by omitting the prop)
KoahAxisSize.fill() — fill the parent

💡

Omitting width / height allows more ad formats, improving fill rates and revenue.

// Cap the width for a compact slot; leave height unbounded so the card can't clip.
<KoahTextAdComponent
  adContext={KoahAdContext.conversation({ question, answer })}
  cacheKey={messageId}
  width={KoahAxisSize.range({ max: 384 })}
/>

A served ad that can't fit a forced or capped axis renders nothing and emits KoahEvent.slotTooSmall through onEvent instead of clipping. See Formats for the full sizing model.

Card chrome

Ad components render inside the standard chrome (surface background, 0.5pt border, padding) by default. Pass chrome="bare" to render borderless and embed the ad directly into your own surface like a chat row or list cell:

<KoahTextAdComponent
  adContext={KoahAdContext.conversation({ question, answer })}
  cacheKey="msg-1"
  chrome="bare"
/>