@uptick-ads/react-native-web-sdk 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uptick-ads/react-native-web-sdk",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "React Native component that runs the Uptick web SDK inside a WebView, inline or as a popup, with the web integration's parameters",
   "keywords": [
     "uptick",

package/src/UptickFlow.js

@@ -139,16 +139,14 @@ export function UptickFlow({
     return <View style={[styles.transparent, { height: renderType === "inline" ? contentHeight : 1, overflow: "hidden" }, style]}>{webView}</View>;
   }
 
-  // Popup: the page has already loaded inside the inline slot, so keep that WebView alive and move it into a system modal over a dimmed background.
-  // React Native's Modal presents above the whole window regardless of where this component sits in the tree.
+  // Popup: a system modal over a dimmed background, which React Native presents above the whole window regardless of where this component sits in the tree.
+  // A presented modal swallows touches and the back button even when its content is transparent, so it is only presented while visible, and hiding it unmounts the WebView and ends the page.
   return (
     <View style={[styles.transparent, { height: 0 }, style]}>
-      <Modal visible transparent animationType="fade" statusBarTranslucent onRequestClose={dismiss}>
-        <View style={FILL} pointerEvents={visible ? "auto" : "none"}>
-          <Pressable accessibilityRole="button" accessibilityLabel="Dismiss" style={[FILL, { backgroundColor, opacity: visible ? 1 : 0 }]} onPress={dismiss} />
-          <View pointerEvents="box-none" style={[FILL, styles.cardWrap, { paddingTop: insets.top, paddingBottom: insets.bottom, opacity: visible ? 1 : 0 }]}>
-            <View style={[styles.card, { height: Math.min(contentHeight, maxCardHeight) }, cardStyle]}>{webView}</View>
-          </View>
+      <Modal visible={visible} transparent animationType="fade" statusBarTranslucent onRequestClose={dismiss}>
+        <Pressable accessibilityRole="button" accessibilityLabel="Dismiss" style={[FILL, { backgroundColor }]} onPress={dismiss} />
+        <View pointerEvents="box-none" style={[FILL, styles.cardWrap, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
+          <View style={[styles.card, { height: Math.min(contentHeight, maxCardHeight) }, cardStyle]}>{webView}</View>
         </View>
       </Modal>
     </View>

package/src/embedUrl.js

@@ -29,6 +29,8 @@ function encodeQuery(params) {
     .join("&");
 }
 
+const INTEGRATION_TYPE = "react_native";
+
 export function pickFlowParams(props) {
   const out = {};
   FLOW_PARAMS.forEach((key) => {
@@ -55,7 +57,7 @@ export function customizations(modal) {
 export function buildEmbedUrl({ host, integrationId, placement, params, version, customization }) {
   if (!integrationId) throw new Error("UptickFlow: integrationId is required");
   // The page renders whatever presentation the placement's template defines; `native` only asks it to leave the popup chrome to the app.
-  const search = encodeQuery({ placement, variant: "native", integration_version: version });
+  const search = encodeQuery({ placement, variant: "native", integration_type: INTEGRATION_TYPE, integration_version: version });
   // Nested with bracket keys, the same shape the API stores for any other nested parameter.
   const nested = {};
   Object.keys(customization || {}).forEach((key) => { nested[`customization[${key}]`] = customization[key]; });

package/src/version.js

@@ -1,2 +1,2 @@
 // Kept in step with package.json by the release pipeline; the API records it on every event as integration_version.
-export const version = "0.3.3";
+export const version = "0.3.5";