@betterreviews/react-native 1.0.0

package/src/client/createBetterReviewsClient.ts

@@ -0,0 +1,211 @@
+/**
+ * `createBetterReviewsClient` — the bundled reference client for the public
+ * widget API. Closes over `storeId`/`productId` so:
+ *   - `product_id` is ALWAYS sent on detail + vote (the A4 IDOR fix — a
+ *     caller cannot omit it),
+ *   - `per_page`/`page` are clamped to the server's accepted range BEFORE
+ *     sending and the echoed `per_page` is never trusted (load-more keys off
+ *     `has_next`),
+ *   - `undo` is serialized as a literal JSON boolean (a string `"true"` is
+ *     treated by the server as a normal vote, not an undo),
+ *   - detail is parsed FLAT (`raw` is the review object itself, not
+ *     `{ review: ... }`),
+ *   - list rows are parsed individually (tolerant: drop bad rows, keep the
+ *     rest, report ONE violation per response),
+ *   - media items with a non-https URL are dropped (defense-in-depth).
+ */
+import * as v from 'valibot';
+import {
+  widgetReviewSchema,
+  widgetReviewListSchema,
+  widgetVoteCountsSchema,
+} from '../../../schemas/src/index.js';
+import type {
+  BetterReviewsClient,
+  BetterReviewsClientConfig,
+  ListParams,
+  ReviewListResult,
+  VoteStateStore,
+  VoteType,
+  WidgetReview,
+  WidgetSummary,
+  WidgetVoteCounts,
+} from './types.js';
+
+const MIN_PER_PAGE = 5;
+const MAX_PER_PAGE = 25;
+const DEFAULT_PER_PAGE = 10;
+const MAX_PAGE = 50;
+const MIN_SEARCH_LENGTH = 2;
+
+function clamp(n: number, lo: number, hi: number): number {
+  return Math.min(Math.max(n, lo), hi);
+}
+
+function isHttps(url: string | null): boolean {
+  return typeof url === 'string' && url.startsWith('https://');
+}
+
+// Drop media items carrying a non-https URL — `<Image>`/viewer must never
+// receive a `javascript:`/`data:`/`file:` URL. The server's `safe_url/1` is
+// https-only today, but this package is versioned independently of the
+// endpoint, so it re-checks rather than trusting that invariant forever.
+function sanitizeMedia(review: WidgetReview): WidgetReview {
+  const media = review.media.filter(
+    (m) => (m.thumbnail == null || isHttps(m.thumbnail)) && (m.full == null || isHttps(m.full)),
+  );
+  return media.length === review.media.length ? review : { ...review, media };
+}
+
+// Strip undefined values so the host fetcher receives only real params.
+function cleanQuery(
+  q: Record<string, string | number | boolean | undefined>,
+): Record<string, string | number | boolean> {
+  const out: Record<string, string | number | boolean> = {};
+  for (const [k, val] of Object.entries(q)) {
+    if (val !== undefined) out[k] = val;
+  }
+  return out;
+}
+
+export function createBetterReviewsClient(config: BetterReviewsClientConfig): BetterReviewsClient {
+  const { fetcher, storeId, productId, onSchemaViolation } = config;
+
+  async function listReviews(
+    params: ListParams = {},
+    signal?: AbortSignal,
+  ): Promise<ReviewListResult> {
+    const search =
+      typeof params.search === 'string' && params.search.trim().length >= MIN_SEARCH_LENGTH
+        ? params.search.trim()
+        : undefined;
+
+    const query = cleanQuery({
+      page: clamp(params.page ?? 1, 1, MAX_PAGE),
+      per_page: clamp(params.perPage ?? DEFAULT_PER_PAGE, MIN_PER_PAGE, MAX_PER_PAGE),
+      sort: params.sort,
+      rating: params.rating ?? undefined,
+      media_only: params.mediaOnly ? 'true' : undefined,
+      search,
+    });
+
+    const raw = await fetcher({
+      path: `/api/widget/${storeId}/products/${productId}/reviews`,
+      query,
+      signal,
+    });
+
+    const envelope = v.safeParse(widgetReviewListSchema, raw);
+    if (!envelope.success) {
+      // The whole page is unusable — never render a half-list as complete.
+      throw new Error('betterreviews: invalid review list response');
+    }
+
+    const reviews: WidgetReview[] = [];
+    let droppedCount = 0;
+    let firstBadPath: string | undefined;
+    envelope.output.reviews.forEach((row, i) => {
+      const parsed = v.safeParse(widgetReviewSchema, row);
+      if (parsed.success) {
+        reviews.push(sanitizeMedia(parsed.output));
+      } else {
+        droppedCount += 1;
+        if (firstBadPath === undefined) firstBadPath = `reviews[${i}]`;
+      }
+    });
+    if (droppedCount > 0 && firstBadPath !== undefined) {
+      onSchemaViolation?.({ droppedCount, firstBadPath });
+    }
+
+    return { reviews, pagination: envelope.output.pagination };
+  }
+
+  async function getReviewDetail(reviewId: number, signal?: AbortSignal): Promise<WidgetReview> {
+    const raw = await fetcher({
+      path: `/api/widget/${storeId}/reviews/${reviewId}`,
+      query: { product_id: productId },
+      signal,
+    });
+
+    // Detail is FLAT — `raw` IS the review object (full body, body_truncated:false).
+    const parsed = v.safeParse(widgetReviewSchema, raw);
+    if (!parsed.success) {
+      onSchemaViolation?.({ droppedCount: 1, firstBadPath: 'detail' });
+      throw new Error('betterreviews: invalid review detail response');
+    }
+    return sanitizeMedia(parsed.output);
+  }
+
+  async function voteReview(
+    reviewId: number,
+    type: VoteType,
+    undo: boolean,
+    signal?: AbortSignal,
+  ): Promise<WidgetVoteCounts | null> {
+    const raw = await fetcher({
+      path: `/api/widget/${storeId}/reviews/${reviewId}/vote`,
+      query: { product_id: productId },
+      method: 'POST',
+      // `undo === true` forces a literal boolean — never the string "true".
+      body: { type, undo: undo === true },
+      signal,
+    });
+
+    const parsed = v.safeParse(widgetVoteCountsSchema, raw);
+    if (!parsed.success) {
+      // The POST itself succeeded (fetcher throws on non-2xx). The body is
+      // unreadable, so keep the optimistic UI — report, return null.
+      onSchemaViolation?.({ droppedCount: 1, firstBadPath: 'vote' });
+      return null;
+    }
+    return parsed.output;
+  }
+
+  // No summary endpoint exists — synthesize from 7 list calls (5 single-rating
+  // totals + 1 media-only total + 1 verified-count sample), mirroring the
+  // prototype. All share one signal; the two "extra" calls degrade to 0.
+  async function fetchSummary(signal?: AbortSignal): Promise<WidgetSummary> {
+    const ratings: Array<1 | 2 | 3 | 4 | 5> = [1, 2, 3, 4, 5];
+    const breakdown = await Promise.all(
+      ratings.map((r) =>
+        listReviews({ page: 1, perPage: MIN_PER_PAGE, sort: 'most_relevant', rating: r }, signal).then(
+          (res) => res.pagination.total,
+        ),
+      ),
+    );
+
+    const total = breakdown.reduce((a, b) => a + b, 0);
+    const weighted = breakdown.reduce((acc, n, i) => acc + n * (i + 1), 0);
+    const average = total > 0 ? Math.round((weighted / total) * 10) / 10 : 0;
+    const positive = breakdown[3] + breakdown[4];
+    const positivePct = total > 0 ? Math.round((positive / total) * 100) : 0;
+
+    const [photoCount, verifiedCount] = await Promise.all([
+      listReviews({ page: 1, perPage: MAX_PER_PAGE, sort: 'most_relevant', mediaOnly: true }, signal)
+        .then((r) => r.pagination.total)
+        .catch(() => 0),
+      listReviews({ page: 1, perPage: MAX_PER_PAGE, sort: 'most_relevant' }, signal)
+        .then((r) => r.reviews.filter((x) => x.verified).length)
+        .catch(() => 0),
+    ]);
+
+    return { total, average, breakdown, positivePct, photoCount, verifiedCount };
+  }
+
+  return { listReviews, getReviewDetail, voteReview, fetchSummary };
+}
+
+/**
+ * Default in-memory `VoteStateStore`. Survives only for the component's
+ * lifetime; hosts wanting "already voted" to persist across launches pass an
+ * AsyncStorage-backed implementation instead.
+ */
+export function createMemoryVoteStore(): VoteStateStore {
+  const map = new Map<number, VoteType | null>();
+  return {
+    get: (reviewId) => map.get(reviewId),
+    set: (reviewId, vote) => {
+      map.set(reviewId, vote);
+    },
+  };
+}

