@leisuresaas/react-native 0.6.2

package/src/ads/default-theme.ts

@@ -0,0 +1,284 @@
+import { StyleSheet, type TextStyle } from "react-native";
+
+import type { AdLayout, AdType, ImageLayout, TextLayout } from "./constants";
+import { IMAGE_LAYOUTS, TEXT_LAYOUTS } from "./constants";
+import type { AdCreativeStyles, AdLayoutStyles, AdsStateStyles, AdsTheme, AdRotationStyles, ResolvedAdsTheme } from "./theme";
+
+export const defaultCreativeStyles = StyleSheet.create({
+  root: {
+    position: "relative",
+    overflow: "hidden",
+    borderRadius: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "#ddd",
+    backgroundColor: "#fff",
+  },
+  pressed: { opacity: 0.85 },
+  image: { width: "100%", height: 160 },
+  caption: { paddingHorizontal: 16, paddingVertical: 10, gap: 2 },
+  title: { fontSize: 14, fontWeight: "600", color: "#111" },
+  body: { fontSize: 13, color: "#666", lineHeight: 18 },
+  link: { fontSize: 13, color: "#2563eb", lineHeight: 18 },
+  badge: {
+    alignSelf: "flex-start",
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.6,
+    textTransform: "uppercase",
+    color: "#2563eb",
+    marginBottom: 4,
+  },
+  overlay: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    gap: 2,
+    backgroundColor: "rgba(0,0,0,0.45)",
+  },
+  media: { overflow: "hidden" },
+  content: { gap: 4 },
+});
+
+export const defaultRotationStyles = StyleSheet.create({
+  root: {},
+  slide: {},
+  indicators: {
+    position: "absolute",
+    right: 10,
+    bottom: 10,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+    zIndex: 20,
+    paddingHorizontal: 6,
+    paddingVertical: 4,
+    borderRadius: 999,
+    backgroundColor: "rgba(255,255,255,0.72)",
+  },
+  dot: { width: 6, height: 6, borderRadius: 3, backgroundColor: "rgba(0,0,0,0.28)" },
+  dotActive: { backgroundColor: "rgba(0,0,0,0.72)" },
+});
+
+export const defaultStateStyles = StyleSheet.create({
+  loading: {
+    overflow: "hidden",
+    borderRadius: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "#ddd",
+    backgroundColor: "#fff",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    alignItems: "center",
+  },
+  empty: { fontSize: 13, color: "#888", lineHeight: 18 },
+  error: { fontSize: 13, color: "#b00020", lineHeight: 18 },
+});
+
+const textLayoutOverrides: Record<TextLayout, AdCreativeStyles> = {
+  text_inline: {
+    root: { borderRadius: 8, borderWidth: 0, backgroundColor: "#f4f4f5", paddingHorizontal: 14, paddingVertical: 12 },
+    content: { gap: 4 },
+    title: { fontSize: 14, fontWeight: "600" },
+    body: { fontSize: 14, lineHeight: 20, color: "#64748b" },
+    link: { marginTop: 8, fontWeight: "500" },
+  },
+  text_callout: {
+    root: {
+      paddingHorizontal: 14,
+      paddingVertical: 12,
+      gap: 4,
+      borderLeftWidth: 4,
+      borderLeftColor: "#2563eb",
+      backgroundColor: "#eff6ff",
+      borderWidth: 0,
+      borderRadius: 8,
+    },
+    title: { fontSize: 14, fontWeight: "700" },
+    body: { fontSize: 14, lineHeight: 20, color: "#64748b" },
+    link: { marginTop: 8, fontWeight: "600" },
+  },
+  text_footer: {
+    root: {
+      paddingHorizontal: 16,
+      paddingVertical: 10,
+      borderRadius: 8,
+      backgroundColor: "#f4f4f5",
+      borderColor: "#e4e4e7",
+      alignItems: "center",
+    },
+    title: { fontSize: 12, fontWeight: "500", color: "#64748b", textAlign: "center", lineHeight: 17 },
+  },
+  text_sidebar: {
+    root: {
+      maxWidth: 320,
+      paddingHorizontal: 12,
+      paddingVertical: 12,
+      gap: 4,
+      borderTopWidth: 3,
+      borderTopColor: "#2563eb",
+      borderRadius: 8,
+    },
+    content: { gap: 4 },
+    title: { fontSize: 14, fontWeight: "700" },
+    body: { fontSize: 12, lineHeight: 17, color: "#64748b" },
+  },
+  text_minimal: {
+    root: { paddingHorizontal: 0, paddingVertical: 0, borderWidth: 0, backgroundColor: "transparent" },
+    link: { fontSize: 14, fontWeight: "500", color: "#2563eb" },
+  },
+};
+
+const heroTitle: TextStyle = { fontSize: 14, fontWeight: "700", color: "#fff" };
+const heroBody: TextStyle = { fontSize: 12, color: "rgba(255,255,255,0.9)", lineHeight: 16 };
+
+const imageLayoutOverrides: Record<ImageLayout, AdCreativeStyles> = {
+  image_hero: {
+    root: { paddingVertical: 0, paddingHorizontal: 0, borderWidth: 0, borderRadius: 8 },
+    media: { width: "100%" },
+    image: { width: "100%", height: 144 },
+    overlay: { paddingHorizontal: 12, paddingVertical: 10 },
+    title: heroTitle,
+    body: heroBody,
+  },
+  image_card: {
+    root: {
+      paddingVertical: 0,
+      paddingHorizontal: 0,
+      borderRadius: 8,
+      borderWidth: 0,
+      backgroundColor: "#fff",
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.08,
+      shadowRadius: 8,
+      elevation: 3,
+    },
+    media: { overflow: "hidden" },
+    image: { width: "100%", height: 128 },
+    caption: { paddingHorizontal: 14, paddingVertical: 12, gap: 4 },
+    title: { fontSize: 14, fontWeight: "700" },
+    body: { fontSize: 14, lineHeight: 20, color: "#64748b" },
+    link: { paddingTop: 4, fontWeight: "600" },
+  },
+  image_strip: {
+    root: { padding: 12, borderRadius: 8 },
+    media: { borderRadius: 8, overflow: "hidden" },
+    image: { width: 56, height: 56, borderRadius: 8 },
+    content: { flex: 1, gap: 2, minWidth: 0 },
+    title: { fontSize: 14, fontWeight: "600" },
+    body: { fontSize: 12, lineHeight: 16, color: "#64748b" },
+  },
+  image_thumbnail: {
+    root: {
+      maxWidth: 384,
+      padding: 12,
+      borderRadius: 8,
+      borderWidth: 0,
+      backgroundColor: "#f4f4f5",
+    },
+    media: { borderRadius: 8, overflow: "hidden" },
+    image: { width: 64, height: 64, borderRadius: 8 },
+    content: { flex: 1, gap: 4 },
+    title: { fontSize: 14, fontWeight: "700" },
+    body: { fontSize: 12, lineHeight: 17, color: "#64748b" },
+    link: { fontSize: 12, fontWeight: "600", marginTop: 4 },
+  },
+  image_inline: {
+    root: { paddingVertical: 0, paddingHorizontal: 0, borderWidth: 0, backgroundColor: "transparent", gap: 8 },
+    media: { borderRadius: 8, overflow: "hidden" },
+    image: { width: "100%", height: 112, borderRadius: 8 },
+    caption: { paddingHorizontal: 0, paddingVertical: 0, gap: 4 },
+    title: { fontSize: 14, fontWeight: "600" },
+    body: { fontSize: 12, color: "#64748b" },
+  },
+};
+
+export const defaultAdsTheme: AdsTheme = {
+  creative: defaultCreativeStyles,
+  rotation: defaultRotationStyles,
+  layouts: { text: textLayoutOverrides, image: imageLayoutOverrides },
+  states: defaultStateStyles,
+};
+
+function mergeCreative(base: AdCreativeStyles, ...layers: (AdCreativeStyles | undefined)[]): AdCreativeStyles {
+  const nestedKeys: (keyof AdCreativeStyles)[] = ["overlay", "caption", "media", "content"];
+
+  return layers.reduce<AdCreativeStyles>((acc, layer) => {
+    if (!layer) {
+      return acc;
+    }
+    const next = { ...acc, ...layer };
+    for (const key of nestedKeys) {
+      if (layer[key]) {
+        next[key] = { ...(acc[key] as object), ...(layer[key] as object) };
+      }
+    }
+    return next;
+  }, { ...base });
+}
+
+function buildTextLayouts(creative: AdCreativeStyles, patch?: AdLayoutStyles["text"]): Record<TextLayout, AdCreativeStyles> {
+  const out = {} as Record<TextLayout, AdCreativeStyles>;
+  for (const key of TEXT_LAYOUTS) {
+    out[key] = mergeCreative(creative, textLayoutOverrides[key], patch?.[key]);
+  }
+  return out;
+}
+
+function buildImageLayouts(creative: AdCreativeStyles, patch?: AdLayoutStyles["image"]): Record<ImageLayout, AdCreativeStyles> {
+  const out = {} as Record<ImageLayout, AdCreativeStyles>;
+  for (const key of IMAGE_LAYOUTS) {
+    out[key] = mergeCreative(creative, imageLayoutOverrides[key], patch?.[key]);
+  }
+  return out;
+}
+
+export function resolveAdsTheme(
+  providerTheme?: AdsTheme,
+  adTheme?: AdsTheme,
+  adStyles?: AdLayoutStyles,
+): ResolvedAdsTheme {
+  const creative = mergeCreative(
+    defaultCreativeStyles,
+    defaultAdsTheme.creative,
+    providerTheme?.creative,
+    adTheme?.creative,
+  );
+  const rotation: AdRotationStyles = {
+    ...defaultRotationStyles,
+    ...defaultAdsTheme.rotation,
+    ...providerTheme?.rotation,
+    ...adTheme?.rotation,
+  };
+  const layouts = {
+    text: buildTextLayouts(creative, {
+      ...defaultAdsTheme.layouts?.text,
+      ...providerTheme?.layouts?.text,
+      ...adTheme?.layouts?.text,
+      ...adStyles?.text,
+    }),
+    image: buildImageLayouts(creative, {
+      ...defaultAdsTheme.layouts?.image,
+      ...providerTheme?.layouts?.image,
+      ...adTheme?.layouts?.image,
+      ...adStyles?.image,
+    }),
+  };
+  const states: AdsStateStyles = {
+    ...defaultStateStyles,
+    ...defaultAdsTheme.states,
+    ...providerTheme?.states,
+    ...adTheme?.states,
+  };
+  return { creative, rotation, layouts, states };
+}
+
+export function layoutStylesFor(theme: ResolvedAdsTheme, adType: AdType, layout: AdLayout): AdCreativeStyles {
+  if (adType === "image") {
+    return theme.layouts.image[layout as ImageLayout] ?? theme.creative;
+  }
+  return theme.layouts.text[layout as TextLayout] ?? theme.creative;
+}

