@namiml/expo-sdk 3.4.5-dev.202607092259 → 3.4.5-dev.202607100416

package/package.json

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

package/src/components/TemplateRenderer.tsx

@@ -83,6 +83,9 @@ function resolveRenderer(rendererKey: string): ComponentRenderer | null {
     case 'NamiToggleSwitch':
       renderer = require('./elements/NamiToggleSwitch').NamiToggleSwitch;
       break;
+    case 'NamiTextInput':
+      renderer = require('./elements/NamiTextInput').NamiTextInput;
+      break;
     case 'NamiRadioButton':
       renderer = require('./elements/NamiRadioButton').NamiRadioButton;
       break;
@@ -221,6 +224,8 @@ function renderResolvedComponent(
       return renderWithKey('NamiSegmentPickerItem', sharedProps);
     case 'toggleSwitch':
       return renderWithKey('NamiToggleSwitch', sharedProps);
+    case 'textInput':
+      return renderWithKey('NamiTextInput', sharedProps);
     case 'radio':
       return renderWithKey('NamiRadioButton', sharedProps);
     case 'progressIndicator':

package/src/components/elements/NamiTextInput.tsx

@@ -0,0 +1,156 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { TextInput, View, Text } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import {
+  type TTextInputComponent,
+  getDeviceFormFactor,
+  validateTextInput,
+} from '@namiml/sdk-core';
+import { usePaywallContext } from '../../context/PaywallContext';
+import {
+  paddingAndMarginStyles,
+  parseColor,
+  parseSize,
+  positionStyles,
+  sizeStyles,
+  textStyles,
+  transformStyles,
+} from '../../utils/styles';
+import {
+  TV_DEFAULTS,
+  resolveInputVisual,
+  resolveLabelText,
+  resolveSpacing,
+  resolveValidator,
+  validatorType,
+} from './textInputStyle';
+
+interface Props {
+  component: TTextInputComponent;
+  scaleFactor: number;
+  onClose?: () => void;
+  parentDirection?: string;
+}
+
+/**
+ * `NamiTextInput` — in-flow text capture for the Expo SDK (NAM-1148).
+ *
+ * Renders a React Native `TextInput` whose value is mirrored into the shared
+ * `PaywallState` via `ctx.setFormState(formId, value)`. The field registers its
+ * validator with PaywallState on mount so the core implicit flow-submit gate
+ * (sdk/core NamiFlow) validates every field before advancing; `setTagsFromForm`
+ * and `{{ form.fieldId }}` then consume the captured value. In-flow capture only —
+ * native-app value handoff is deferred (matches Apple NAM-1142 / Android NAM-1143).
+ *
+ * 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 })`).
+ */
+export const NamiTextInput: React.FC<Props> = ({ component, scaleFactor, parentDirection }) => {
+  const ctx = usePaywallContext();
+  const formId = component.formId;
+  const [focused, setFocused] = useState(false);
+
+  // Seed form state + register the validator once per field.
+  useEffect(() => {
+    if (!formId) return;
+    const seeded = ctx.state.formStates?.[formId];
+    ctx.setFormState(formId, typeof seeded === 'string' ? seeded : '');
+    ctx.registerFormFieldValidator(formId, resolveValidator(component));
+  }, [formId]);
+
+  const rawValue = formId ? ctx.state.formStates?.[formId] : undefined;
+  const value = typeof rawValue === 'string' ? rawValue : '';
+  const error = formId ? ctx.state.formFieldErrors?.[formId] : undefined;
+
+  const onChangeText = useCallback((text: string) => {
+    if (!formId) return;
+    ctx.setFormState(formId, text);
+    if (component.validateOn === 'change') {
+      const message = validateTextInput(validatorType(component), component.reqed === true, text);
+      if (message) {
+        ctx.setFormFieldError(formId, component.validationMessage ?? message);
+      } else {
+        ctx.clearFormFieldError(formId);
+      }
+    }
+  }, [formId, ctx, component]);
+
+  const isTelevision = getDeviceFormFactor() === 'television';
+  const visual = resolveInputVisual(component, { focused, hasError: !!error, isTelevision });
+  const spacing = resolveSpacing(component, isTelevision);
+
+  // The visual box (border / fill / radius / padding) belongs to the TextInput
+  // itself via `resolveInputVisual` (matching the Web sibling). The outer View is
+  // layout-only — position, outer margins/padding, size, transform — so the box is
+  // not painted twice.
+  const containerStyle: ViewStyle = {
+    ...positionStyles(component),
+    ...paddingAndMarginStyles(component, scaleFactor),
+    ...sizeStyles(component, scaleFactor, parentDirection),
+    ...transformStyles(component, scaleFactor),
+    ...(component.zIndex != null ? { zIndex: component.zIndex } : {}),
+  };
+
+  const inputStyle = {
+    ...textStyles(
+      { fontColor: visual.fontColor, fontName: component.fontName, fontSize: visual.fontSize, alignment: component.alignment },
+      scaleFactor,
+    ),
+    width: '100%' as const,
+    borderStyle: 'solid' as const,
+    borderWidth: visual.borderWidth,
+    borderColor: parseColor(visual.borderColor) ?? 'transparent',
+    borderRadius: visual.borderRadius,
+    backgroundColor: parseColor(visual.fillColor) ?? 'transparent',
+    paddingTop: parseSize(visual.padding.top, scaleFactor),
+    paddingRight: parseSize(visual.padding.right, scaleFactor),
+    paddingBottom: parseSize(visual.padding.bottom, scaleFactor),
+    paddingLeft: parseSize(visual.padding.left, scaleFactor),
+  };
+
+  const labelText = resolveLabelText(component);
+  const showLabel = !!labelText;
+  const labelStyle = textStyles(
+    {
+      fontColor: component.labelFontColor,
+      fontName: component.labelFontName,
+      fontSize: component.labelFontSize ?? (isTelevision ? TV_DEFAULTS.fontSize : undefined),
+    },
+    scaleFactor,
+  );
+  const errorStyle = textStyles(
+    {
+      fontColor: component.validationTextFontColor ?? '#D83A58',
+      fontName: component.validationTextFontName,
+      fontSize: component.validationTextFontSize ?? (isTelevision ? TV_DEFAULTS.fontSize : undefined),
+    },
+    scaleFactor,
+  );
+
+  const wrapperStyle: ViewStyle = { flexDirection: 'column', rowGap: spacing || undefined };
+  const isEmail = component.type === 'email';
+
+  return (
+    <View style={containerStyle}>
+      <View style={wrapperStyle}>
+        {showLabel ? <Text style={labelStyle}>{labelText}</Text> : null}
+        <TextInput
+          value={value}
+          onChangeText={onChangeText}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          placeholder={component.placeholderText}
+          placeholderTextColor={parseColor(component.placeholderFontColor)}
+          keyboardType={isEmail ? 'email-address' : 'default'}
+          autoCapitalize={isEmail ? 'none' : 'sentences'}
+          autoCorrect={!isEmail}
+          style={inputStyle}
+          accessibilityLabel={component.screenreaderText ?? labelText}
+          accessibilityHint={component.screenreaderHint}
+        />
+        {error ? <Text style={errorStyle}>{error}</Text> : null}
+      </View>
+    </View>
+  );
+};

package/src/components/elements/textInputStyle.ts

@@ -0,0 +1,126 @@
+/**
+ * Pure, React-Native-agnostic resolution helpers for the Expo Text Input element
+ * (NAM-1148). Kept free of any `react-native` import so they can be unit-tested
+ * under the package's `node` jest environment (see
+ * tests/components/elements/textInputStyle.test.ts).
+ *
+ * These mirror the Web sibling (sdk/web/src/components/elements/TextInput.ts) and
+ * the Apple (NAM-1142) / Android (NAM-1143) native ports: a 4-state style
+ * precedence (error > focused > filled > empty) and larger `television` defaults
+ * applied only where the payload omits a value. Values are returned raw (colors as
+ * payload strings, sizes as numbers); the component applies `parseColor`/`parseSize`.
+ */
+
+import type { TTextInputComponent, TTextInputType, FormFieldValidator } from '@namiml/sdk-core';
+
+/**
+ * TV defaults applied when the form factor is `television` and the payload omits
+ * the value. Mirrors the Web `TV_DEFAULTS` and the native ports.
+ */
+export const TV_DEFAULTS = {
+  borderWidth: 2,
+  borderRadius: 6,
+  width: 500,
+  fontSize: 20,
+  spacing: 16,
+  innerPadding: 16,
+};
+
+export interface ResolvedInputVisual {
+  borderColor: string;
+  borderWidth: number;
+  borderRadius: number;
+  fillColor: string;
+  fontColor?: string;
+  fontSize?: number | string;
+  padding: { top: number; right: number; bottom: number; left: number };
+}
+
+interface StateFlags {
+  focused: boolean;
+  hasError: boolean;
+  isTelevision: boolean;
+}
+
+/** `null`/`undefined` numeric prop → TV fallback (or 0); otherwise `Number(value)`. */
+function resolveBorderWidth(base: number | string | undefined, isTelevision: boolean): number {
+  if (base == null) return isTelevision ? TV_DEFAULTS.borderWidth : 0;
+  return Number(base);
+}
+
+/** Map the wire `type` to the validator's `TTextInputType` (email → email, else name). */
+export function validatorType(component: Pick<TTextInputComponent, 'type'>): TTextInputType {
+  return component.type === 'email' ? 'email' : 'name';
+}
+
+/** Build the field's validator from the (misspelled) `reqed` flag + author message. */
+export function resolveValidator(component: TTextInputComponent): FormFieldValidator {
+  return {
+    type: validatorType(component),
+    required: component.reqed === true,
+    message: component.validationMessage,
+  };
+}
+
+/**
+ * The label to render, or `undefined` when there is no label. Appends ` *` when the
+ * field is required, matching the Web renderer.
+ */
+export function resolveLabelText(component: TTextInputComponent): string | undefined {
+  if (component.labelPosition === 'none') return undefined;
+  if (!component.labelText) return undefined;
+  return component.reqed === true ? `${component.labelText} *` : component.labelText;
+}
+
+/**
+ * Resolve the input's visual properties under the 4-state precedence
+ * error > focused > filled > empty. Filled and empty share the resting style; the
+ * distinction is preserved for parity with the native ports.
+ */
+export function resolveInputVisual(
+  component: TTextInputComponent,
+  { focused, hasError, isTelevision }: StateFlags,
+): ResolvedInputVisual {
+  let borderColor = component.borderColor || 'transparent';
+  let borderWidth = resolveBorderWidth(component.borderWidth, isTelevision);
+  let borderRadius = Number(component.borderRadius ?? (isTelevision ? TV_DEFAULTS.borderRadius : 0));
+  let fillColor = component.fillColor || 'transparent';
+
+  if (focused) {
+    borderColor = component.focusedBorderColor || borderColor;
+    borderWidth = resolveBorderWidth(component.focusedBorderWidth ?? component.borderWidth, isTelevision);
+    borderRadius = Number(component.focusedBorderRadius ?? component.borderRadius ?? borderRadius);
+    fillColor = component.focusedFillColor || fillColor;
+  }
+
+  if (hasError) {
+    borderColor = component.errorBorderColor || borderColor;
+    borderWidth = resolveBorderWidth(component.errorBorderWidth ?? component.borderWidth, isTelevision);
+    borderRadius = Number(component.errorBorderRadius ?? component.borderRadius ?? borderRadius);
+  }
+
+  const fontSize = component.fontSize ?? (isTelevision ? TV_DEFAULTS.fontSize : undefined);
+  const fallbackPad = isTelevision ? TV_DEFAULTS.innerPadding : 0;
+
+  return {
+    borderColor,
+    borderWidth,
+    borderRadius,
+    fillColor,
+    fontColor: component.fontColor,
+    fontSize,
+    padding: {
+      top: Number(component.innerTopPadding ?? fallbackPad),
+      right: Number(component.innerRightPadding ?? fallbackPad),
+      bottom: Number(component.innerBottomPadding ?? fallbackPad),
+      left: Number(component.innerLeftPadding ?? fallbackPad),
+    },
+  };
+}
+
+/** Spacing between label / input / error, in points. TV gets a default gap. */
+export function resolveSpacing(component: TTextInputComponent, isTelevision: boolean): number {
+  const { spacing } = component;
+  if (spacing == null) return isTelevision ? TV_DEFAULTS.spacing : 0;
+  return Number(spacing);
+}

package/src/context/PaywallContext.tsx

@@ -4,7 +4,7 @@ import type {
   IPaywall, ISkuMenu, TPaywallContext, NamiPaywallLaunchContext,
   NamiCampaign, NamiProductDetails, NamiSKU, NamiPaywallEvent,
   TDevice, TimerState, TPaywallMedia, NamiAppSuppliedVideoDetails,
-  NamiFlow,
+  NamiFlow, FormFieldValidator,
 } from '@namiml/sdk-core';
 import { PaywallState, initialState } from '@namiml/sdk-core';
 
@@ -35,6 +35,9 @@ export interface PaywallContextValue {
   setSelectedProducts(products: Record<string, string | null>): void;
   setCurrentFormId(formId: string, value?: string): void;
   setFormState(formId: string, value: boolean | string): void;
+  registerFormFieldValidator(formId: string, validator: FormFieldValidator): void;
+  setFormFieldError(formId: string, message: string): void;
+  clearFormFieldError(formId: string): void;
   setTimerState(timerId: string, remainingSeconds: number, savedAt: number, hasEmittedCompletion: boolean): void;
   getTimerState(timerId: string): TimerState | undefined;
   setProductDetails(details: NamiProductDetails[]): void;
@@ -181,6 +184,15 @@ export const PaywallProvider: React.FC<PaywallProviderProps> = ({
     setFormState: (formId: string, value: boolean | string) => {
       providerRef.current?.setFormState(formId, value);
     },
+    registerFormFieldValidator: (formId: string, validator: FormFieldValidator) => {
+      providerRef.current?.registerFormFieldValidator(formId, validator);
+    },
+    setFormFieldError: (formId: string, message: string) => {
+      providerRef.current?.setFormFieldError(formId, message);
+    },
+    clearFormFieldError: (formId: string) => {
+      providerRef.current?.clearFormFieldError(formId);
+    },
     setTimerState: (timerId: string, remainingSeconds: number, savedAt: number, hasEmittedCompletion: boolean) => {
       providerRef.current?.setTimerState(timerId, remainingSeconds, savedAt, hasEmittedCompletion);
     },

package/src/index.ts

@@ -54,6 +54,10 @@ export type {
   CustomerJourneyState,
   NamiProductDetails,
   NamiFlow,
+  // Text Input component (NAM-1148) — typing parity with the native/Web ports.
+  TTextInputComponent,
+  TTextInputType,
+  FormFieldValidator,
   IPurchaseAdapter,
   PurchaseContext,
   PurchaseResult,