package/src/client/types.ts

@@ -0,0 +1,101 @@
+/**
+ * Client types for the public widget API.
+ *
+ * The package owns the UI + pagination/sort/filter state and assembles the
+ * logical requests; the HOST owns transport — it implements the `Fetcher`,
+ * which prepends the API base URL and injects the auth `token`. No token
+ * ever lives in this package or the RN binary.
+ */
+import type {
+  WidgetReview,
+  WidgetPagination,
+  WidgetVoteCounts,
+  WidgetSortValue,
+  WidgetSummary,
+} from '../../../schemas/src/index.js';
+
+export type {
+  WidgetReview,
+  WidgetPagination,
+  WidgetVoteCounts,
+  WidgetSortValue,
+  WidgetSummary,
+};
+
+/**
+ * A logical request the host fetcher fulfils. The host MUST prepend the API
+ * base URL, inject the `token`, perform the request, throw on a non-2xx
+ * status, and resolve with the parsed JSON body. The host MUST NOT put the
+ * resolved URL or the token into any error it throws (the token rides in the
+ * query string — a logged URL/error leaks it).
+ */
+export interface FetcherRequest {
+  /** Path relative to the API base, e.g. `/api/widget/{store}/products/{product}/reviews`. */
+  path: string;
+  /** Non-secret query params. The token is added by the host, never here. */
+  query?: Record<string, string | number | boolean | undefined>;
+  method?: 'GET' | 'POST';
+  /** JSON-serializable body (vote only). */
+  body?: unknown;
+  signal?: AbortSignal;
+}
+
+export type Fetcher = (req: FetcherRequest) => Promise<unknown>;
+
+export type VoteType = 'helpful' | 'unhelpful';
+
+/**
+ * Host-provided persistence for "has this user voted on this review".
+ * Stores only review id → vote direction (no PII, no token, no review
+ * content) — safe for unencrypted storage like AsyncStorage. Do NOT widen
+ * it to cache review payloads.
+ */
+export interface VoteStateStore {
+  get(reviewId: number): VoteType | null | undefined;
+  set(reviewId: number, vote: VoteType | null): void;
+}
+
+export interface ListParams {
+  page?: number;
+  perPage?: number;
+  sort?: WidgetSortValue;
+  rating?: 1 | 2 | 3 | 4 | 5 | null;
+  mediaOnly?: boolean;
+  search?: string;
+}
+
+export interface ReviewListResult {
+  reviews: WidgetReview[];
+  pagination: WidgetPagination;
+}
+
+/**
+ * Reported once per list response when one or more rows fail schema
+ * validation. Carries paths + a count ONLY — never row contents (untrusted
+ * customer-authored review text must not reach telemetry).
+ */
+export interface SchemaViolationInfo {
+  droppedCount: number;
+  firstBadPath: string;
+}
+
+export interface BetterReviewsClientConfig {
+  fetcher: Fetcher;
+  storeId: string;
+  productId: string;
+  onSchemaViolation?: (info: SchemaViolationInfo) => void;
+}
+
+export interface BetterReviewsClient {
+  listReviews(params?: ListParams, signal?: AbortSignal): Promise<ReviewListResult>;
+  /** Detail is scoped to the configured product (`product_id` is always sent — the A4 IDOR fix). */
+  getReviewDetail(reviewId: number, signal?: AbortSignal): Promise<WidgetReview>;
+  /** Returns updated counts, or `null` if the POST succeeded but the body was unparseable. Rejects on HTTP/network error. */
+  voteReview(
+    reviewId: number,
+    type: VoteType,
+    undo: boolean,
+    signal?: AbortSignal,
+  ): Promise<WidgetVoteCounts | null>;
+  fetchSummary(signal?: AbortSignal): Promise<WidgetSummary>;
+}

