@developer_tribe/react-builder 1.2.27 → 1.2.29

package/src/product-base/types.ts

@@ -0,0 +1,183 @@
+/**
+ * Product types for IAP.
+ *
+ * All platform-specific fields (iOS/Android) are included.
+ *
+ * See: `https://www.npmjs.com/package/react-native-iap`
+ */
+
+/** Purchase type: subscription or one-time in-app purchase. */
+export type PurchaseType = 'in-app' | 'subs';
+
+/** Subscription offer type */
+export type SubscriptionOfferType = 'introductory' | 'promotional';
+
+/** Payment mode */
+export type PaymentMode = 'pay-as-you-go' | 'pay-up-front' | 'free-trial';
+
+/** recurrenceMode values from Google Play Billing */
+export type RecurrenceMode = 1 | 2 | 3;
+// 1 = INFINITE_RECURRING (normal subscription)
+// 2 = FINITE_RECURRING (limited cycles, e.g. promo)
+// 3 = NON_RECURRING (one-time, e.g. trial)
+
+/** iOS subscription period unit */
+export type IOSPeriodUnit = 'DAY' | 'WEEK' | 'MONTH' | 'YEAR';
+
+/** Normalized period unit */
+export type PeriodUnit = 'day' | 'week' | 'month' | 'year';
+
+/** A single billing phase (Google Play Billing) */
+export interface PricingPhase {
+  /** ISO 8601 duration (e.g. "P1M", "P1Y", "P7D") */
+  billingPeriod: string;
+  /** How many times this phase repeats (0 = infinite) */
+  billingCycleCount: number;
+  /** Human-readable price (e.g. "$4.99") */
+  formattedPrice: string;
+  /** Price in micros (e.g. "4990000"). "0" = free (trial) */
+  priceAmountMicros: string;
+  /** Currency code (e.g. "USD") */
+  priceCurrencyCode: string;
+  /** Recurrence mode: 1=infinite, 2=finite/promo, 3=one-time/trial */
+  recurrenceMode: RecurrenceMode;
+}
+
+/** Android raw offer details (from Google Play Billing API) */
+export interface AndroidOfferDetails {
+  basePlanId: string;
+  offerId?: string;
+  offerToken: string;
+  offerTags: string[];
+  pricingPhases: {
+    pricingPhaseList: PricingPhase[];
+  };
+}
+
+/** Normalized subscription offer (cross-platform) */
+export interface SubscriptionOffer {
+  id: string;
+  displayPrice: string;
+  price: number;
+  type: SubscriptionOfferType;
+  currency: string;
+  paymentMode?: PaymentMode;
+  periodCount?: number;
+  period?: {
+    unit: PeriodUnit;
+    value: number;
+  };
+  // Android specific
+  basePlanIdAndroid?: string;
+  offerTokenAndroid?: string;
+  offerTagsAndroid?: string[];
+  pricingPhasesAndroid?: {
+    pricingPhaseList: PricingPhase[];
+  };
+}
+
+/** iOS introductory price */
+export interface IOSIntroductoryPrice {
+  price: string;
+  priceIOS?: string;
+  type: 'free_trial' | 'pay_as_you_go' | 'pay_up_front';
+  numberOfPeriods: number;
+  subscriptionPeriod?: IOSPeriodUnit;
+  subscriptionPeriodUnitIOS?: IOSPeriodUnit;
+  subscriptionPeriodNumberIOS?: number;
+}
+
+/** iOS promotional discount */
+export interface IOSDiscount {
+  identifier: string;
+  price: string;
+  numberOfPeriods: number;
+  subscriptionPeriod: IOSPeriodUnit;
+}
+
+/** Product input coming from builder for membership initialization. */
+export interface ProductInput {
+  store_package_id: string;
+  offer_id?: string;
+  type?: string;
+  is_consumable?: boolean;
+}
+
+/** Unified product representation for IAP */
+export interface Product {
+  /** iOS: `productId`, Android: `id` (normalized to productId) */
+  productId: string;
+  /** Android raw id */
+  id?: string;
+
+  title?: string;
+  description?: string;
+  displayName?: string;
+  displayPrice?: string;
+  localizedPrice?: string;
+  price?: string;
+  currency?: string;
+  currencyCode?: string;
+  platform?: 'android' | 'ios';
+  debugDescription?: string | null;
+
+  /** Offer identifier from builder (Android offer token) */
+  offerId?: string;
+  type?: PurchaseType;
+  isConsumable?: boolean;
+
+  // Android specific
+  nameAndroid?: string;
+  productStatusAndroid?: unknown | null;
+  oneTimePurchaseOfferDetailsAndroid?: unknown | null;
+  discountOffers?: unknown | null;
+  /** Raw Google Play offer details */
+  subscriptionOfferDetailsAndroid?: AndroidOfferDetails[];
+  /** Normalized cross-platform offers */
+  subscriptionOffers?: SubscriptionOffer[];
+
+  // iOS specific
+  introductoryPrice?: IOSIntroductoryPrice;
+  introductoryPriceIOS?: IOSIntroductoryPrice;
+  discounts?: IOSDiscount[];
+  subscriptionPeriodUnitIOS?: IOSPeriodUnit;
+  subscriptionPeriodNumberIOS?: number;
+}
+
+/** Product params exposed as localization variables (e.g. @price, @promoPrice). */
+export interface ProductParams {
+  price: string;
+  promoPrice: string;
+  currency: string;
+  localizedPrice: string;
+  period: string;
+  promoPeriod: string;
+  promoPeriodUnit: string;
+  hasTrial: string;
+  trialPeriod: string;
+  trialPeriodUnit: string;
+  discountPercentage: string;
+  localizedPeriod: string;
+  localizedPromoPeriod: string;
+  localizedPromoPrice: string;
+  localizedCalculatedPrice: string;
+  localizedCalculatedPeriod: string;
+  baseLocalizedPricingText: string;
+  baseLocalizedPromoText: string;
+  productTitle: string;
+  productDescription: string;
+  productCurreny: string;
+  productId: string;
+  productSelected: string;
+}
+
+/** Keys excluded from single (per-option) params — these are global/context-level. */
+type SingleExcludedKeys = 'productId' | 'productSelected';
+
+/** Per-option (single product) params — same keys as ProductParams prefixed with `single`. */
+export type SingleProductParams = {
+  [K in keyof Omit<
+    ProductParams,
+    SingleExcludedKeys
+  > as `single${Capitalize<K>}`]: ProductParams[K];
+};

