From 8201e3eef69389ab8dd89a1eef30b82746fa3a37 Mon Sep 17 00:00:00 2001
From: Mahmoud Elmorabea <mahmoud.elmorabea@gmail.com>
Date: Wed, 29 Jul 2026 12:13:42 +0300
Subject: [PATCH 1/2] feat(sample): Visual Inbox demo screen in the RN example
 app
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a Visual Inbox screen exercising all three components — the drop-in overlay, the
standalone bell driving a modal, and the embedded message list — plus an on-screen
readout of the InboxEventListener callbacks (action / shown / opened / dismissed) so
the listener bridge can be checked by hand.

Stacked on the SDK branch: this only adds demo UI. The build wiring the sample needs
to resolve the unreleased native inbox (example Podfile branch pins, core library
desugaring) lives in the SDK commit, so that PR stands on its own in CI.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 example/package-lock.json                 |   4 +-
 example/src/navigation/props.ts           |   2 +
 example/src/screens/content-navigator.tsx |  10 ++
 example/src/screens/home.tsx              |   7 +
 example/src/screens/index.ts              |   1 +
 example/src/screens/visual-inbox.tsx      | 156 ++++++++++++++++++++++
 6 files changed, 178 insertions(+), 2 deletions(-)
 create mode 100644 example/src/screens/visual-inbox.tsx