package/src/ads/hooks.ts

@@ -0,0 +1,156 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AppState } from "react-native";
+
+import { getPublicAdsFeed, recordPublicAdEvents } from "../public-ads";
+import type { AdFeedItem, AdFeedRotation } from "../types";
+import { IMPRESSION_MIN_DWELL_MS } from "./constants";
+import { useAdsContext } from "./context";
+import { getOrCreateAdsSessionId } from "./session-id";
+import type { UseAdsFeedOptions, UseAdsFeedResult } from "./theme";
+
+const impressionRecorded = new Set<string>();
+
+export function useAdsFeed(options: UseAdsFeedOptions = {}): UseAdsFeedResult {
+  const { resolveAccessToken, publicAds } = useAdsContext();
+  const placement = options.placement ?? "home_banner";
+  const enabled = options.enabled ?? true;
+
+  const [feed, setFeed] = useState<UseAdsFeedResult["feed"]>(null);
+  const [loading, setLoading] = useState(enabled);
+  const [error, setError] = useState<Error | null>(null);
+
+  const refresh = useCallback(async () => {
+    if (!enabled) {
+      setFeed(null);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      if (!publicAds) {
+        setFeed(null);
+        setError(new Error("AdsProvider: publishableKey and gatewayUrl are required for Public Ads"));
+        return;
+      }
+      const next = await getPublicAdsFeed(publicAds, placement);
+      setFeed(next);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+      setFeed(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [publicAds, placement, enabled]);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const ads = feed?.ads ?? [];
+  const ad = ads[0] ?? null;
+  return {
+    feed, ad, ads, layout: feed?.layout, rotation: feed?.rotation,
+    loading, error, refresh,
+  };
+}
+
+type UseAdRotationOptions = {
+  ads: AdFeedItem[];
+  rotation?: AdFeedRotation;
+  enabled?: boolean;
+};
+
+export type UseAdRotationResult = {
+  index: number;
+  setIndex: (index: number) => void;
+  current: AdFeedItem | null;
+  count: number;
+};
+
+export function useAdRotation({ ads, rotation, enabled = true }: UseAdRotationOptions): UseAdRotationResult {
+  const [index, setIndex] = useState(0);
+  const paused = useRef(false);
+
+  const autoplay = enabled && rotation?.enabled && rotation.autoplay !== false && ads.length > 1;
+  const intervalMs = Math.max(1000, (rotation?.interval_sec ?? 5) * 1000);
+
+  useEffect(() => {
+    setIndex(0);
+  }, [ads]);
+
+  useEffect(() => {
+    if (!autoplay || ads.length <= 1) {
+      return;
+    }
+    const timer = setInterval(() => {
+      if (paused.current) {
+        return;
+      }
+      setIndex((prev) => {
+        const next = prev + 1;
+        if (next >= ads.length) {
+          return rotation?.loop === false ? prev : 0;
+        }
+        return next;
+      });
+    }, intervalMs);
+    return () => clearInterval(timer);
+  }, [ads, autoplay, intervalMs, rotation?.loop]);
+
+  useEffect(() => {
+    const sub = AppState.addEventListener("change", (state) => {
+      paused.current = state !== "active";
+    });
+    return () => sub.remove();
+  }, []);
+
+  const current = ads[index] ?? null;
+  return { index, setIndex, current, count: ads.length };
+}
+
+export function useAdImpression(
+  ad: AdFeedItem | null,
+  placement: string,
+  lineupId: string,
+) {
+  const { resolveAccessToken, publicAds } = useAdsContext();
+  const sent = useRef<string>("");
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    if (!ad?.id || !publicAds) {
+      return;
+    }
+    const key = `${ad.id}:${placement}`;
+    timer.current = setTimeout(() => {
+      if (sent.current === key || impressionRecorded.has(key)) {
+        return;
+      }
+      sent.current = key;
+      impressionRecorded.add(key);
+      void (async () => {
+        try {
+          const event = {
+            adId: ad.id, eventType: "impression" as const, placementKey: placement, lineupId,
+          };
+          const sessionId = await getOrCreateAdsSessionId();
+          const token = resolveAccessToken ? await resolveAccessToken() : null;
+          await recordPublicAdEvents(publicAds, sessionId, [event], token);
+        } catch (err) {
+          console.warn("Ad: impression tracking failed", err);
+        }
+      })();
+    }, IMPRESSION_MIN_DWELL_MS);
+    return () => {
+      if (timer.current) {
+        clearTimeout(timer.current);
+        timer.current = null;
+      }
+    };
+  }, [ad?.id, lineupId, placement, publicAds, resolveAccessToken]);
+}

package/src/ads/index.ts

@@ -0,0 +1,32 @@
+export { AdsProvider, useAdsContext, type AdsProviderProps } from "./context";
+export type { InAppNavigate } from "./open-click";
+export { useAdsFeed, useAdRotation, type UseAdRotationResult } from "./hooks";
+export { Ad, AdBanner, AdSidebar, AdFooter, AdInline } from "./ad";
+export { AdPreview, AdSlotView } from "./ad-slot";
+export type { AdPreviewProps, AdSlotViewProps } from "./ad-slot";
+export { defaultAdsTheme } from "./default-theme";
+export {
+  normalizeAdType,
+  normalizeLayout,
+  normalizeRotationMode,
+  effectiveRotationMode,
+  layoutsForType,
+  defaultLayoutForType,
+  TEXT_LAYOUTS,
+  IMAGE_LAYOUTS,
+  AD_TYPES,
+} from "./constants";
+export type {
+  AdProps,
+  AdsTheme,
+  AdCreativeStyles,
+  AdLayoutStyles,
+  AdRotationStyles,
+  AdRenderContext,
+  AdLayoutRenderContext,
+  UseAdsFeedOptions,
+  UseAdsFeedResult,
+  TextLayoutStyles,
+  ImageLayoutStyles,
+} from "./theme";
+export type { AdType, AdLayout, TextLayout, ImageLayout, AdRotationMode } from "./constants";

package/src/ads/layouts/image.tsx

@@ -0,0 +1,101 @@
+import type { ReactElement } from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+import type { ImageLayout } from "../constants";
+import type { AdCreativeStyles, AdLayoutRenderContext } from "../theme";
+import { AdBody, AdImage, AdLinkCta, AdTitle, LayoutShell } from "./shared";
+import { useAdRotationIndicators } from "../rotation/indicators-context";
+
+export type AdLayoutRendererProps = {
+  ctx: AdLayoutRenderContext;
+  styles: AdCreativeStyles;
+  contentStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+};
+
+const layoutRows = StyleSheet.create({
+  strip: { flexDirection: "row", alignItems: "center", gap: 12, width: "100%" },
+  thumbnail: { flexDirection: "row", alignItems: "flex-start", gap: 12, width: "100%" },
+});
+
+function ImageHeroLayout({ ctx, styles, contentStyle }: AdLayoutRendererProps) {
+  return (
+    <LayoutShell ad={ctx.ad} onPress={ctx.onPress} styles={styles} contentStyle={contentStyle}>
+      <AdImage uri={ctx.ad.image_url} styles={styles} />
+      <View style={styles.overlay}>
+        <AdTitle text={ctx.ad.title} styles={styles} />
+        <AdBody text={ctx.ad.body_text} styles={styles} numberOfLines={2} />
+      </View>
+    </LayoutShell>
+  );
+}
+
+function ImageCardLayout({ ctx, styles, contentStyle }: AdLayoutRendererProps) {
+  return (
+    <LayoutShell ad={ctx.ad} onPress={ctx.onPress} styles={styles} contentStyle={contentStyle}>
+      <AdImage uri={ctx.ad.image_url} styles={styles} />
+      <View style={styles.caption}>
+        <AdTitle text={ctx.ad.title} styles={styles} />
+        <AdBody text={ctx.ad.body_text} styles={styles} numberOfLines={2} />
+        <AdLinkCta styles={styles} />
+      </View>
+    </LayoutShell>
+  );
+}
+
+function ImageStripLayout({ ctx, styles, contentStyle }: AdLayoutRendererProps) {
+  const indicatorState = useAdRotationIndicators();
+
+  return (
+    <LayoutShell ad={ctx.ad} onPress={ctx.onPress} styles={styles} contentStyle={contentStyle}>
+      <View style={layoutRows.strip}>
+        <AdImage uri={ctx.ad.image_url} styles={styles} />
+        <View style={[styles.content, indicatorState ? stripIndicatorPad : null]}>
+          <AdTitle text={ctx.ad.title} styles={styles} numberOfLines={1} />
+          <AdBody text={ctx.ad.body_text} styles={styles} numberOfLines={1} />
+        </View>
+      </View>
+    </LayoutShell>
+  );
+}
+
+const stripIndicatorPad = { paddingRight: 28 };
+
+function ImageThumbnailLayout({ ctx, styles, contentStyle }: AdLayoutRendererProps) {
+  return (
+    <LayoutShell ad={ctx.ad} onPress={ctx.onPress} styles={styles} contentStyle={contentStyle}>
+      <View style={layoutRows.thumbnail}>
+        <AdImage uri={ctx.ad.image_url} styles={styles} />
+        <View style={styles.content}>
+          <AdTitle text={ctx.ad.title} styles={styles} />
+          <AdBody text={ctx.ad.body_text} styles={styles} numberOfLines={2} />
+          <Text style={styles.link}>Open</Text>
+        </View>
+      </View>
+    </LayoutShell>
+  );
+}
+
+function ImageInlineLayout({ ctx, styles, contentStyle }: AdLayoutRendererProps) {
+  return (
+    <LayoutShell ad={ctx.ad} onPress={ctx.onPress} styles={styles} contentStyle={contentStyle}>
+      <AdImage uri={ctx.ad.image_url} styles={styles} />
+      <View style={styles.caption}>
+        <AdTitle text={ctx.ad.title} styles={styles} />
+        <AdBody text={ctx.ad.body_text} styles={styles} />
+      </View>
+    </LayoutShell>
+  );
+}
+
+const imageLayoutMap: Record<ImageLayout, (props: AdLayoutRendererProps) => ReactElement> = {
+  image_hero: ImageHeroLayout,
+  image_card: ImageCardLayout,
+  image_strip: ImageStripLayout,
+  image_thumbnail: ImageThumbnailLayout,
+  image_inline: ImageInlineLayout,
+};
+
+export function renderImageLayout(layout: ImageLayout, props: AdLayoutRendererProps): ReactElement {
+  const Layout = imageLayoutMap[layout] ?? ImageHeroLayout;
+  return <Layout {...props} />;
+}

package/src/ads/layouts/index.tsx

@@ -0,0 +1,28 @@
+import type { ReactElement } from "react";
+
+import { isImageLayout, isTextLayout } from "../constants";
+import type { AdCreativeStyles, AdLayoutRenderContext } from "../theme";
+import { renderImageLayout, type AdLayoutRendererProps } from "./image";
+import { renderTextLayout } from "./text";
+
+export type { AdLayoutRendererProps };
+
+export function renderLayoutByKey(props: AdLayoutRendererProps): ReactElement {
+  const { ctx } = props;
+  const layout = ctx.layout;
+
+  if (ctx.adType === "image" && isImageLayout(layout)) {
+    return renderImageLayout(layout, props);
+  }
+  if (ctx.adType === "text" && isTextLayout(layout)) {
+    return renderTextLayout(layout, props);
+  }
+
+  if (ctx.adType === "image") {
+    return renderImageLayout("image_hero", props);
+  }
+  return renderTextLayout("text_inline", props);
+}
+
+export { renderTextLayout } from "./text";
+export { renderImageLayout } from "./image";

package/src/ads/layouts/shared.tsx

@@ -0,0 +1,80 @@
+import type { ReactNode } from "react";
+import { Image, Pressable, Text, View, type StyleProp, type ViewStyle } from "react-native";
+
+import type { AdFeedItem } from "../../types";
+import { AdRotationIndicators } from "../rotation/indicators";
+import { useAdRotationIndicators } from "../rotation/indicators-context";
+import type { AdCreativeStyles } from "../theme";
+
+export type LayoutShellProps = {
+  ad: AdFeedItem;
+  onPress: () => void;
+  styles: AdCreativeStyles;
+  contentStyle?: StyleProp<ViewStyle>;
+  children: ReactNode;
+  accessibilityLabel?: string;
+};
+
+export function adLabel(ad: AdFeedItem): string {
+  return ad.title || ad.body_text || "Platform ad";
+}
+
+export function LayoutShell({
+  ad, onPress, styles, contentStyle, children, accessibilityLabel,
+}: LayoutShellProps) {
+  const indicatorState = useAdRotationIndicators();
+
+  return (
+    <View style={[styles.root, contentStyle]}>
+      <Pressable
+        onPress={onPress}
+        style={({ pressed }) => [shellContentStyle, pressed && styles.pressed]}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? adLabel(ad)}
+      >
+        {children}
+      </Pressable>
+      {indicatorState ? <AdRotationIndicators state={indicatorState} /> : null}
+    </View>
+  );
+}
+
+const shellContentStyle = { width: "100%" as const, position: "relative" as const };
+
+export function AdTitle({ text, styles, numberOfLines }: { text?: string; styles: AdCreativeStyles; numberOfLines?: number }) {
+  if (!text) {
+    return null;
+  }
+  return <Text style={styles.title} numberOfLines={numberOfLines}>{text}</Text>;
+}
+
+export function AdBody({ text, styles, numberOfLines }: { text?: string; styles: AdCreativeStyles; numberOfLines?: number }) {
+  if (!text) {
+    return null;
+  }
+  return <Text style={styles.body} numberOfLines={numberOfLines}>{text}</Text>;
+}
+
+export function AdLinkCta({ styles, label = "Learn more" }: { styles: AdCreativeStyles; label?: string }) {
+  return <Text style={styles.link}>{label}</Text>;
+}
+
+export function AdBadge({ styles, label = "Ad" }: { styles: AdCreativeStyles; label?: string }) {
+  if (!styles.badge) {
+    return null;
+  }
+  return <Text style={styles.badge}>{label}</Text>;
+}
+
+export function AdImage({
+  uri, styles, resizeMode = "cover",
+}: { uri?: string; styles: AdCreativeStyles; resizeMode?: "cover" | "contain" }) {
+  if (!uri) {
+    return null;
+  }
+  return (
+    <View style={styles.media}>
+      <Image source={{ uri }} style={styles.image} resizeMode={resizeMode} />
+    </View>
+  );
+}