React Native SDK

Disco's React Native SDK shows Disco offers inside your React Native app. Drop a single <DiscoRecommendations> component where you want offers to appear, pass your public API key and a request, and Disco handles the rest.

If your app is natively built for iOS or Android rather than React Native, use the App SDK instead.

The React Native SDK covers a focused set of features today. Disco adds functionality as publishers ask for it, so if you need something that isn't documented here, talk to your Disco team.

Get access

The React Native SDK is a private package. It isn't published to the public npm registry, so npm install or pnpm add will not find it until your project is configured to reach Disco's registry.

Contact your Disco team to request access. They'll provide an npm token and the registry settings your project needs. Once those are in place, the install steps below work as written.

Install

pnpm add @disconetwork/react-native react-native-svg @react-native-clipboard/clipboard

Peer dependencies

The SDK relies on a couple of shared native modules that your app must provide, so React Native links a single copy of each (native modules must be singletons):

• react-native-svg
• @react-native-clipboard/clipboard

On iOS, run pod install after adding these so autolinking can link the native code, then rebuild the app.

Usage

Drop a <DiscoRecommendations> where you want recommendations. It's standalone: pass your public API key directly (the disco_pk_live_… / disco_pk_sandbox_… prefix selects the environment), so no provider wrapper is needed.

import {
  DiscoRecommendations,
  type RecommendationsRequest,
} from "@disconetwork/react-native";

const request: RecommendationsRequest = {
  userDetails: { email: "user@example.com" },
  placementDetails: { view: "ORDER_STATUS" },
};

export function App() {
  return (
    <DiscoRecommendations
      apiKey="disco_pk_sandbox_…"
      request={request}
      placement="inline" // or "pullup" | "overlay"
      onLoad={() => console.log("loaded")}
      onError={(error) => console.warn(error)}
      onEvent={(event) => console.log(event.type)}
    />
  );
}

Device attributes (OS, version, platformType, language) are merged into the request automatically. Anything you set in request.attributes wins.

Props

Prop	Type	Required	Description
apiKey	string	✓	Scoped public API key. The disco_pk_live_… / disco_pk_sandbox_… prefix selects the environment, so there is no separate env to set.
request	RecommendationsRequest	✓	The recommendations request (see below). Device attributes are merged in automatically; values you set win. placementDetails.displayMode is derived from placement.
placement	Placement	✓	How the widget is presented, and any placement options. Also sets request.placementDetails.displayMode on the wire. See Placement.
style	StyleOptions		Visual overrides. Unset keys fall back to the defaults below. See Styling.
onLoad	() => void		Called once when recommendations load successfully.
onError	(error: unknown) => void		Called once if the request fails. Load failures surface here, not through onEvent.
onUnload	() => void		Called once when the component unmounts.
onEvent	(event: DiscoEvent) => void		User-interaction events inside the widget. See Events.

request

A RecommendationsRequest follows the same shape as the Ad Recommendations API request, minus placementDetails.displayMode, which the SDK fills in from placement:

const request: RecommendationsRequest = {
  userDetails: { email: "user@example.com" },
  placementDetails: { view: "ORDER_STATUS" },
};

See that reference for every available field. The more shopper and order context you pass, the more relevant the offers Disco can return.

Placement

placement selects the presentation and also sets request.placementDetails.displayMode on the wire. Pass a bare mode string, or an object for the modal placements (pullup / overlay) to set placement options.

Mode	Presentation
"inline"	Rendered in normal layout flow.
"pullup"	Bottom sheet that slides up.
"overlay"	Centered modal card.

placement="inline"                                       // bare mode string
placement="pullup"                                       // modal, default options
placement={{ mode: "pullup", dismissOnBackdropTap: true }} // modal with options

Option	Type	Default	Applies to	Description
dismissOnBackdropTap	boolean	false	pullup / overlay	Dismiss the modal when the user taps the backdrop.

inline has no backdrop, so it has no object form. { mode: "inline", … } is a type error.

Styling

Pass style to override any of the defaults. Every key is optional.

Key	Type	Default	Description
widgetBackgroundColor	string	"transparent"	Background behind the whole widget.
slotBackgroundColor	string	"#FFFFFF"	Background of each recommendation slot.
slotVerticalSpacing	number	16	Vertical gap between slots.
slotSidePadding	number	16	Horizontal padding inside the widget.
acceptButtonBackgroundColor	string	"#008363"	Accept/CTA button fill.
acceptButtonTextColor	string	"#FFFFFF"	Accept/CTA button label color.
promoCodeBackgroundColor	string	"#2DA784"	Promo-code chip background.
pullupBackgroundColor	string	"#FFFFFF"	Background of the pull-up sheet / overlay card.
pullupOverlayTitle	string	(none)	Optional header title shown for pullup / overlay.
primaryTextColor	string	"#2D2D2D"	Titles and primary/heading text.
secondaryTextColor	string	"#566176"	Body, captions, and secondary text.

<DiscoRecommendations
  apiKey="disco_pk_sandbox_…"
  request={request}
  placement="inline"
  style={{
    acceptButtonBackgroundColor: "#1A73E8",
    primaryTextColor: "#111111",
  }}
/>

Events

onLoad, onError, and onUnload cover the component and request lifecycle. onEvent reports what the user did inside the widget, as a DiscoEvent:

event.type	Meaning
"WidgetViewed"	The widget became visible to the user.
"WidgetDismissed"	The user dismissed the modal (close button or backdrop).
"WidgetCompleted"	The user completed the flow, for example by accepting an offer.

<DiscoRecommendations
  apiKey="disco_pk_sandbox_…"
  request={request}
  placement="pullup"
  onEvent={(event) => {
    if (event.type === "WidgetCompleted") {
      // …
    }
  }}
/>

Testing

Use a disco_pk_sandbox_… key while you build. The key prefix selects the environment, so there is no separate sandbox flag to set. Switch to your disco_pk_live_… key when you're ready to serve real offers.

Your Disco team verifies that test requests arrive complete before anything goes live.

Related

• App SDK (iOS & Android): the native mobile integration
• Ad Recommendations API: the full request field reference
• Web SDK: the web serving integration