package/src/product-base/usePaywallLocalizationParams.ts

@@ -0,0 +1,61 @@
+/**
+ * Generic React hook for extracting paywall localization params.
+ *
+ * All runtime dependencies (platform, localize, builderProducts) are injected
+ * via the `config` parameter — no hard-coded imports to any specific project.
+ *
+ * Usage (React Native / core):
+ *   usePaywallLocalizationParams(product, productId, {
+ *     platform: Platform.OS,
+ *     localize: (key) => localize(key),
+ *     builderProducts: builder.products,
+ *   })
+ *
+ * Usage (Web builder):
+ *   usePaywallLocalizationParams(product, productId, {
+ *     platform: device.platform,
+ *     localize,
+ *   })
+ */
+
+import { useMemo } from 'react';
+import { buildPaywallLocalizationParams } from './buildPaywallLocalizationParams';
+import type { Product, ProductInput, ProductParams } from './types';
+
+export type PaywallLocalizationConfig = {
+  /** 'ios' | 'android' — RN: Platform.OS, Web: device.platform */
+  platform: 'ios' | 'android';
+  /** Translates a localization key to a display string. Falls back to identity. */
+  localize?: (key: string) => string;
+  /** Builder product definitions — used to resolve offer_id for a product. */
+  builderProducts?: ProductInput[];
+};
+
+export function usePaywallLocalizationParams(
+  selectedProduct?: Product,
+  selectedProductId?: string,
+  config?: PaywallLocalizationConfig,
+): Partial<ProductParams> {
+  return useMemo(() => {
+    if (!selectedProduct || !config?.platform) {
+      return {};
+    }
+
+    try {
+      const builderProduct = config.builderProducts?.find(
+        (p) => p.store_package_id === selectedProductId,
+      );
+      const offerId = builderProduct?.offer_id;
+
+      return buildPaywallLocalizationParams(
+        selectedProduct,
+        config.platform,
+        offerId,
+        config.localize,
+      );
+    } catch (error) {
+      console.error('[usePaywallLocalizationParams] Error:', error);
+      return {};
+    }
+  }, [selectedProduct, selectedProductId, config]);
+}