package/src/icons/BRIcons.tsx

@@ -0,0 +1,176 @@
+/**
+ * Widget icons — typed port of the prototype's `BRIcons.js`, itself a port of
+ * the storefront sprite (`br-widget-script.liquid`) + star snippet
+ * (`br-stars.liquid`). All stroke icons are 24×24, `stroke="currentColor"`,
+ * width 2, round caps/joins, no fill. `IconStar` is the one fill shape;
+ * partial fills use a `<LinearGradient>` with two stops at the same offset
+ * (a hard split, not a soft gradient).
+ *
+ * The prototype's unused `Stars` convenience wrapper is intentionally dropped
+ * — `RatingStars` composes `IconStar` directly.
+ */
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import Svg, { Path, Line, Polyline, Circle, Defs, LinearGradient, Stop } from 'react-native-svg';
+
+export interface IconProps {
+  size?: number;
+  color?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+interface StrokeIconProps extends IconProps {
+  children: React.ReactNode;
+}
+
+function StrokeIcon({ size = 16, color = 'currentColor', children, style }: StrokeIconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={style}
+    >
+      {children}
+    </Svg>
+  );
+}
+
+export const IconShieldCheck = (props: IconProps) => (
+  <StrokeIcon {...props}>
+    <Path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+    <Polyline points="9 12 12 15 16 10" />
+  </StrokeIcon>
+);
+
+export const IconThumbsUp = (props: IconProps) => (
+  <StrokeIcon {...props}>
+    <Path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" />
+    <Path d="M14 2l-3 7v13h9a2 2 0 0 0 2-1.7l1.38-9A2 2 0 0 0 21.4 9H14" />
+  </StrokeIcon>
+);
+
+export const IconThumbsDown = (props: IconProps) => (
+  <StrokeIcon {...props}>
+    <Path d="M17 2h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" />
+    <Path d="M10 22l3-7V2H4a2 2 0 0 0-2 1.7l-1.38 9A2 2 0 0 0 2.6 15H10" />
+  </StrokeIcon>
+);
+
+export const IconCamera = (props: IconProps) => (
+  <StrokeIcon {...props}>
+    <Path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
+    <Circle cx="12" cy="13" r="4" />
+  </StrokeIcon>
+);
+
+export const IconChevronDown = (props: IconProps) => (
+  <StrokeIcon {...props}>
+    <Polyline points="6 9 12 15 18 9" />
+  </StrokeIcon>
+);
+
+export const IconChevronLeft = (props: IconProps) => (
+  <StrokeIcon {...props}>
+    <Polyline points="15 18 9 12 15 6" />
+  </StrokeIcon>
+);
+
+export const IconChevronRight = (props: IconProps) => (
+  <StrokeIcon {...props}>
+    <Polyline points="9 18 15 12 9 6" />
+  </StrokeIcon>
+);
+
+export const IconXClose = (props: IconProps) => (
+  <StrokeIcon {...props}>
+    <Line x1="18" y1="6" x2="6" y2="18" />
+    <Line x1="6" y1="6" x2="18" y2="18" />
+  </StrokeIcon>
+);
+
+export const IconArrowUpDown = (props: IconProps) => (
+  <StrokeIcon {...props}>
+    <Polyline points="7 3 7 21" />
+    <Polyline points="4 6 7 3 10 6" />
+    <Polyline points="17 21 17 3" />
+    <Polyline points="14 18 17 21 20 18" />
+  </StrokeIcon>
+);
+
+export const IconSearch = ({ size = 16, color = 'currentColor', style }: IconProps) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    style={style}
+  >
+    <Circle cx="11" cy="11" r="8" />
+    <Line x1="21" y1="21" x2="16.65" y2="16.65" />
+  </Svg>
+);
+
+const STAR_PATH =
+  'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z';
+
+export interface IconStarProps {
+  size?: number;
+  fillPercentage?: number;
+  fillColor?: string;
+  emptyColor?: string;
+  /**
+   * Unique per-instance gradient id seed. `react-native-svg` gradient ids are
+   * global, so two stars sharing a `uid` would share a fill — callers MUST
+   * pass a stable per-row/per-position value (e.g. `c-{reviewId}-{index}`).
+   */
+  uid?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function IconStar({
+  size = 16,
+  fillPercentage = 100,
+  fillColor = '#e8a808',
+  emptyColor = '#eef0f3',
+  uid = 'star',
+  style,
+}: IconStarProps) {
+  const p = Math.max(0, Math.min(100, fillPercentage));
+  const gradId = `br-half-${uid}-${size}-${p}`;
+
+  if (p >= 100) {
+    return (
+      <Svg width={size} height={size} viewBox="0 0 24 24" style={style}>
+        <Path d={STAR_PATH} fill={fillColor} />
+      </Svg>
+    );
+  }
+  if (p <= 0) {
+    return (
+      <Svg width={size} height={size} viewBox="0 0 24 24" style={style}>
+        <Path d={STAR_PATH} fill={emptyColor} />
+      </Svg>
+    );
+  }
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" style={style}>
+      <Defs>
+        <LinearGradient id={gradId} x1="0" y1="0" x2="1" y2="0">
+          <Stop offset={`${p}%`} stopColor={fillColor} />
+          <Stop offset={`${p}%`} stopColor={emptyColor} />
+        </LinearGradient>
+      </Defs>
+      <Path d={STAR_PATH} fill={`url(#${gradId})`} />
+    </Svg>
+  );
+}