diff --git a/example/package-lock.json b/example/package-lock.json
index a6c0aec2..a1d275c3 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -5201,9 +5201,9 @@
       "license": "MIT"
     },
     "node_modules/customerio-reactnative": {
-      "version": "6.4.0",
+      "version": "6.5.2",
       "resolved": "file:../customerio-reactnative.tgz",
-      "integrity": "sha512-zecDKrOc6EXHFdC04KLqiTeYTBRmV0cFEGEhTzVn2+wjskKFy8kxMKN/5yAxXi7uMyO08AYM4nuckKfn5ayZjw==",
+      "integrity": "sha512-rNij5E016mf4wUwMmsSM9/VSsCxOUU2sVwUvsXfWV24qKyXhqzKyifEZs17APbfzkz1DmaJbtmMPJ49DzdS3mA==",
       "hasInstallScript": true,
       "license": "MIT",
       "engines": {
diff --git a/example/src/navigation/props.ts b/example/src/navigation/props.ts
index f7e24907..660a0482 100644
--- a/example/src/navigation/props.ts
+++ b/example/src/navigation/props.ts
@@ -12,6 +12,7 @@ export const CustomDeviceAttrScreenName = 'Device Attributes' as const;
 export const InternalSettingsScreenName = 'Internal Settings' as const;
 export const InlineExamplesScreenName = 'Inline Examples' as const;
 export const InboxMessagesScreenName = 'Inbox Messages' as const;
+export const VisualInboxScreenName = 'Visual Inbox' as const;
 export const LocationScreenName = 'Location' as const;
 
 export type NavigationStackParamList = {
@@ -25,6 +26,7 @@ export type NavigationStackParamList = {
   [InternalSettingsScreenName]: undefined;
   [InlineExamplesScreenName]: undefined;
   [InboxMessagesScreenName]: undefined;
+  [VisualInboxScreenName]: undefined;
   [LocationScreenName]: undefined;
 };
 
diff --git a/example/src/screens/content-navigator.tsx b/example/src/screens/content-navigator.tsx
index 7a3b420e..400693fd 100644
--- a/example/src/screens/content-navigator.tsx
+++ b/example/src/screens/content-navigator.tsx
@@ -11,6 +11,7 @@ import {
   NavigationStackParamList,
   SettingsScreenName,
   TrackScreenName,
+  VisualInboxScreenName,
 } from '@navigation';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { screenStylingOptions } from '@utils';
@@ -27,6 +28,7 @@ import {
   LogingScreen,
   SettingsScreen,
   TrackScreen,
+  VisualInboxScreen,
 } from '@screens';
 
 import { Storage } from '@services';
@@ -130,6 +132,14 @@ export const ContentNavigator = ({ appName }: { appName: string }) => {
             headerBackVisible: true,
           }}
         />
+        <Stack.Screen
+          name={VisualInboxScreenName}
+          component={VisualInboxScreen}
+          options={{
+            headerBackButtonDisplayMode: 'minimal',
+            headerBackVisible: true,
+          }}
+        />
         <Stack.Screen
           name={LocationScreenName}
           component={LocationScreen}
diff --git a/example/src/screens/home.tsx b/example/src/screens/home.tsx
index 390be428..515f00f9 100644
--- a/example/src/screens/home.tsx
+++ b/example/src/screens/home.tsx
@@ -7,6 +7,7 @@ import {
   LocationScreenName,
   NavigationCallbackContext,
   NavigationScreenProps,
+  VisualInboxScreenName,
 } from '@navigation';
 import { Storage } from '@services';
 import { CioPushPermissionStatus } from 'customerio-reactnative';
@@ -77,6 +78,12 @@ export const HomeScreen = ({
               navigation.navigate(InboxMessagesScreenName);
             }}
           />
+          <Button
+            title="Visual Inbox (UI)"
+            onPress={() => {
+              navigation.navigate(VisualInboxScreenName);
+            }}
+          />
           <Button
             title="Location (test)"
             onPress={() => navigation.navigate(LocationScreenName)}
diff --git a/example/src/screens/index.ts b/example/src/screens/index.ts
index da9805a0..3744b0e3 100644
--- a/example/src/screens/index.ts
+++ b/example/src/screens/index.ts
@@ -8,3 +8,4 @@ export * from './location';
 export * from './login';
 export * from './settings';
 export * from './track';
+export * from './visual-inbox';
diff --git a/example/src/screens/visual-inbox.tsx b/example/src/screens/visual-inbox.tsx
new file mode 100644
index 00000000..baa62616
--- /dev/null
+++ b/example/src/screens/visual-inbox.tsx
@@ -0,0 +1,156 @@
+import { NavigationScreenProps } from '@navigation';
+import {
+  CustomerIO,
+  InboxEventType,
+  NotificationInboxBellView,
+  NotificationInboxOverlayView,
+  NotificationInboxView,
+} from 'customerio-reactnative';
+import React, { useEffect, useState } from 'react';
+import {
+  Modal,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { showMessage } from 'react-native-flash-message';
+
+/**
+ * Demonstrates the three native Visual Notification Inbox UI components exposed by the SDK:
+ *
+ * 1. NotificationInboxOverlayView — drop-in floating bell + slide-out panel.
+ * 2. NotificationInboxBellView    — just the bell; this screen opens its own modal.
+ * 3. NotificationInboxView        — the Jist-rendered message list embedded inline.
+ *
+ * Message actions are handled by the global InboxEventListener (configured elsewhere), so these
+ * components take no per-message action callbacks.
+ */
+export const VisualInboxScreen = ({}: NavigationScreenProps<'Visual Inbox'>) => {
+  const [showBellModal, setShowBellModal] = useState(false);
+
+  // Register a global inbox event listener while this screen is mounted.
+  // While registered, the host (this app) owns action navigation: the native
+  // SDK forwards taps here and suppresses its default handling.
+  useEffect(() => {
+    const subscription = CustomerIO.inAppMessaging.registerInboxEventListener(
+      (event) => {
+        switch (event.eventType) {
+          case InboxEventType.messageActionTaken:
+            showMessage({
+              message: `Inbox action taken: ${event.actionName ?? ''} -> ${
+                event.actionValue ?? ''
+              }`,
+              type: 'success',
+            });
+            break;
+          case InboxEventType.messageShown:
+            showMessage({ message: 'Inbox message shown', type: 'info' });
+            break;
+          case InboxEventType.messageOpened:
+            showMessage({ message: 'Inbox message opened', type: 'info' });
+            break;
+          case InboxEventType.messageDismissed:
+            showMessage({ message: 'Inbox message dismissed', type: 'info' });
+            break;
+        }
+        // eslint-disable-next-line no-console
+        console.log('Inbox event received', event.eventType, event.message);
+      }
+    );
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return (
+    <View style={styles.root}>
+      <ScrollView contentContainerStyle={styles.content}>
+        {/* 2. Bell only — host presents its own UI on tap. */}
+        <Text style={styles.sectionTitle}>NotificationInboxBellView</Text>
+        <Text style={styles.sectionBody}>
+          Just the bell. Tapping it opens a modal hosting the message list.
+        </Text>
+        <View style={styles.bellRow}>
+          <NotificationInboxBellView
+            style={styles.bell}
+            onTap={() => {
+              showMessage({ message: 'Bell tapped', type: 'info' });
+              setShowBellModal(true);
+            }}
+          />
+        </View>
+
+        {/* 3. Embedded message list. */}
+        <Text style={styles.sectionTitle}>NotificationInboxView</Text>
+        <Text style={styles.sectionBody}>
+          The Jist-rendered message list embedded directly in this screen.
+        </Text>
+        <View style={styles.embeddedList}>
+          <NotificationInboxView style={styles.fill} />
+        </View>
+      </ScrollView>
+
+      {/* 1. Drop-in overlay (floating bell + slide-out panel) layered over the whole screen. */}
+      <NotificationInboxOverlayView
+        style={StyleSheet.absoluteFill}
+        pointerEvents="box-none"
+      />
+
+      {/* Modal opened by the standalone bell. */}
+      <Modal
+        visible={showBellModal}
+        animationType="slide"
+        onRequestClose={() => setShowBellModal(false)}
+      >
+        <View style={styles.modalRoot}>
+          <View style={styles.modalHeader}>
+            <Text style={styles.modalTitle}>Inbox</Text>
+            <TouchableOpacity onPress={() => setShowBellModal(false)}>
+              <Text style={styles.modalClose}>Close</Text>
+            </TouchableOpacity>
+          </View>
+          <NotificationInboxView style={styles.fill} />
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: '#f5f5f5' },
+  content: { padding: 16, gap: 8 },
+  fill: { flex: 1 },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#333',
+    marginTop: 12,
+  },
+  sectionBody: { fontSize: 13, color: '#666', marginBottom: 4 },
+  bellRow: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingVertical: 8,
+  },
+  bell: { width: 56, height: 56 },
+  embeddedList: {
+    height: 360,
+    backgroundColor: '#fff',
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+  modalRoot: { flex: 1, backgroundColor: '#fff' },
+  modalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 16,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#ddd',
+  },
+  modalTitle: { fontSize: 18, fontWeight: 'bold', color: '#333' },
+  modalClose: { fontSize: 16, color: '#2196F3', fontWeight: '600' },
+});

From c3e64320bd1622ed24df66bc9a48f63ef95b0648 Mon Sep 17 00:00:00 2001
From: Mahmoud Elmorabea <mahmoud.elmorabea@gmail.com>
Date: Wed, 29 Jul 2026 17:20:47 +0300
Subject: [PATCH 2/2] feat(sample): Visual Inbox demo for the bell + list
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follows the SDK change to two components: the branded bell (which opens the SDK's
own panel) and the message list. The screen no longer presents any inbox UI of its
own — the hand-rolled modal it used to open from the bell is gone, since that was
demonstrating a "host presents its own UI" path the wrappers no longer expose.

- No ScrollView wrapper. NotificationInboxView scrolls its own list, and a parent
  ScrollView intercepts the drag before the native list sees it.
- Bell sized 88 square: the native composition insets its 56 bell by 16 per side,
  so a 56 box squeezes the circle onto the glyph.
- messageActionTaken now routes actionValue through Linking.openURL, as the SDK
  would. While a host listener is registered the SDK suppresses its own deep-link
  handling, so previously a CTA only produced a toast and never navigated.
- App.tsx registers the inbox screens for deep links (signed-in map only, so an
  anonymous link lands on Login rather than an empty inbox).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 example/src/App.tsx                  |   4 +
 example/src/screens/visual-inbox.tsx | 106 +++++++++++----------------
 2 files changed, 47 insertions(+), 63 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 2a950efb..0826908e 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -36,6 +36,10 @@ export default function App({ appName }: { appName: string }) {
     ? {
       Home: 'home',
       Settings: 'settings',
+      // Inbox screens are signed-in only: the inbox is per-profile, so an anonymous
+      // deep link should land on Login rather than an empty inbox.
+      'Inbox Messages': 'inbox-messages',
+      'Visual Inbox': 'visual-inbox',
     }
     : {
       Login: 'login',
diff --git a/example/src/screens/visual-inbox.tsx b/example/src/screens/visual-inbox.tsx
index baa62616..fb2ad6eb 100644
--- a/example/src/screens/visual-inbox.tsx
+++ b/example/src/screens/visual-inbox.tsx
@@ -3,32 +3,24 @@ import {
   CustomerIO,
   InboxEventType,
   NotificationInboxBellView,
-  NotificationInboxOverlayView,
   NotificationInboxView,
 } from 'customerio-reactnative';
-import React, { useEffect, useState } from 'react';
-import {
-  Modal,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import React, { useEffect } from 'react';
+import { Linking, StyleSheet, Text, View } from 'react-native';
 import { showMessage } from 'react-native-flash-message';
 
 /**
- * Demonstrates the three native Visual Notification Inbox UI components exposed by the SDK:
+ * Demonstrates the two native Visual Notification Inbox UI components exposed by the SDK:
+ *
+ * 1. NotificationInboxBellView — the branded bell; tapping it opens the SDK's own inbox panel.
+ * 2. NotificationInboxView     — the Jist-rendered message list, placed by this screen.
  *
- * 1. NotificationInboxOverlayView — drop-in floating bell + slide-out panel.
- * 2. NotificationInboxBellView    — just the bell; this screen opens its own modal.
- * 3. NotificationInboxView        — the Jist-rendered message list embedded inline.
+ * The host places both wherever it likes; the SDK owns the panel and all rendering.
  *
  * Message actions are handled by the global InboxEventListener (configured elsewhere), so these
  * components take no per-message action callbacks.
  */
 export const VisualInboxScreen = ({}: NavigationScreenProps<'Visual Inbox'>) => {
-  const [showBellModal, setShowBellModal] = useState(false);
 
   // Register a global inbox event listener while this screen is mounted.
   // While registered, the host (this app) owns action navigation: the native
@@ -44,6 +36,20 @@ export const VisualInboxScreen = ({}: NavigationScreenProps<'Visual Inbox'>) =>
               }`,
               type: 'success',
             });
+            // While a listener is registered the SDK suppresses its own deep-link handling and
+            // treats the action as host-handled, so nothing navigates unless the host does it.
+            // Hand the value to the OS exactly as the SDK would: our own scheme round-trips back
+            // through the NavigationContainer `linking` config, anything else opens externally.
+            if (event.actionValue) {
+              Linking.openURL(event.actionValue).catch((error) => {
+                showMessage({
+                  message: `Could not open ${event.actionValue}`,
+                  type: 'danger',
+                });
+                // eslint-disable-next-line no-console
+                console.warn('Failed to open inbox action deep link', error);
+              });
+            }
             break;
           case InboxEventType.messageShown:
             showMessage({ message: 'Inbox message shown', type: 'info' });
@@ -67,61 +73,43 @@ export const VisualInboxScreen = ({}: NavigationScreenProps<'Visual Inbox'>) =>
 
   return (
     <View style={styles.root}>
-      <ScrollView contentContainerStyle={styles.content}>
-        {/* 2. Bell only — host presents its own UI on tap. */}
-        <Text style={styles.sectionTitle}>NotificationInboxBellView</Text>
-        <Text style={styles.sectionBody}>
-          Just the bell. Tapping it opens a modal hosting the message list.
-        </Text>
+      {/*
+        Deliberately NOT a ScrollView. NotificationInboxView scrolls its own message list, and a parent
+        ScrollView intercepts the vertical drag before the native list sees it. These components are
+        meant to own their screen (or a fixed region of one), not to sit in a scrolling page.
+      */}
+      <View style={styles.content}>
+        {/* 1. Branded bell — tapping it opens the SDK's inbox panel. Host owns placement. */}
         <View style={styles.bellRow}>
+          <Text style={styles.sectionTitle}>NotificationInboxBellView</Text>
           <NotificationInboxBellView
             style={styles.bell}
             onTap={() => {
+              // Observational only: the SDK is already opening its panel.
               showMessage({ message: 'Bell tapped', type: 'info' });
-              setShowBellModal(true);
             }}
           />
         </View>
+        <Text style={styles.sectionBody}>
+          Tapping the bell opens the SDK's inbox panel — this screen presents nothing.
+        </Text>
 
-        {/* 3. Embedded message list. */}
+        {/* 2. The message list, placed inline by this screen. */}
         <Text style={styles.sectionTitle}>NotificationInboxView</Text>
         <Text style={styles.sectionBody}>
-          The Jist-rendered message list embedded directly in this screen.
+          The Jist-rendered message list, filling the rest of the screen.
         </Text>
         <View style={styles.embeddedList}>
           <NotificationInboxView style={styles.fill} />
         </View>
-      </ScrollView>
-
-      {/* 1. Drop-in overlay (floating bell + slide-out panel) layered over the whole screen. */}
-      <NotificationInboxOverlayView
-        style={StyleSheet.absoluteFill}
-        pointerEvents="box-none"
-      />
-
-      {/* Modal opened by the standalone bell. */}
-      <Modal
-        visible={showBellModal}
-        animationType="slide"
-        onRequestClose={() => setShowBellModal(false)}
-      >
-        <View style={styles.modalRoot}>
-          <View style={styles.modalHeader}>
-            <Text style={styles.modalTitle}>Inbox</Text>
-            <TouchableOpacity onPress={() => setShowBellModal(false)}>
-              <Text style={styles.modalClose}>Close</Text>
-            </TouchableOpacity>
-          </View>
-          <NotificationInboxView style={styles.fill} />
-        </View>
-      </Modal>
+      </View>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   root: { flex: 1, backgroundColor: '#f5f5f5' },
-  content: { padding: 16, gap: 8 },
+  content: { flex: 1, padding: 16, gap: 8 },
   fill: { flex: 1 },
   sectionTitle: {
     fontSize: 16,
@@ -132,25 +120,17 @@ const styles = StyleSheet.create({
   sectionBody: { fontSize: 13, color: '#666', marginBottom: 4 },
   bellRow: {
     flexDirection: 'row',
-    justifyContent: 'flex-end',
+    alignItems: 'center',
+    justifyContent: 'space-between',
     paddingVertical: 8,
   },
-  bell: { width: 56, height: 56 },
+  // 88 not 56: the native composition insets the 56dp bell by 16 on each side, so a
+  // 56-square box squeezes the circle down onto the glyph.
+  bell: { width: 88, height: 88 },
   embeddedList: {
-    height: 360,
+    flex: 1,
     backgroundColor: '#fff',
     borderRadius: 8,
     overflow: 'hidden',
   },
-  modalRoot: { flex: 1, backgroundColor: '#fff' },
-  modalHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: 16,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#ddd',
-  },
-  modalTitle: { fontSize: 18, fontWeight: 'bold', color: '#333' },
-  modalClose: { fontSize: 16, color: '#2196F3', fontWeight: '600' },
 });