package/src/store.ts

@@ -1,7 +1,12 @@
 import { createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import type { Device } from './types/Device';
-import { defaultAppConfig, type AppConfig } from './types/PreviewConfig';
+import {
+  defaultAppConfig,
+  defaultTheme,
+  type AppConfig,
+  type Theme,
+} from './types/PreviewConfig';
 import { getDefaultDevice } from './utils/getDevices';
 import { createJSONStorage, persist } from 'zustand/middleware';
 import { Node } from './types/Node';
@@ -28,6 +33,12 @@ type RenderStore = {
   setAppConfig: (appConfig: AppConfig) => void;
   projectColors?: ProjectColors;
   setProjectColors: (projectColors?: ProjectColors) => void;
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  defaultLanguage: string;
+  setDefaultLanguage: (lang: string) => void;
+  isRtl: boolean;
+  setIsRtl: (isRtl: boolean) => void;
   previewMode: boolean;
   setPreviewMode: (previewMode: boolean) => void;
   // Mockable: products (persisted)
@@ -99,6 +110,12 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
       setAppConfig: (appConfig) => set({ appConfig }),
       projectColors: undefined,
       setProjectColors: (projectColors) => set({ projectColors }),
+      theme: defaultTheme,
+      setTheme: (theme) => set({ theme }),
+      defaultLanguage: 'en',
+      setDefaultLanguage: (lang) => set({ defaultLanguage: lang }),
+      isRtl: false,
+      setIsRtl: (isRtl) => set({ isRtl }),
       previewMode: false,
       setPreviewMode: (previewMode) => set({ previewMode }),
       products: [],

package/src/styles/index.scss

@@ -27,5 +27,6 @@
 @use './modals/product-presets-modal';
 @use './modals/benefit-edit-modal';
 @use './modals/benefit-presets-modal';
+@use './modals/inspect-modal';
 
 @use './utilities/carousel';

package/src/styles/modals/_inspect-modal.scss

@@ -0,0 +1,155 @@
+@use '../foundation/colors' as colors;
+@use '../foundation/sizes' as sizes;
+
+.inspect-modal__content {
+  width: calc(100vw - 32px);
+  height: calc(100vh - 64px);
+  max-width: 900px;
+  max-height: calc(100vh - 64px);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.inspect-modal__header {
+  padding: sizes.$spaceComfy sizes.$spaceRoomy;
+  border-bottom: 1px solid colors.$borderColor;
+}
+
+.inspect-modal__tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid colors.$borderColor;
+  padding: 0 sizes.$spaceRoomy;
+}
+
+.inspect-modal__tab {
+  all: unset;
+  cursor: pointer;
+  padding: sizes.$spaceCompact sizes.$spaceComfy;
+  font-size: sizes.$fontSizeSmPlus;
+  font-weight: 500;
+  color: colors.$mutedTextColor;
+  border-bottom: 2px solid transparent;
+  transition: color 0.15s, border-color 0.15s;
+
+  &:hover {
+    color: colors.$textColor;
+  }
+
+  &.is-active {
+    color: colors.$accentColor;
+    border-bottom-color: colors.$accentColor;
+  }
+}
+
+.inspect-modal__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: sizes.$spaceRoomy;
+}
+
+.inspect-modal__empty {
+  margin: 0;
+  font-size: sizes.$fontSizeSmPlus;
+  color: colors.$mutedTextColor;
+}
+
+.inspect-modal__section-title {
+  margin: sizes.$spaceComfy 0 sizes.$spaceCompact;
+  font-size: sizes.$fontSizeSmPlus;
+  font-weight: 600;
+  color: colors.$textColor;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+.inspect-modal__table-wrap {
+  display: flex;
+  flex-direction: column;
+}
+
+.inspect-modal__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: sizes.$fontSizeSm;
+
+  th {
+    text-align: left;
+    padding: sizes.$spaceSnug sizes.$spaceCompact;
+    font-weight: 600;
+    color: colors.$mutedTextColor;
+    border-bottom: 1px solid colors.$borderColor;
+    white-space: nowrap;
+  }
+
+  td {
+    padding: sizes.$spaceSnug sizes.$spaceCompact;
+    border-bottom: 1px solid colors.$borderColor;
+    vertical-align: top;
+    color: colors.$textColor;
+  }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+}
+
+.inspect-modal__cell-key {
+  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', monospace;
+  font-size: sizes.$fontSizeXs;
+  word-break: break-all;
+  max-width: 320px;
+}
+
+.inspect-modal__cell-key--nested {
+  padding-left: sizes.$spaceRoomy;
+}
+
+.inspect-modal__cell-value {
+  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', monospace;
+  font-size: sizes.$fontSizeXs;
+  word-break: break-all;
+  display: flex;
+  align-items: center;
+  gap: sizes.$spaceTight;
+}
+
+.inspect-modal__badge {
+  display: inline-block;
+  font-size: sizes.$fontSizeXs;
+  padding: 1px 6px;
+  border-radius: sizes.$radiusSoft;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.inspect-modal__badge--default {
+  background: colors.$muted;
+  color: colors.$mutedTextColor;
+}
+
+.inspect-modal__badge--custom {
+  background: colors.$primary;
+  color: colors.$primaryForeground;
+}
+
+.inspect-modal__color-swatch {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+  border: 1px solid colors.$borderColor;
+  flex-shrink: 0;
+}
+
+.inspect-modal__separator-row td {
+  font-weight: 600;
+  font-size: sizes.$fontSizeSmPlus;
+  color: colors.$mutedTextColor;
+  padding-top: sizes.$spaceComfy;
+  border-bottom: 1px solid colors.$borderColor;
+}

package/src/types/PreviewConfig.ts

@@ -1,24 +1,165 @@
+export type Theme = 'light' | 'dark';
+
 export interface AppConfig {
-  theme: 'light' | 'dark';
-  isRtl: boolean; //This could be device in future
-  screenStyle: {
-    light: { backgroundColor: string; color: string; seperatorColor?: string };
-    dark: { backgroundColor: string; color: string; seperatorColor?: string };
-  };
   localication: Localication;
-  defaultLanguage?: string;
   baseSize: { width: number; height: number };
 }
 
-export const defaultAppConfig: AppConfig = {
-  theme: 'light',
-  isRtl: false,
-  screenStyle: {
-    light: { backgroundColor: '#FDFDFD', color: '#161827' },
-    dark: { backgroundColor: '#12131A', color: '#E9EBF9' },
+export type LocalizationKey =
+  // paywall – period
+  | 'base.builder.paywall.period.monthly'
+  | 'base.builder.paywall.period.annual'
+  | 'base.builder.paywall.period.weekly'
+  | 'base.builder.paywall.period.daily'
+  | 'base.builder.paywall.period.monthlyPromo'
+  | 'base.builder.paywall.period.annualPromo'
+  // paywall – default texts
+  | 'base.builder.paywall.pricing.default.text'
+  | 'base.builder.paywall.pricing.freeTrial.text'
+  | 'base.builder.paywall.pricing.regular.text'
+  | 'base.builder.paywall.promo.default.text'
+  | 'base.builder.paywall.promo.freeTrial.text'
+  | 'base.builder.paywall.promo.regular.text'
+  // onboard – titles
+  | 'onboard.title.one-page'
+  | 'onboard.title.two-page'
+  | 'onboard.title.three-page'
+  | 'onboard.title.four-page'
+  | 'onboard.title.one-page2'
+  | 'onboard.title.two-page2'
+  | 'onboard.title.three-page2'
+  | 'onboard.title.four-page2'
+  // onboard – subtitles
+  | 'onboard.subtitle.one-page'
+  | 'onboard.subtitle.two-page'
+  | 'onboard.subtitle.three-page'
+  | 'onboard.subtitle.four-page'
+  | 'onboard.subtitle.one-page2'
+  | 'onboard.subtitle.two-page2'
+  | 'onboard.subtitle.three-page2'
+  | 'onboard.subtitle.four-page2'
+  // onboard – actions
+  | 'onboard.next.one-page'
+  | 'onboard.next.two-page'
+  | 'onboard.next.three-page'
+  | 'onboard.skip.one-page'
+  | 'onboard.skip.two-page'
+  | 'onboard.skip.three-page'
+  | 'onboard.allow.four-page'
+  // onboard – footer
+  | 'view.onboarding.footer.description'
+  | 'view.onboarding.btnPrivacy'
+  | 'view.onboarding.btnTerms'
+  | (string & {});
+
+export type Localication = Record<
+  string,
+  Partial<Record<LocalizationKey, string>>
+>;
+
+export const defaultLocalization: Localication = {
+  en: {
+    // paywall – period
+    'base.builder.paywall.period.monthly': 'per month',
+    'base.builder.paywall.period.annual': 'per year',
+    'base.builder.paywall.period.weekly': 'per week',
+    'base.builder.paywall.period.daily': 'per day',
+    'base.builder.paywall.period.monthlyPromo': 'per month',
+    'base.builder.paywall.period.annualPromo': 'per year',
+    // paywall – default texts
+    'base.builder.paywall.pricing.default.text':
+      '@promoPrice for the first @promoPeriod, then @localizedPrice @localizedPeriod',
+    'base.builder.paywall.pricing.freeTrial.text':
+      '@trialPeriod-@trialPeriodUnit free trial, then @localizedPrice @localizedPeriod',
+    'base.builder.paywall.pricing.regular.text':
+      '@localizedPrice @localizedPeriod',
+    'base.builder.paywall.promo.default.text': 'Save @discountPercentage%!',
+    'base.builder.paywall.promo.freeTrial.text':
+      '@trialPeriod-@trialPeriodUnit free trial',
+    'base.builder.paywall.promo.regular.text':
+      '@localizedPrice @localizedPeriod',
+    // onboard – titles
+    'onboard.title.one-page': 'Secure your connection',
+    'onboard.title.two-page': 'Access content worldwide',
+    'onboard.title.three-page': 'Fast and reliable',
+    'onboard.title.four-page': 'Stay notified and safe',
+    'onboard.title.one-page2': 'Secure your connection',
+    'onboard.title.two-page2': 'Access content worldwide',
+    'onboard.title.three-page2': 'Fast and reliable',
+    'onboard.title.four-page2': 'Stay notified and safe',
+    // onboard – subtitles
+    'onboard.subtitle.one-page':
+      'Encrypt your traffic and protect your privacy on public Wi\u2011Fi.',
+    'onboard.subtitle.two-page':
+      'Connect to high\u2011speed servers in many countries with one tap.',
+    'onboard.subtitle.three-page':
+      'Auto\u2011connect to the best server for speed and stability.',
+    'onboard.subtitle.four-page':
+      'Enable notifications for connection status and security tips.',
+    'onboard.subtitle.one-page2':
+      'Encrypt your traffic and protect your privacy on public Wi\u2011Fi.',
+    'onboard.subtitle.two-page2':
+      'Connect to high\u2011speed servers in many countries with one tap.',
+    'onboard.subtitle.three-page2':
+      'Auto\u2011connect to the best server for speed and stability.',
+    'onboard.subtitle.four-page2':
+      'Enable notifications for connection status and security tips.',
+    // onboard – actions
+    'onboard.next.one-page': 'Next',
+    'onboard.next.two-page': 'Next',
+    'onboard.next.three-page': 'Next',
+    'onboard.skip.one-page': 'Skip',
+    'onboard.skip.two-page': 'Skip',
+    'onboard.skip.three-page': 'Skip',
+    'onboard.allow.four-page': 'Allow',
+    // onboard – footer
+    'view.onboarding.footer.description':
+      'By clicking continue, you will be accepting the Terms of service and privacy policy',
+    'view.onboarding.btnPrivacy': 'Privacy Policy',
+    'view.onboarding.btnTerms': 'Terms of Service',
+  },
+  tr: {
+    // paywall – period
+    'base.builder.paywall.period.monthly': 'aylık',
+    'base.builder.paywall.period.annual': 'yıllık',
+    'base.builder.paywall.period.weekly': 'haftalık',
+    'base.builder.paywall.period.daily': 'günlük',
+    'base.builder.paywall.period.monthlyPromo': 'aylık',
+    'base.builder.paywall.period.annualPromo': 'yıllık',
+    // paywall – default texts
+    'base.builder.paywall.pricing.default.text':
+      'İlk @promoPeriod için @promoPrice, sonra @localizedPrice @localizedPeriod',
+    'base.builder.paywall.pricing.freeTrial.text':
+      '@trialPeriod @trialPeriodUnit ücretsiz deneme, sonra @localizedPrice @localizedPeriod',
+    'base.builder.paywall.pricing.regular.text':
+      '@localizedPrice @localizedPeriod',
+    'base.builder.paywall.promo.default.text': '%@discountPercentage indirim!',
+    'base.builder.paywall.promo.freeTrial.text':
+      '@trialPeriod @trialPeriodUnit ücretsiz deneme',
+    'base.builder.paywall.promo.regular.text':
+      '@localizedPrice @localizedPeriod',
   },
-  localication: {},
-  baseSize: { width: 375, height: 812 },
 };
 
-export type Localication = Record<string, Record<string, string>>;
+/**
+ * Merges custom localization with base localization.
+ * Custom values override base values on a per-language, per-key basis.
+ */
+export function mergeLocalization(
+  base: Localication,
+  custom: Localication,
+): Localication {
+  const allLanguages = new Set([...Object.keys(base), ...Object.keys(custom)]);
+  const merged: Localication = {};
+  for (const lang of allLanguages) {
+    merged[lang] = { ...(base[lang] || {}), ...(custom[lang] || {}) };
+  }
+  return merged;
+}
+
+export const defaultTheme: Theme = 'light';
+
+export const defaultAppConfig: AppConfig = {
+  localication: defaultLocalization,
+  baseSize: { width: 375, height: 812 },
+};

package/src/utils/extractTextStyle/extractTextStyle.ts

@@ -3,8 +3,8 @@ import type {
   TextPropsGenerated,
   TextStyleGenerated,
 } from '../../build-components/Text/TextProps.generated';
-import type { AppConfig } from '../../types/PreviewConfig';
-import { defaultAppConfig } from '../../types/PreviewConfig';
+import type { Theme } from '../../types/PreviewConfig';
+import { defaultTheme } from '../../types/PreviewConfig';
 import type { ProjectColors } from '../../types/Project';
 import type { Fonts } from '../../types/Fonts';
 import { fs, parseSize } from '../../size-matters';
@@ -85,7 +85,7 @@ function ensureFontWeightLoaded(
 }
 
 export type ExtractTextStyleOptions = {
-  appConfig?: AppConfig;
+  theme?: Theme;
   projectColors?: ProjectColors;
   fonts?: Fonts;
   onFontLoaded?: (fontFamily: string) => void;
@@ -105,10 +105,12 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
     if (direct !== undefined && direct !== null) return direct;
     return styleBag?.[key as keyof TextStyleGenerated];
   };
-  const resolvedAppConfig = options.appConfig ?? defaultAppConfig;
-  const { screenStyle, theme } = resolvedAppConfig;
+  const theme = options.theme ?? defaultTheme;
   const fallbackColor =
-    theme === 'light' ? screenStyle.light.color : screenStyle.dark.color;
+    parseColor('THEME_COLORS.TEXT', {
+      projectColors: options.projectColors,
+      theme,
+    }) ?? 'THEME_COLORS.TEXT';
 
   const style: React.CSSProperties = {};
 
@@ -178,6 +180,11 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   if (textAlign) {
     style.textAlign = textAlign;
   }
+  const textDecorationLine = get('textDecorationLine') as string | undefined;
+  if (textDecorationLine && textDecorationLine !== 'none') {
+    style.textDecorationLine =
+      textDecorationLine as React.CSSProperties['textDecorationLine'];
+  }
 
   const viewStyle = extractViewStyle(node, {
     projectColors: options.projectColors,
@@ -196,6 +203,7 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
       'lineHeight',
       'letterSpacing',
       'textDecoration',
+      'textDecorationLine',
       'textTransform',
     ]);