package/src/index.ts

@@ -0,0 +1,74 @@
+/**
+ * `@betterreviews/react-native` — public API.
+ *
+ * Partner host apps:
+ *   1. Fetch the three `betterreviews_reactiv.*` metafield bodies
+ *      from Shopify (storefront API or partner's backend proxy).
+ *   2. Wrap their navigation tree with `<BetterReviewsProvider>`
+ *      supplying the merchant-resolved `theme` + `config` +
+ *      `onTelemetryEvent` callback.
+ *   3. Render `<ProductContentBlock block={...}>` on PDP screens.
+ *
+ * See README.md for integration + SECURITY.md for security
+ * obligations on the host-app side.
+ */
+
+export {
+  BetterReviewsProvider,
+  useBetterReviews,
+  type BetterReviewsProviderProps,
+  type BetterReviewsContextValue,
+} from './BetterReviewsProvider.js';
+
+export { ProductContentBlock, type ProductContentBlockProps } from './ProductContentBlock.js';
+
+export { FeaturesSection, type FeaturesSectionProps } from './sections/FeaturesSection.js';
+export { ReviewsSummarySection } from './sections/ReviewsSummarySection.js';
+
+export { WebViewHost, type WebViewHostProps } from './WebViewHost.js';
+
+// Compact aggregate rating badge (stars + score + count) for near the title.
+export { StarRating, type StarRatingProps } from './StarRating.js';
+
+// Review-browsing widget (list / filter / sort / read-more / media viewer / vote).
+export { ReviewWidget, type ReviewWidgetProps } from './widget/ReviewWidget.js';
+export {
+  createBetterReviewsClient,
+  createMemoryVoteStore,
+} from './client/createBetterReviewsClient.js';
+export type {
+  BetterReviewsClient,
+  BetterReviewsClientConfig,
+  Fetcher,
+  FetcherRequest,
+  ListParams,
+  ReviewListResult,
+  SchemaViolationInfo,
+  VoteType,
+  VoteStateStore,
+} from './client/types.js';
+
+export { applyTheme, type ResolvedTheme } from './theme/applyTheme.js';
+export { meetsFloor, SDK_VERSION } from './minSdkVersion.js';
+export { resolveBridge, type ResolvedBridge } from './bridge.js';
+export {
+  safeTelemetry,
+  noopTelemetry,
+  type TelemetryEvent,
+  type TelemetryHandler,
+} from './telemetry.js';
+
+// Re-export schema types so partner host apps don't need a separate
+// @betterreviews/schemas install — single dep surface for the partner.
+export type {
+  ProductContentBlock as ProductContentBlockSchema,
+  Theme,
+  Config,
+  WidgetReview,
+  WidgetMediaItem,
+  WidgetMerchantReply,
+  WidgetPagination,
+  WidgetVoteCounts,
+  WidgetSortValue,
+  WidgetSummary,
+} from '../../schemas/src/index.js';

