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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namiml/expo-sdk",
-  "version": "3.4.7-dev.202607230540",
+  "version": "3.4.7-dev.202607231500",
   "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.7-dev.202607230540",
-    "@namiml/sdk-core": "3.4.7-dev.202607230540",
+    "@namiml/expo-nami-iap": "3.4.7-dev.202607231500",
+    "@namiml/sdk-core": "3.4.7-dev.202607231500",
     "react-native-qrcode-svg": "^6.3.21",
     "react-native-safe-area-context": "^5.6.0",
     "react-native-svg": "^15.15.4"

package/src/components/elements/NamiTextInput.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { TextInput, View, Text } from 'react-native';
 import type { ViewStyle } from 'react-native';
 import {
@@ -6,7 +6,9 @@ import {
   getDeviceFormFactor,
   validateTextInput,
 } from '@namiml/sdk-core';
-import { usePaywallContext } from '../../context/PaywallContext';
+import { useFirstFocusReadyContext, usePaywallContext } from '../../context/PaywallContext';
+import { useFocusEnabled, useRegisterPreferredFocus } from '../../context/FocusContext';
+import { useTVPreferredFocus } from '../../utils/tvFocus';
 import {
   paddingAndMarginStyles,
   parseColor,
@@ -18,6 +20,7 @@ import {
 } from '../../utils/styles';
 import {
   TV_DEFAULTS,
+  resolveAutoFocus,
   resolveInputVisual,
   resolveLabelText,
   resolveSpacing,
@@ -45,11 +48,23 @@ interface Props {
  * Styling follows the 4-state precedence (error > focused > filled > empty) and TV
  * defaults, resolved in the pure `./textInputStyle` helpers. Form-factor detection
  * goes through core's `getDeviceFormFactor()` (honors `Nami.configure({ formFactor })`).
+ *
+ * `component.focused` (NAM-1529) drives autofocus on mount, mirroring the
+ * `NamiButton` `focused` precedent: `useTVPreferredFocus` (utils/tvFocus.ts) calls
+ * `.focus()` on mobile (raises the keyboard) but is a no-op on TV, where
+ * `hasTVPreferredFocus` sets d-pad focus only. The `focused` useState below is
+ * unrelated — it only drives the 4-state visual precedence.
  */
 export const NamiTextInput: React.FC<Props> = ({ component, scaleFactor, parentDirection }) => {
   const ctx = usePaywallContext();
+  const focusReadyCtx = useFirstFocusReadyContext();
+  const focusEnabled = useFocusEnabled();
   const formId = component.formId;
   const [focused, setFocused] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+  const autoFocus = resolveAutoFocus(component, focusEnabled);
+  useTVPreferredFocus(inputRef, autoFocus);
+  useRegisterPreferredFocus(inputRef.current, autoFocus);
 
   // Seed form state + register the validator once per field.
   useEffect(() => {
@@ -76,6 +91,14 @@ export const NamiTextInput: React.FC<Props> = ({ component, scaleFactor, parentD
     }
   }, [formId, ctx, component]);
 
+  const handleFocus = useCallback(() => {
+    setFocused(true);
+    const paywallId = ctx.state.selectedPaywall?.id ?? 'unknown';
+    const page = ctx.state.currentPage ?? 'unknown';
+    const formFactor = ctx.state.formFactor;
+    focusReadyCtx.notifyFirstFocusReady(paywallId, page, formFactor);
+  }, [focusReadyCtx, ctx.state.selectedPaywall?.id, ctx.state.currentPage, ctx.state.formFactor]);
+
   const isTelevision = getDeviceFormFactor() === 'television';
   const visual = resolveInputVisual(component, { focused, hasError: !!error, isTelevision });
   const spacing = resolveSpacing(component, isTelevision);
@@ -136,9 +159,10 @@ export const NamiTextInput: React.FC<Props> = ({ component, scaleFactor, parentD
       <View style={wrapperStyle}>
         {showLabel ? <Text style={labelStyle}>{labelText}</Text> : null}
         <TextInput
+          ref={inputRef}
           value={value}
           onChangeText={onChangeText}
-          onFocus={() => setFocused(true)}
+          onFocus={handleFocus}
           onBlur={() => setFocused(false)}
           placeholder={component.placeholderText}
           placeholderTextColor={parseColor(component.placeholderFontColor)}
@@ -146,6 +170,7 @@ export const NamiTextInput: React.FC<Props> = ({ component, scaleFactor, parentD
           autoCapitalize={isEmail ? 'none' : 'sentences'}
           autoCorrect={!isEmail}
           style={inputStyle}
+          hasTVPreferredFocus={autoFocus}
           accessibilityLabel={component.screenreaderText ?? labelText}
           accessibilityHint={component.screenreaderHint}
         />

package/src/components/elements/textInputStyle.ts

@@ -124,3 +124,18 @@ export function resolveSpacing(component: TTextInputComponent, isTelevision: boo
   if (spacing == null) return isTelevision ? TV_DEFAULTS.spacing : 0;
   return Number(spacing);
 }
+
+/**
+ * Whether this field should claim autofocus on mount (NAM-1529), mirroring the
+ * button `focused` precedent (`NamiButton.tsx`): the payload's `focused` flag
+ * only applies while the surrounding focus scope (`useFocusEnabled`) allows it,
+ * so an off-screen/inactive step never steals focus. The mobile-vs-TV split
+ * (keyboard raise vs. d-pad-only) lives in `useTVPreferredFocus`
+ * (utils/tvFocus.ts) — this only decides whether autofocus applies at all.
+ */
+export function resolveAutoFocus(
+  component: Pick<TTextInputComponent, 'focused'>,
+  focusEnabled: boolean,
+): boolean {
+  return focusEnabled && Boolean(component.focused);
+}