@uptick-ads/react-native-web-sdk

Uptick React Native Web SDK

Runs the Uptick web SDK inside a react-native-webview, so a React Native app can show offers without a native SDK. One component, UptickFlow, with the same parameters as the web integration.

Requirements

• React Native 0.73 or newer
• react-native-webview 13.10 or newer (the component relies on onOpenWindow)
• An Uptick integration id and a placement configured for your account

Installation

npm install @uptick-ads/react-native-web-sdk react-native-webview

Expo apps: npx expo install react-native-webview, then install this package as above.

Usage

Mount UptickFlow where an inline offer should appear, in the flow of the screen. Pass the same parameters you would pass to the web SDK.

import { UptickFlow } from "@uptick-ads/react-native-web-sdk";

<UptickFlow
  integrationId="AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE"
  placement="order_confirmation"
  first_name="Reggie"
  total_price="$49.99"
  shipping_price="$9.99"
  order_id="12345"
  customer_id="cust_12345"
  callback={(event, data) => console.log(event, data)}
/>

Whether the offer renders inline or as a popup is configured by the Uptick offers team on your placement, not in your app. When the placement is inline, the component sizes itself to the offer and starts at zero height, so nothing shows until an offer is ready. When the placement is a popup, the component presents a modal over the whole screen with a scrim and a centred card, from wherever it is mounted. Tap outside, the card's close button, and the Android back button all dismiss it. Because both presentations work from the same mount point, Uptick can switch a placement between inline and popup without a change to your app.

Props

Prop	Default	Purpose
integrationId	required	Your integration's public id
placement	order_confirmation	checkout, order_confirmation or order_status
callback		(event, data), the same events as the web SDK callback
openUrl	Linking.openURL	How accepted offers open; supply your own to use an in-app browser
style		Style for the inline slot
modal		{ scrimColor, cardStyle, insets, maxCardHeight } for the popup presentation
webViewProps		Extra props passed through to WebView
host	api.uptick.com	API host, only for testing against other environments

Flow parameters

Passed as flat props, named as in the web integration. All values are strings.

• Site: site_id
• User: customer_id, first_name, locale
• Order: order_id, order_name, payment_method, currency, total_price, shipping_price, discount, zip, province, country_code

They travel in the URL fragment, which is never sent to a server, so they do not appear in request logs. Props outside this list are not forwarded.

Events

callback receives the web SDK's lifecycle events with the same names and payloads: init, flow_initialized, flow_delayed, offer_requested, offer_viewed, offer_accepted, offer_rejected, flow_complete, plus flow_hidden when the user closes the offer. The component adds render_type ({ rendered: "inline" | "popup" }) once the first offer renders, popup_dismissed, webview_error, webview_http_error and open_url_failed.

How click-out works

When a user accepts an offer the SDK opens the advertiser link with window.open. The component receives that through onOpenWindow, hands the URL to openUrl, and the page inside the WebView stays put, so the SDK moves on to the next offer while the user is in the browser. Do not set setSupportMultipleWindows={false} through webViewProps: on Android that makes the WebView start the navigation itself and leaves the offer frozen.

Demo

uptick-ads/uptick-react-native-web is an Expo app that exercises inline and popup placements against a local or hosted Uptick API.

License

See LICENSE.

Releasing

Releases follow the same flow as our other SDKs. Every pull request gets a CHANGES.md generated from its conventional commits (feat:, fix:, chore:, and so on). When a pull request merges to main and tests pass, the Promote workflow bumps the patch version in package.json, folds CHANGES.md into CHANGELOG.md, tags the commit, and creates a GitHub release. The release triggers the Deploy workflow, which publishes that version to npm with provenance through npm trusted publishing, and posts to Slack along the way.

bin/next_version decides the version: the patch number increments, rolling into the minor at 10. For a minor or major bump, set the version in package.json on the pull request and the next release starts from there.