package/src/minSdkVersion.ts

@@ -0,0 +1,52 @@
+/**
+ * Semver floor compare. The metafield's optional `config.min_sdk_version`
+ * declares the minimum SDK version the merchant expects. The RN
+ * package compares against its own version on mount; if below the
+ * floor, ProductContentBlock renders nothing (degrade-gracefully).
+ *
+ * v1 of the resolver does NOT emit `min_sdk_version` — this is
+ * forward-compat plumbing.
+ */
+
+import packageJson from '../package.json' assert { type: 'json' };
+
+export const SDK_VERSION: string = packageJson.version;
+
+interface ParsedSemver {
+  major: number;
+  minor: number;
+  patch: number;
+}
+
+function parse(version: string): ParsedSemver | null {
+  // Accepts MAJOR.MINOR.PATCH with optional -pre.release suffix; we
+  // only compare core for the floor check (pre-release is treated as
+  // equivalent to the same MAJOR.MINOR.PATCH for compat purposes).
+  const match = version.match(/^(\d+)\.(\d+)\.(\d+)/);
+  if (!match) return null;
+
+  return {
+    major: parseInt(match[1]!, 10),
+    minor: parseInt(match[2]!, 10),
+    patch: parseInt(match[3]!, 10),
+  };
+}
+
+/**
+ * Returns true if the SDK's current version meets the configured
+ * floor, false otherwise. A null/undefined floor always passes (no
+ * floor declared). Malformed floor strings are treated as "no floor"
+ * — the package errs on the side of rendering rather than refusing.
+ */
+export function meetsFloor(floor: string | undefined): boolean {
+  if (!floor) return true;
+
+  const required = parse(floor);
+  const have = parse(SDK_VERSION);
+
+  if (!required || !have) return true;
+
+  if (have.major !== required.major) return have.major > required.major;
+  if (have.minor !== required.minor) return have.minor > required.minor;
+  return have.patch >= required.patch;
+}

