@namiml/expo-sdk 3.4.4-dev.202607010315 → 3.4.4-dev.202607012039

package/package.json

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

package/src/components/containers/NamiBackgroundContainer.tsx

@@ -20,6 +20,14 @@ export const NamiBackgroundContainer: React.FC<Props> = ({ component, scaleFacto
 
   const fillImageUrl = resolveFillImageUrl(component.fillImage);
   const bgColor = parseColor(component.fillColor) ?? parseColor(component.fillColorFallback);
+  // Only clip when the container is a filled "tile" with specific (non-all-corners)
+  // rounding (NAM-1798); all-corners / unrounded filled containers stay unclipped so
+  // NC-3948 / NAM-1201 over-rounding is not reintroduced. Matches the Apple/Web gate.
+  const roundBorders = component.roundBorders;
+  const hasSpecificCorners =
+    Array.isArray(roundBorders) && roundBorders.length > 0 && roundBorders.length < 4;
+  const clipStyle: ViewStyle =
+    (component.fillColor || component.fillImage) && hasSpecificCorners ? { overflow: 'hidden' } : {};
 
   const direction = component.direction ?? 'vertical';
   const content = (
@@ -52,7 +60,7 @@ export const NamiBackgroundContainer: React.FC<Props> = ({ component, scaleFacto
       <ImageBackground
         source={{ uri: fillImageUrl }}
         resizeMode='cover'
-        style={[containerStyle, styles.background]}
+        style={[containerStyle, styles.background, clipStyle]}
       >
         {content}
       </ImageBackground>
@@ -60,7 +68,7 @@ export const NamiBackgroundContainer: React.FC<Props> = ({ component, scaleFacto
   }
 
   return (
-    <View style={[containerStyle, bgColor ? { backgroundColor: bgColor } : null, styles.background]}>
+    <View style={[containerStyle, bgColor ? { backgroundColor: bgColor } : null, styles.background, clipStyle]}>
       {content}
     </View>
   );

package/src/components/containers/NamiContainer.tsx

@@ -211,7 +211,14 @@ export const NamiContainer: React.FC<Props> = ({
   const Wrapper = component.onTap ? Pressable : View;
 
   const radiusStyles = pickBorderRadius(containerStyle);
-  const shouldClip = fillImageUrl && Object.keys(radiusStyles).length > 0;
+  // Only clip a filled "tile" with specific (non-all-corners) rounding so a moved
+  // image is cut off at the tile edge (NAM-1798). All-corners / unrounded filled
+  // containers stay unclipped so their overflowing content is not cut off and the
+  // NC-3948 / NAM-1201 over-rounding is not reintroduced. Matches the Apple/Web gate.
+  const roundBorders = component.roundBorders;
+  const hasSpecificCorners =
+    Array.isArray(roundBorders) && roundBorders.length > 0 && roundBorders.length < 4;
+  const shouldClip = Boolean(component.fillColor || component.fillImage) && hasSpecificCorners;
 
   const wrapperStyle = [
     styles.relative,
@@ -246,7 +253,7 @@ export const NamiContainer: React.FC<Props> = ({
           <ImageBackground
             source={{ uri: fillImageUrl }}
             style={StyleSheet.absoluteFill}
-            imageStyle={shouldClip ? radiusStyles : undefined}
+            imageStyle={Object.keys(radiusStyles).length > 0 ? radiusStyles : undefined}
             resizeMode={
               component.fillImage?.imageCropping === 'fit' ? 'contain' : 'cover'
             }

package/src/components/elements/NamiButton.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { Pressable, ActivityIndicator, StyleSheet, View, Linking as RNLinking } from 'react-native';
 import { useFirstFocusReadyContext, usePaywallContext } from '../../context/PaywallContext';
-import { applyStyles, parseColor, childSpacingStyle, extractPrefixedStyles, focusedStyleOverrides, parseSize } from '../../utils/styles';
+import { applyStyles, parseColor, childSpacingStyle, extractPrefixedStyles, focusedStyleOverrides, parseSize, buttonFlexDirection } from '../../utils/styles';
 import {
   handleAction,
   shouldHoist,
@@ -200,6 +200,9 @@ export const NamiButton: React.FC<Props> = ({ component, scaleFactor, onClose, p
     if (base.borderRadius != null) {
       base.overflow = 'hidden';
     }
+    // NAM-2417: a directionless button defaults to horizontal (row). applyStyles uses the
+    // shared flexDirectionFromConfig whose default is 'column'; override for buttons here.
+    base.flexDirection = buttonFlexDirection(component.direction);
     return base;
   }, [component, scaleFactor, disabled, backgroundColor, borderOverride, parentDirection, isFocused ]);
 
@@ -209,7 +212,7 @@ export const NamiButton: React.FC<Props> = ({ component, scaleFactor, onClose, p
     component.sku?.id === (ctx.state as any).productBeingPurchased?.id;
   const renderedChildren = useMemo(() => resolvedChildren.map((child: TComponent, i: number) => {
     const resolvedChild = withDisabledChildStyles(child, disabled);
-    const buttonDirection = component.direction ?? "vertical";
+    const buttonDirection = component.direction ?? "horizontal";
     const spacingStyle =
       i === 0
         ? {}

package/src/utils/styles.ts

@@ -189,6 +189,12 @@ export function flexDirectionFromConfig(dir?: string): ViewStyle['flexDirection'
   }
 }
 
+// NAM-2417: a directionless `button` component defaults to horizontal (icon left of
+// label), unlike containers which default to vertical via flexDirectionFromConfig.
+export function buttonFlexDirection(dir?: string): ViewStyle['flexDirection'] {
+  return flexDirectionFromConfig(dir ?? 'horizontal');
+}
+
 const ALIGNMENT_VALUE_MAP: Record<string, ViewStyle['alignItems']> = {
   top: 'flex-start',
   left: 'flex-start',