Enhance your React Native app by integrating our advertising widget. The Uptick React Native SDK provides a single component, UptickFlow, that renders the same offers as our web integration inside your app on iOS and Android. It takes the same parameters as the
Web Integration
, so if you already run Uptick on your website the setup will feel familiar.
The SDK is published to npm as @uptick-ads/react-native-web-sdk and requires react-native-webview.
npm install @uptick-ads/react-native-web-sdk react-native-webview
For Expo projects, install the WebView dependency with Expo so it matches your SDK version, then add the package as above:
npx expo install react-native-webview npm install @uptick-ads/react-native-web-sdk
Import UptickFlow and render it on the screen where offers should appear, at the point in the layout where an inline offer belongs. The integrationId is the ID assigned to your integration, and the placement identifies the screen type.
import { UptickFlow } from "@uptick-ads/react-native-web-sdk"; export default function OrderConfirmation({ order }) { return ( <ScrollView> <OrderSummary order={order} /> <UptickFlow integrationId="AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE" placement="order_confirmation" first_name={order.customer.firstName} total_price={order.totalPrice} shipping_price={order.shippingPrice} order_id={order.number} customer_id={order.customer.id} /> <ShippingDetails order={order} /> </ScrollView> ); }
The component starts at zero height and grows once an offer is ready, so nothing shifts on screen if no offer is available.
While only placement is required, we strongly recommend passing the following props to improve performance through better personalization of offers:
placement: The screen type where offers are displayed ("checkout", "order_confirmation", or "order_status") - see
Placement Types
for details
first_name: The first name of the person receiving the offer, used for personalization
total_price: Total price of the order
shipping_price: Just the shipping price of the order
order_id: The merchant’s order confirmation number or order ID
Flow parameters are passed as flat props and use the same names as the web integration. All values are strings.
Site
placement: The screen type ("checkout", "order_confirmation", or "order_status")
required
site_id: If you have unique site identifiers, you can use this instead of the domain.
User
customer_id: A unique identifier for the customer. This can be very useful for things like frequency capping
first_name: The first name of the person receiving the offer
Order
order_id: The order id received for the transaction
payment_method: What payment method was used such as: paypal, venmo, credit_card, etc.
currency: The currency of the transaction using the 3-digit ISO code
total_price: Total price of the order
shipping_price: Just the shipping price of the order
Parameters travel in a URL fragment that is never sent to a server, so customer and order details do not appear in request logs.
How offers appear is configured by the Uptick offers team on your integration, per placement, and is not a setting in your app. UptickFlow handles both:
UptickFlow is mounted, so it does not need to sit at the root of your screen.
Because both presentations work from the same mount point, place UptickFlow where an inline offer belongs and we can switch the placement between inline and popup without a change to your app. The callback receives a render_type event telling you which presentation rendered.
The card’s close button, a tap outside the card, and the Android back button all dismiss the popup.
When a user accepts an offer, the SDK opens the advertiser’s page in the device browser and the flow continues to the next offer inside your app. To open accepted offers in an in-app browser instead, pass an openUrl function:
import * as WebBrowser from "expo-web-browser"; <UptickFlow integrationId="AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE" placement="order_confirmation" openUrl={(url) => WebBrowser.openBrowserAsync(url)} />
You can include a callback if you want to track the events within the flow. This can be useful to inform internal analytics about the performance. The events and their payloads are the same as the web integration.
const callback = (event, data) => { // You're going to see events like: // - flow_initialized // - flow_delayed // - offer_requested // - offer_viewed // - offer_accepted // - offer_rejected // - flow_complete console.log(event, data); }; <UptickFlow integrationId="AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE" placement="order_confirmation" callback={callback} />
In addition to the web SDK events, the component reports:
render_type: { rendered: "inline" | "popup" } once the first offer renders
flow_hidden: The user closed the offer
popup_dismissed: The user dismissed the popup by tapping outside it or pressing back
webview_error, webview_http_error, open_url_failed: Something prevented the offer or the advertiser page from loading
react-native-webview 13.10 or newer
Note:
integrationId prop contains an ID (AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE). Ensure that you replace this with the correct ID assigned to your integration. Using an incorrect or generic ID will lead to unsuccessful widget activation.
Troubleshooting Tips:
callback receives webview_error or webview_http_error when the offer page cannot load.
setSupportMultipleWindows={false} through webViewProps. The SDK relies on the WebView’s window-open handling to hand the advertiser link to the browser.