@namiml/expo-sdk 3.4.6 → 3.4.7-dev.202607230540

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namiml/expo-sdk",
-  "version": "3.4.6",
+  "version": "3.4.7-dev.202607230540",
   "type": "module",
   "description": "Nami Expo SDK — paywall and subscription management for Expo apps",
   "main": "./dist/index.cjs",
@@ -29,8 +29,8 @@
     "prepublishOnly": "yarn clean && yarn build:prod"
   },
   "dependencies": {
-    "@namiml/expo-nami-iap": "3.4.6",
-    "@namiml/sdk-core": "3.4.6",
+    "@namiml/expo-nami-iap": "3.4.7-dev.202607230540",
+    "@namiml/sdk-core": "3.4.7-dev.202607230540",
     "react-native-qrcode-svg": "^6.3.21",
     "react-native-safe-area-context": "^5.6.0",
     "react-native-svg": "^15.15.4"

package/src/components/PaywallScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { ActivityIndicator, BackHandler, View, StyleSheet } from 'react-native';
+import { ActivityIndicator, BackHandler, Keyboard, Pressable, View, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { IPaywall, TPages } from '@namiml/sdk-core';
 import { useFirstFocusReadyContext, usePaywallContext } from '../context/PaywallContext';
@@ -199,46 +199,63 @@ export const PaywallScreen: React.FC<Props> = ({
     );
   }
 
+  // NAM-1933: on phone/tablet, tapping the paywall background (empty area above
+  // the keyboard) dismisses the keyboard. A Pressable wrapping the page content
+  // yields the responder to interactive children (buttons, the text field), so
+  // its onPress fires only for taps on non-interactive/empty areas. TV has no
+  // keyboard, so it renders the content without the Pressable.
+  const isTelevision = ctx.state.formFactor === 'television';
+
+  const pageContent = (
+    <PageFocusWrapper
+      key={`${paywall.id}:${page.name ?? currentPageName}`}
+      {...pageFocusWrapperProps}
+    >
+      {backgroundContainer && (
+        <NamiBackgroundContainer component={backgroundContainer as any} scaleFactor={scaleFactor} onClose={onClose} />
+      )}
+
+      {hasHeader && (
+        <NamiHeader
+          components={header as any}
+          scaleFactor={scaleFactor}
+          onClose={onClose}
+        />
+      )}
+
+      {contentContainer && (
+        <NamiContentContainer
+          component={contentContainer as any}
+          scaleFactor={scaleFactor}
+          onClose={onClose}
+        />
+      )}
+
+      {hasFooter && (
+        <NamiFooter components={footer as any} scaleFactor={scaleFactor} onClose={onClose} />
+      )}
+
+      {shouldHoldForFocus && !focusReady && (
+        <View
+          pointerEvents="none"
+          style={[styles.waitingOverlay, { backgroundColor: waitingOverlayColor }]}
+        />
+      )}
+    </PageFocusWrapper>
+  );
+
   return (
     <View
       style={[styles.screen, { backgroundColor: bgColor }]}
       pointerEvents={interactionEnabled ? 'auto' : 'none'}
     >
-      <PageFocusWrapper
-        key={`${paywall.id}:${page.name ?? currentPageName}`}
-        {...pageFocusWrapperProps}
-      >
-        {backgroundContainer && (
-          <NamiBackgroundContainer component={backgroundContainer as any} scaleFactor={scaleFactor} onClose={onClose} />
-        )}
-
-        {hasHeader && (
-          <NamiHeader
-            components={header as any}
-            scaleFactor={scaleFactor}
-            onClose={onClose}
-          />
-        )}
-
-        {contentContainer && (
-          <NamiContentContainer
-            component={contentContainer as any}
-            scaleFactor={scaleFactor}
-            onClose={onClose}
-          />
-        )}
-
-        {hasFooter && (
-          <NamiFooter components={footer as any} scaleFactor={scaleFactor} onClose={onClose} />
-        )}
-
-        {shouldHoldForFocus && !focusReady && (
-          <View
-            pointerEvents="none"
-            style={[styles.waitingOverlay, { backgroundColor: waitingOverlayColor }]}
-          />
-        )}
-      </PageFocusWrapper>
+      {isTelevision ? (
+        pageContent
+      ) : (
+        <Pressable style={styles.screen} onPress={() => Keyboard.dismiss()} accessible={false}>
+          {pageContent}
+        </Pressable>
+      )}
     </View>
   );
 };