Subscription paywall — hero mark, feature checklist, selectable annual/monthly plan cards with best-value ribbon, trial CTA, and the terms/privacy/restore legal row
import * as React from "react";
import { useState } from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Icon, Text, type IconName } from "@lumioui/ui";
import { AnimatedPressable, cn, useHaptic, usePressAnimation } from "@lumioui/core";
import { HeroGradient, Mount, ROW_STAGGER, ROW_STAGGER_CAP, SERIF, StickyBottomBar } from "../shared";
export interface PaywallFeature {
icon?: IconName;
title: string;
detail?: string;
}
export interface PaywallPlan {
id: string;
/** "Annual" / "Monthly" — the billing period name. */
name: string;
/** "$59.99/yr" — the full billed price. */
price: string;
/** "$4.99/mo" — the normalized per-period framing. */
per?: string;
/** Ribbon text — "BEST VALUE", "SAVE 38%". */
badge?: string;
}
export interface PaywallScreenProps {
productName?: string;
tagline?: string;
features?: PaywallFeature[];
plans?: PaywallPlan[];
/** Days of free trial before billing — drives the CTA + disclaimer copy. */
trialDays?: number;
defaultPlanId?: string;
onSelectPlan?: (plan: PaywallPlan) => void;
onSubscribe?: (plan: PaywallPlan) => void;
onRestore?: () => void;
onClose?: () => void;
onTerms?: () => void;
onPrivacy?: () => void;
}
const DEFAULT_FEATURES: PaywallFeature[] = [
{ icon: "zap", title: "Every Pro component", detail: "Sheets, pickers, viewers — the full motion library." },
{ icon: "shield", title: "Priority support", detail: "Direct line to the team that ships it." },
{ icon: "repeat", title: "Weekly releases", detail: "New components and screens every week." },
{ icon: "check-circle", title: "Commercial license", detail: "Ship it in unlimited client apps." },
];
/** Tag tint per feature — the ref's insight cards each carry a small
* subject chip; here it doubles as the feature icon. */
const FEATURE_TAGS: Partial<Record<IconName, { bg: string; fg: string; label: string }>> = {
zap: { bg: "bg-[#E7E6FB]", fg: "#6C63E8", label: "Motion" },
shield: { bg: "bg-[#E4F4EC]", fg: "#1E9E6A", label: "Care" },
repeat: { bg: "bg-[#E8F0FD]", fg: "#3B7BE0", label: "Fresh" },
"check-circle": { bg: "bg-[#FBEEE2]", fg: "#D97E35", label: "License" },
};
const DEFAULT_PLANS: PaywallPlan[] = [
{ id: "annual", name: "Annual", price: "$59.99/yr", per: "$4.99/mo", badge: "SAVE 37%" },
{ id: "monthly", name: "Monthly", price: "$7.99/mo", per: "$95.88/yr" },
];
/** Gradient pair per plan index — the ref's playbook cards read as a
* carousel of colored tiles; first is the hero, second the alternate. */
const PLAN_TONES = [
{ from: "#8B93F8", to: "#5E68E0" },
{ from: "#F8AC6B", to: "#E8842F" },
{ from: "#7FC4C9", to: "#3E9AA3" },
];
/** Gradient playbook card — big title over a colored field, badge chip up
* top, billing math at the bottom. Selected carries an ink ring. */
function PlanTile({
plan,
tone,
selected,
wide,
onSelect,
}: {
plan: PaywallPlan;
tone: { from: string; to: string };
selected: boolean;
wide: boolean;
onSelect: (plan: PaywallPlan) => void;
}) {
const haptics = useHaptic();
const press = usePressAnimation({ pressedScale: 0.97, fast: true });
return (
<AnimatedPressable
style={press.animatedStyle}
onPressIn={press.onPressIn}
onPressOut={press.onPressOut}
onPress={() => {
haptics.selection();
onSelect(plan);
}}
accessibilityRole="radio"
accessibilityState={{ selected }}
accessibilityLabel={`${plan.name} plan, ${plan.price}${plan.per ? `, ${plan.per}` : ""}`}
className={cn(
"h-44 shrink-0 overflow-hidden rounded-[28px] border-4",
wide ? "w-[60%]" : "w-[40%]",
selected ? "border-[#1B1B26]" : "border-transparent"
)}
>
<HeroGradient from={tone.from} to={tone.to} />
<View className="flex-1 justify-between p-4">
{plan.badge ? (
<View className="flex-row">
<View className="rounded-full bg-white/25 px-2.5 py-1">
<Text className="text-[10px] font-semibold tracking-[0.08em] text-white">
✦ {plan.badge}
</Text>
</View>
</View>
) : (
<View />
)}
<View>
<Text
numberOfLines={1}
className={cn("font-bold leading-6 text-white", wide ? "text-[22px]" : "text-[19px]")}
>
{plan.name}
</Text>
{plan.per ? (
<Text className="mt-0.5 text-xs font-semibold text-white/90">{plan.per}</Text>
) : null}
<Text className="text-[10px] text-white/70">{plan.price} billed</Text>
</View>
</View>
{selected ? (
<View className="absolute right-3 top-3 h-6 w-6 items-center justify-center rounded-full bg-[#1B1B26]">
<Icon name="check" size="sm" color="#fff" />
</View>
) : null}
</AnimatedPressable>
);
}
PlanTile.displayName = "PlanTile";
/** Paywall — the Insights idiom: light canvas, gradient plan cards in a
* peeking strip, tag-chipped feature cards, one dark CTA pill. */
export function PaywallScreen({
productName = "Lumio Pro",
tagline = "Every gesture-driven component, in your repo.",
features = DEFAULT_FEATURES,
plans = DEFAULT_PLANS,
trialDays = 7,
defaultPlanId,
onSelectPlan,
onSubscribe,
onRestore,
onClose,
onTerms,
onPrivacy,
}: PaywallScreenProps) {
const haptics = useHaptic();
const [planId, setPlanId] = useState(
defaultPlanId ?? plans.find((p) => p.badge)?.id ?? plans[0]?.id
);
const plan = plans.find((p) => p.id === planId) ?? plans[0];
const select = (p: PaywallPlan) => {
setPlanId(p.id);
onSelectPlan?.(p);
};
return (
<SafeAreaView className="flex-1 bg-[#EEEDF5]" edges={["top"]}>
{/* Header — restore left (App Store requirement, always visible),
close right. */}
<View className="flex-row items-center justify-between px-4 pb-1 pt-2">
<Button
variant="ghost"
size="sm"
onPress={() => {
haptics.light();
onRestore?.();
}}
accessibilityLabel="Restore purchases"
textClassName="text-[#6E6A80]"
>
Restore
</Button>
{/* Close always renders — a paywall must be dismissible even when
the host hasn't wired onClose yet (App Store requirement). */}
<Button
variant="secondary"
size="icon"
haptic="light"
onPress={() => onClose?.()}
accessibilityLabel="Close paywall"
className="h-9 w-9 rounded-full bg-white"
>
<Icon name="x" size="sm" color="#1B1B26" />
</Button>
</View>
<ScrollView
className="flex-1"
contentContainerClassName="gap-5 px-6 pb-44 pt-1"
showsVerticalScrollIndicator={false}
>
<Mount>
<View className="gap-1">
<Text
variant="h3"
className="text-[#1B1B26]"
accessibilityRole="header"
style={{ fontFamily: SERIF }}
>
{productName}
</Text>
<Text variant="muted" className="text-[#6E6A80]">
{tagline}
</Text>
</View>
</Mount>
{/* Plans — a bleeding strip of gradient tiles, third card peeks. */}
<Mount delay={60}>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerClassName="gap-3 pr-2"
>
{plans.map((p, i) => (
<PlanTile
key={p.id}
plan={p}
tone={PLAN_TONES[i % PLAN_TONES.length]!}
wide={i === 0}
selected={p.id === plan?.id}
onSelect={select}
/>
))}
<View className="h-44 w-10 shrink-0 overflow-hidden rounded-[28px]">
<HeroGradient from="#B7BCE8" to="#8B8FCB" />
<View className="flex-1 justify-end p-3">
<Text className="text-xs font-bold text-white">Life…</Text>
</View>
</View>
</ScrollView>
</Mount>
{/* Feature chips + insight cards — the ref's tag + quote idiom. */}
<Mount delay={100}>
<View className="flex-row items-center gap-2">
<Text className="text-lg font-bold text-[#1B1B26]">What's inside</Text>
<View className="ml-auto flex-row gap-1.5">
<View className="rounded-full bg-[#1B1B26] px-3 py-1">
<Text className="text-[10px] font-semibold text-white">All</Text>
</View>
<View className="rounded-full bg-white px-3 py-1">
<Text className="text-[10px] font-semibold text-[#6E6A80]">Pro</Text>
</View>
</View>
</View>
</Mount>
<View className="gap-2.5">
{features.map((f, i) => {
const tag = (f.icon && FEATURE_TAGS[f.icon]) ?? { bg: "bg-[#E7E6FB]", fg: "#6C63E8", label: "Pro" };
return (
<Mount key={f.title} delay={Math.min(120 + i * ROW_STAGGER, ROW_STAGGER_CAP)}>
<View className="gap-2 rounded-2xl bg-white p-4">
<View className={cn("flex-row self-start rounded-full px-2.5 py-1", tag.bg)}>
<Icon name={f.icon ?? "check"} size="sm" color={tag.fg} />
<Text className="pl-1 text-[10px] font-semibold" style={{ color: tag.fg }}>
{tag.label}
</Text>
</View>
<Text className="text-[15px] font-semibold leading-5 text-[#1B1B26]">
{f.title}
</Text>
{f.detail ? (
<Text className="text-xs leading-snug text-[#6E6A80]">{f.detail}</Text>
) : null}
</View>
</Mount>
);
})}
</View>
{/* Social proof — the review that sells the plan, between
features and price. */}
<Mount delay={140}>
<View className="gap-2 rounded-2xl bg-white p-4">
<View className="flex-row gap-0.5">
{[0, 1, 2, 3, 4].map((i) => (
<Icon key={i} name="star" size="sm" color="#F59E0B" filled />
))}
</View>
<Text className="text-sm italic text-[#4A4760]">
"Swapped three half-built kits for this — shipping in half the time."
</Text>
<Text className="text-xs text-[#9B97AD]">— Priya N., indie dev</Text>
</View>
</Mount>
</ScrollView>
{/* CTA + billing terms — trial mechanics above the price ask, the
way Runna/ParrotPal structure it. */}
<StickyBottomBar className="bg-[#EEEDF5]">
<Button
size="lg"
haptic="medium"
className="bg-[#1B1B26]"
textClassName="text-white"
onPress={() => plan && onSubscribe?.(plan)}
accessibilityLabel={
trialDays > 0
? `Start ${trialDays}-day free trial, then ${plan?.price}`
: `Subscribe, ${plan?.price}`
}
>
{trialDays > 0 ? `Start ${trialDays}-day free trial` : "Continue"}
</Button>
{trialDays > 0 && plan ? (
<Text variant="muted" className="mt-2 text-center text-xs text-[#6E6A80]">
{trialDays} days free, then {plan.price}. Cancel anytime.
</Text>
) : null}
<View className="mt-3 flex-row items-center justify-center gap-4">
<Button variant="ghost" size="sm" haptic={false} onPress={onTerms} textClassName="text-[#6E6A80]">
Terms
</Button>
<View className="h-3 w-px bg-[#D9D7E4]" />
<Button variant="ghost" size="sm" haptic={false} onPress={onPrivacy} textClassName="text-[#6E6A80]">
Privacy
</Button>
</View>
</StickyBottomBar>
</SafeAreaView>
);
}
PaywallScreen.displayName = "PaywallScreen";
Recreate the "Paywall Screen" screen in React Native using LumioUI.
Goal: Subscription paywall — hero mark, feature checklist, selectable annual/monthly plan cards with best-value ribbon, trial CTA, and the terms/privacy/restore legal row Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.
## Setup
Fastest path — install the screen plus its component deps:
```bash
npx lumioui add core-paywall
```
Or pull just the components: `npx lumioui add badge button icon text`
Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
- nativewind@*
Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.
## Components — how, where, when
### `badge` — Compact status pill with variants, icons and pulse option.
- imported but not rendered directly — likely used through a sibling or as a utility
### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×5
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×4
### `text` — Themed type scale from caption to display.
- `<Text>` ×16
## Conventions (non-negotiable)
- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.
## Deliverable
One file: `screens/core/paywall.tsx` exporting PaywallScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.
## Reference implementation
The LumioUI source for this screen — reproduce it faithfully:
```tsx
import * as React from "react";
import { useState } from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Icon, Text, type IconName } from "@lumioui/ui";
import { AnimatedPressable, cn, useHaptic, usePressAnimation } from "@lumioui/core";
import { HeroGradient, Mount, ROW_STAGGER, ROW_STAGGER_CAP, SERIF, StickyBottomBar } from "../shared";
export interface PaywallFeature {
icon?: IconName;
title: string;
detail?: string;
}
export interface PaywallPlan {
id: string;
/** "Annual" / "Monthly" — the billing period name. */
name: string;
/** "$59.99/yr" — the full billed price. */
price: string;
/** "$4.99/mo" — the normalized per-period framing. */
per?: string;
/** Ribbon text — "BEST VALUE", "SAVE 38%". */
badge?: string;
}
export interface PaywallScreenProps {
productName?: string;
tagline?: string;
features?: PaywallFeature[];
plans?: PaywallPlan[];
/** Days of free trial before billing — drives the CTA + disclaimer copy. */
trialDays?: number;
defaultPlanId?: string;
onSelectPlan?: (plan: PaywallPlan) => void;
onSubscribe?: (plan: PaywallPlan) => void;
onRestore?: () => void;
onClose?: () => void;
onTerms?: () => void;
onPrivacy?: () => void;
}
const DEFAULT_FEATURES: PaywallFeature[] = [
{ icon: "zap", title: "Every Pro component", detail: "Sheets, pickers, viewers — the full motion library." },
{ icon: "shield", title: "Priority support", detail: "Direct line to the team that ships it." },
{ icon: "repeat", title: "Weekly releases", detail: "New components and screens every week." },
{ icon: "check-circle", title: "Commercial license", detail: "Ship it in unlimited client apps." },
];
/** Tag tint per feature — the ref's insight cards each carry a small
* subject chip; here it doubles as the feature icon. */
const FEATURE_TAGS: Partial<Record<IconName, { bg: string; fg: string; label: string }>> = {
zap: { bg: "bg-[#E7E6FB]", fg: "#6C63E8", label: "Motion" },
shield: { bg: "bg-[#E4F4EC]", fg: "#1E9E6A", label: "Care" },
repeat: { bg: "bg-[#E8F0FD]", fg: "#3B7BE0", label: "Fresh" },
"check-circle": { bg: "bg-[#FBEEE2]", fg: "#D97E35", label: "License" },
};
const DEFAULT_PLANS: PaywallPlan[] = [
{ id: "annual", name: "Annual", price: "$59.99/yr", per: "$4.99/mo", badge: "SAVE 37%" },
{ id: "monthly", name: "Monthly", price: "$7.99/mo", per: "$95.88/yr" },
];
/** Gradient pair per plan index — the ref's playbook cards read as a
* carousel of colored tiles; first is the hero, second the alternate. */
const PLAN_TONES = [
{ from: "#8B93F8", to: "#5E68E0" },
{ from: "#F8AC6B", to: "#E8842F" },
{ from: "#7FC4C9", to: "#3E9AA3" },
];
/** Gradient playbook card — big title over a colored field, badge chip up
* top, billing math at the bottom. Selected carries an ink ring. */
function PlanTile({
plan,
tone,
selected,
wide,
onSelect,
}: {
plan: PaywallPlan;
tone: { from: string; to: string };
selected: boolean;
wide: boolean;
onSelect: (plan: PaywallPlan) => void;
}) {
const haptics = useHaptic();
const press = usePressAnimation({ pressedScale: 0.97, fast: true });
return (
<AnimatedPressable
style={press.animatedStyle}
onPressIn={press.onPressIn}
onPressOut={press.onPressOut}
onPress={() => {
haptics.selection();
onSelect(plan);
}}
accessibilityRole="radio"
accessibilityState={{ selected }}
accessibilityLabel={`${plan.name} plan, ${plan.price}${plan.per ? `, ${plan.per}` : ""}`}
className={cn(
"h-44 shrink-0 overflow-hidden rounded-[28px] border-4",
wide ? "w-[60%]" : "w-[40%]",
selected ? "border-[#1B1B26]" : "border-transparent"
)}
>
<HeroGradient from={tone.from} to={tone.to} />
<View className="flex-1 justify-between p-4">
{plan.badge ? (
<View className="flex-row">
<View className="rounded-full bg-white/25 px-2.5 py-1">
<Text className="text-[10px] font-semibold tracking-[0.08em] text-white">
✦ {plan.badge}
</Text>
</View>
</View>
) : (
<View />
)}
<View>
<Text
numberOfLines={1}
className={cn("font-bold leading-6 text-white", wide ? "text-[22px]" : "text-[19px]")}
>
{plan.name}
</Text>
{plan.per ? (
<Text className="mt-0.5 text-xs font-semibold text-white/90">{plan.per}</Text>
) : null}
<Text className="text-[10px] text-white/70">{plan.price} billed</Text>
</View>
</View>
{selected ? (
<View className="absolute right-3 top-3 h-6 w-6 items-center justify-center rounded-full bg-[#1B1B26]">
<Icon name="check" size="sm" color="#fff" />
</View>
) : null}
</AnimatedPressable>
);
}
PlanTile.displayName = "PlanTile";
/** Paywall — the Insights idiom: light canvas, gradient plan cards in a
* peeking strip, tag-chipped feature cards, one dark CTA pill. */
export function PaywallScreen({
productName = "Lumio Pro",
tagline = "Every gesture-driven component, in your repo.",
features = DEFAULT_FEATURES,
plans = DEFAULT_PLANS,
trialDays = 7,
defaultPlanId,
onSelectPlan,
onSubscribe,
onRestore,
onClose,
onTerms,
onPrivacy,
}: PaywallScreenProps) {
const haptics = useHaptic();
const [planId, setPlanId] = useState(
defaultPlanId ?? plans.find((p) => p.badge)?.id ?? plans[0]?.id
);
const plan = plans.find((p) => p.id === planId) ?? plans[0];
const select = (p: PaywallPlan) => {
setPlanId(p.id);
onSelectPlan?.(p);
};
return (
<SafeAreaView className="flex-1 bg-[#EEEDF5]" edges={["top"]}>
{/* Header — restore left (App Store requirement, always visible),
close right. */}
<View className="flex-row items-center justify-between px-4 pb-1 pt-2">
<Button
variant="ghost"
size="sm"
onPress={() => {
haptics.light();
onRestore?.();
}}
accessibilityLabel="Restore purchases"
textClassName="text-[#6E6A80]"
>
Restore
</Button>
{/* Close always renders — a paywall must be dismissible even when
the host hasn't wired onClose yet (App Store requirement). */}
<Button
variant="secondary"
size="icon"
haptic="light"
onPress={() => onClose?.()}
accessibilityLabel="Close paywall"
className="h-9 w-9 rounded-full bg-white"
>
<Icon name="x" size="sm" color="#1B1B26" />
</Button>
</View>
<ScrollView
className="flex-1"
contentContainerClassName="gap-5 px-6 pb-44 pt-1"
showsVerticalScrollIndicator={false}
>
<Mount>
<View className="gap-1">
<Text
variant="h3"
className="text-[#1B1B26]"
accessibilityRole="header"
style={{ fontFamily: SERIF }}
>
{productName}
</Text>
<Text variant="muted" className="text-[#6E6A80]">
{tagline}
</Text>
</View>
</Mount>
{/* Plans — a bleeding strip of gradient tiles, third card peeks. */}
<Mount delay={60}>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerClassName="gap-3 pr-2"
>
{plans.map((p, i) => (
<PlanTile
key={p.id}
plan={p}
tone={PLAN_TONES[i % PLAN_TONES.length]!}
wide={i === 0}
selected={p.id === plan?.id}
onSelect={select}
/>
))}
<View className="h-44 w-10 shrink-0 overflow-hidden rounded-[28px]">
<HeroGradient from="#B7BCE8" to="#8B8FCB" />
<View className="flex-1 justify-end p-3">
<Text className="text-xs font-bold text-white">Life…</Text>
</View>
</View>
</ScrollView>
</Mount>
{/* Feature chips + insight cards — the ref's tag + quote idiom. */}
<Mount delay={100}>
<View className="flex-row items-center gap-2">
<Text className="text-lg font-bold text-[#1B1B26]">What's inside</Text>
<View className="ml-auto flex-row gap-1.5">
<View className="rounded-full bg-[#1B1B26] px-3 py-1">
<Text className="text-[10px] font-semibold text-white">All</Text>
</View>
<View className="rounded-full bg-white px-3 py-1">
<Text className="text-[10px] font-semibold text-[#6E6A80]">Pro</Text>
</View>
</View>
</View>
</Mount>
<View className="gap-2.5">
{features.map((f, i) => {
const tag = (f.icon && FEATURE_TAGS[f.icon]) ?? { bg: "bg-[#E7E6FB]", fg: "#6C63E8", label: "Pro" };
return (
<Mount key={f.title} delay={Math.min(120 + i * ROW_STAGGER, ROW_STAGGER_CAP)}>
<View className="gap-2 rounded-2xl bg-white p-4">
<View className={cn("flex-row self-start rounded-full px-2.5 py-1", tag.bg)}>
<Icon name={f.icon ?? "check"} size="sm" color={tag.fg} />
<Text className="pl-1 text-[10px] font-semibold" style={{ color: tag.fg }}>
{tag.label}
</Text>
</View>
<Text className="text-[15px] font-semibold leading-5 text-[#1B1B26]">
{f.title}
</Text>
{f.detail ? (
<Text className="text-xs leading-snug text-[#6E6A80]">{f.detail}</Text>
) : null}
</View>
</Mount>
);
})}
</View>
{/* Social proof — the review that sells the plan, between
features and price. */}
<Mount delay={140}>
<View className="gap-2 rounded-2xl bg-white p-4">
<View className="flex-row gap-0.5">
{[0, 1, 2, 3, 4].map((i) => (
<Icon key={i} name="star" size="sm" color="#F59E0B" filled />
))}
</View>
<Text className="text-sm italic text-[#4A4760]">
"Swapped three half-built kits for this — shipping in half the time."
</Text>
<Text className="text-xs text-[#9B97AD]">— Priya N., indie dev</Text>
</View>
</Mount>
</ScrollView>
{/* CTA + billing terms — trial mechanics above the price ask, the
way Runna/ParrotPal structure it. */}
<StickyBottomBar className="bg-[#EEEDF5]">
<Button
size="lg"
haptic="medium"
className="bg-[#1B1B26]"
textClassName="text-white"
onPress={() => plan && onSubscribe?.(plan)}
accessibilityLabel={
trialDays > 0
? `Start ${trialDays}-day free trial, then ${plan?.price}`
: `Subscribe, ${plan?.price}`
}
>
{trialDays > 0 ? `Start ${trialDays}-day free trial` : "Continue"}
</Button>
{trialDays > 0 && plan ? (
<Text variant="muted" className="mt-2 text-center text-xs text-[#6E6A80]">
{trialDays} days free, then {plan.price}. Cancel anytime.
</Text>
) : null}
<View className="mt-3 flex-row items-center justify-center gap-4">
<Button variant="ghost" size="sm" haptic={false} onPress={onTerms} textClassName="text-[#6E6A80]">
Terms
</Button>
<View className="h-3 w-px bg-[#D9D7E4]" />
<Button variant="ghost" size="sm" haptic={false} onPress={onPrivacy} textClassName="text-[#6E6A80]">
Privacy
</Button>
</View>
</StickyBottomBar>
</SafeAreaView>
);
}
PaywallScreen.displayName = "PaywallScreen";
```
Screen: https://lumioui.dev/screens/core-paywall