package/src/sections/FeaturesSection.tsx

@@ -0,0 +1,69 @@
+/**
+ * Renders the `features` section — a bullet list capped by the schema
+ * at 6 bullets / 80 chars each. The schema's strict-overlay validator
+ * on the Elixir side has already enforced those caps; this component
+ * renders defensively in case a partial fallback path slips through.
+ */
+
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useBetterReviews } from '../BetterReviewsProvider.js';
+import { applyTheme } from '../theme/applyTheme.js';
+
+export interface FeaturesSectionProps {
+  bullets: string[];
+}
+
+export function FeaturesSection({ bullets }: FeaturesSectionProps): React.ReactElement {
+  const { theme } = useBetterReviews();
+  const resolved = applyTheme(theme);
+
+  return (
+    // Renders flat — like normal page text, no background fill / box. Inherits
+    // the host's surrounding layout (no own horizontal padding).
+    <View style={styles.container}>
+      {bullets.map((bullet, index) => (
+        <View key={index} style={styles.row}>
+          <Text
+            style={[
+              styles.bullet,
+              resolved.textColor ? { color: resolved.textColor } : null,
+            ]}
+          >
+            •
+          </Text>
+          <Text
+            style={[
+              styles.text,
+              resolved.textColor ? { color: resolved.textColor } : null,
+              resolved.fontFamily ? { fontFamily: resolved.fontFamily } : null,
+            ]}
+          >
+            {bullet}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 8,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    paddingVertical: 4,
+  },
+  bullet: {
+    fontSize: 16,
+    lineHeight: 22,
+    marginRight: 8,
+  },
+  text: {
+    flex: 1,
+    fontSize: 14,
+    lineHeight: 22,
+  },
+});