@leisuresaas/react-native 0.6.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) LeisureSaaS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+# @leisuresaas/react-native
+
+React Native SDK for LeisureSaas **frontend-only** surfaces:
+
+- OAuth / Hosted UI / Magic login  
+- Public Ads & App Config (`pk_live_` → `/v1/public/*`)  
+- Drive User Plane (`pk_live_` + Bearer → `/v1/user/storage/*`)  
+- Local push helpers (`buildEnablePushRegistration` — **no HTTP**)
+
+**Does not** ship Integration Key (`ik_`) clients or product BFF path constants.  
+Business APIs (billing, entitlement, device-token register) → **your BFF** + [`sdk/go`](../go).
+
+**AI**：见 **[AGENTS.md](AGENTS.md)** · 架构：[plan/services/sdk-react-native/ARCHITECTURE.md](../../plan/services/sdk-react-native/ARCHITECTURE.md)
+
+## Install
+
+```bash
+npm install @leisuresaas/react-native
+```
+
+`metro.config.js`：`transpilePackages: ["@leisuresaas/react-native"]`。  
+Peers：`expo`, `expo-auth-session`, `expo-secure-store`, `expo-web-browser`, `react`, `react-native`；Push 可选 `expo-notifications`。
+
+## Quick start
+
+```tsx
+import {
+  AuthProvider,
+  AdsProvider,
+  AppUpdateProvider,
+  buildEnablePushRegistration,
+  useAuth,
+} from "@leisuresaas/react-native";
+
+<AuthProvider config={{ issuer, clientId, redirectScheme: "myapp", terminal: "mobile" }}>
+  <AdsProvider
+    publishableKey={process.env.EXPO_PUBLIC_PUBLISHABLE_KEY!}
+    gatewayUrl={process.env.EXPO_PUBLIC_GATEWAY_URL!}
+  >
+    <AppUpdateProvider
+      publishableKey={process.env.EXPO_PUBLIC_PUBLISHABLE_KEY!}
+      gatewayUrl={process.env.EXPO_PUBLIC_GATEWAY_URL!}
+    >
+      <App />
+    </AppUpdateProvider>
+  </AdsProvider>
+</AuthProvider>
+```
+
+站内广告：素材 `link_url` 填 `app:/billing`（可带 query）。点击仍走 `click_url`；在 `AdsProvider` 上传 `onInAppNavigate={(path) => router.push(path)}`。未传时站内点击不会打开浏览器。
+
+### Push（产品 BFF 登记）
+
+```ts
+const reg = await buildEnablePushRegistration();
+await apiFetch(accessToken, "/v1/notifications/device-tokens", {
+  method: "POST",
+  body: JSON.stringify({
+    platform: reg.platform,
+    token: reg.token,
+    android_package: reg.androidPackage,
+    bundle_id: reg.bundleId,
+    environment: reg.environment,
+  }),
+});
+// 注销：DELETE /v1/notifications/device-tokens/{token}（产品路径）
+```
+
+需要 Dev Client / Store build + 原生 FCM/APNs（不要 Expo Go / `ExponentPushToken`）。
+
+## Env
+
+| Variable | Use |
+|----------|-----|
+| `EXPO_PUBLIC_OAUTH_ISSUER` | OAuth / Hosted UI only |
+| `EXPO_PUBLIC_GATEWAY_URL` | Public Ads / App Config / Drive |
+| `EXPO_PUBLIC_PUBLISHABLE_KEY` | `pk_live_` |
+
+**Never** put Integration Keys in `EXPO_PUBLIC_*`.
+
+## Breaking 0.5 → 0.6
+
+- Removed `LeisureSaasClient` / `createLeisureSaasClient` (bff + gateway/`ik_` modes)  
+- `AdsProvider` no longer takes `client`  
+- No SDK HTTP for push register — use `buildEnablePushRegistration` + product API  
+- Platform paths: `/v1/public/*`, `/v1/user/*` (not `/api/v1/…`)
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@leisuresaas/react-native",
+  "version": "0.6.2",
+  "description": "React Native SDK for LeisureSaas: OAuth, Public Ads/App Config, Drive User Plane (publishable keys). Frontend-only — no Integration Key.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/leisuresaas/react-native.git"
+  },
+  "bugs": {
+    "url": "https://github.com/leisuresaas/react-native/issues"
+  },
+  "homepage": "https://github.com/leisuresaas/react-native#readme",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run typecheck"
+  },
+  "peerDependencies": {
+    "expo": ">=52.0.0",
+    "expo-auth-session": ">=6.0.0",
+    "expo-linking": ">=7.0.0",
+    "expo-notifications": ">=0.29.0",
+    "expo-secure-store": ">=14.0.0",
+    "expo-web-browser": ">=14.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.76.0"
+  },
+  "peerDependenciesMeta": {
+    "expo-notifications": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.2",
+    "typescript": "~5.9.2"
+  }
+}

package/src/ads/ad-slot.tsx

@@ -0,0 +1,131 @@
+import { useCallback, useMemo } from "react";
+import { Text, View } from "react-native";
+
+import type { AdFeedItem, AdsFeedResponse } from "../types";
+import { normalizeAdType, normalizeLayout } from "./constants";
+import { useAdsContext } from "./context";
+import { layoutStylesFor, resolveAdsTheme } from "./default-theme";
+import { useAdImpression, useAdRotation } from "./hooks";
+import { lineupIdFromSource } from "./lineup-id";
+import { renderLayoutByKey } from "./layouts";
+import { openAdClickUrl } from "./open-click";
+import { AdRotationShell } from "./rotation/shell";
+import type { AdLayoutRenderContext, AdProps, AdRenderContext } from "./theme";
+
+export type AdSlotViewProps = {
+  feed: AdsFeedResponse;
+  placement: string;
+  style?: AdProps["style"];
+  contentStyle?: AdProps["contentStyle"];
+  theme?: AdProps["theme"];
+  styles?: AdProps["styles"];
+  showIndicators?: boolean;
+  trackImpressions?: boolean;
+  onPress?: AdProps["onPress"];
+  renderAd?: AdProps["renderAd"];
+  renderLayout?: AdProps["renderLayout"];
+};
+
+export function AdSlotView({
+  feed,
+  placement,
+  style,
+  contentStyle,
+  theme: adTheme,
+  styles: adStyles,
+  showIndicators,
+  trackImpressions = true,
+  onPress,
+  renderAd,
+  renderLayout,
+}: AdSlotViewProps) {
+  const { providerTheme, onInAppNavigate } = useAdsContext();
+  const ads = feed.ads ?? [];
+  const rotation = feed.rotation;
+  const adType = normalizeAdType(feed.type ?? ads[0]?.type);
+  const layout = normalizeLayout(adType, feed.layout);
+  const { index, setIndex, current, count } = useAdRotation({ ads, rotation, enabled: true });
+
+  const theme = useMemo(
+    () => resolveAdsTheme(providerTheme, adTheme, adStyles),
+    [providerTheme, adTheme, adStyles],
+  );
+  const creativeStyles = useMemo(() => layoutStylesFor(theme, adType, layout), [theme, adType, layout]);
+
+  useAdImpression(
+    trackImpressions ? current : null,
+    placement,
+    lineupIdFromSource(feed.source),
+  );
+
+  const handlePress = useCallback(async (ad: AdFeedItem) => {
+    onPress?.(ad);
+    const clickUrl = ad.click_url?.trim();
+    if (clickUrl) {
+      await openAdClickUrl(clickUrl, { onInAppNavigate });
+    }
+  }, [onInAppNavigate, onPress]);
+
+  const buildContext = useCallback((ad: AdFeedItem, adIndex: number): AdRenderContext => ({
+    ad,
+    adType,
+    layout,
+    placement,
+    index: adIndex,
+    count,
+    onPress: () => void handlePress(ad),
+    theme,
+  }), [adType, count, handlePress, layout, placement, theme]);
+
+  const renderOne = useCallback((ad: AdFeedItem, adIndex: number) => {
+    const ctx = buildContext(ad, adIndex);
+    if (renderAd) {
+      return renderAd(ctx);
+    }
+    const layoutCtx: AdLayoutRenderContext = { ...ctx, styles: creativeStyles };
+    if (renderLayout) {
+      return renderLayout(layoutCtx);
+    }
+    return renderLayoutByKey({ ctx: layoutCtx, styles: creativeStyles, contentStyle });
+  }, [buildContext, creativeStyles, contentStyle, renderAd, renderLayout]);
+
+  if (count === 0) {
+    return (
+      <View style={[theme.states.loading, style]}>
+        <Text style={theme.states.empty}>（无广告素材）</Text>
+      </View>
+    );
+  }
+
+  const indicators = showIndicators ?? rotation?.show_indicators ?? false;
+
+  return (
+    <AdRotationShell
+      ads={ads}
+      rotation={rotation}
+      index={index}
+      onIndexChange={setIndex}
+      styles={theme.rotation}
+      showIndicators={indicators}
+      rootStyle={style}
+      renderSlide={(ad, adIndex) => renderOne(ad, adIndex)}
+    />
+  );
+}
+
+export type AdPreviewProps = Omit<AdSlotViewProps, "placement"> & {
+  placement?: string;
+};
+
+/** Render a feed payload without fetching (labs, Storybook, admin preview). */
+export function AdPreview({ feed, placement, trackImpressions = false, ...rest }: AdPreviewProps) {
+  const slotPlacement = placement ?? feed.placement ?? "preview";
+  return (
+    <AdSlotView
+      feed={feed}
+      placement={slotPlacement}
+      trackImpressions={trackImpressions}
+      {...rest}
+    />
+  );
+}

package/src/ads/ad.tsx

@@ -0,0 +1,91 @@
+import { useEffect } from "react";
+import { ActivityIndicator, Text, View } from "react-native";
+
+import type { AdProps } from "./theme";
+import { AdSlotView } from "./ad-slot";
+import { useAdsContext } from "./context";
+import { resolveAdsTheme } from "./default-theme";
+import { useAdsFeed } from "./hooks";
+
+export function Ad({
+  placement = "home_banner",
+  style,
+  contentStyle,
+  theme: adTheme,
+  styles: adStyles,
+  onError,
+  onPress,
+  showEmpty = false,
+  showIndicators,
+  renderAd,
+  renderLayout,
+}: AdProps) {
+  const { providerTheme } = useAdsContext();
+  const { feed, loading, error } = useAdsFeed({ placement });
+  const theme = resolveAdsTheme(providerTheme, adTheme, adStyles);
+
+  useEffect(() => {
+    if (error) {
+      onError?.(error);
+    }
+  }, [error, onError]);
+
+  if (loading) {
+    return (
+      <View style={[theme.states.loading, style]}>
+        <ActivityIndicator />
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={[theme.states.loading, style]}>
+        <Text style={theme.states.error}>广告加载失败: {error.message}</Text>
+      </View>
+    );
+  }
+
+  if (!feed?.ads?.length) {
+    if (!showEmpty) {
+      return null;
+    }
+    return (
+      <View style={[theme.states.loading, style]}>
+        <Text style={theme.states.empty}>（当前无 {placement} 广告）</Text>
+      </View>
+    );
+  }
+
+  return (
+    <AdSlotView
+      feed={feed}
+      placement={placement}
+      style={style}
+      contentStyle={contentStyle}
+      theme={adTheme}
+      styles={adStyles}
+      showIndicators={showIndicators}
+      trackImpressions
+      onPress={onPress}
+      renderAd={renderAd}
+      renderLayout={renderLayout}
+    />
+  );
+}
+
+export function AdBanner(props: Omit<AdProps, "placement">) {
+  return <Ad placement="home_banner" {...props} />;
+}
+
+export function AdSidebar(props: Omit<AdProps, "placement">) {
+  return <Ad placement="sidebar" {...props} />;
+}
+
+export function AdFooter(props: Omit<AdProps, "placement">) {
+  return <Ad placement="footer" {...props} />;
+}
+
+export function AdInline(props: Omit<AdProps, "placement">) {
+  return <Ad placement="inline" {...props} />;
+}

package/src/ads/bundle-id.ts

@@ -0,0 +1,9 @@
+import Constants from "expo-constants";
+
+export function appBundleId(): string {
+  const ios = Constants.expoConfig?.ios?.bundleIdentifier?.trim();
+  if (ios) {
+    return ios;
+  }
+  return Constants.expoConfig?.android?.package?.trim() ?? "";
+}

package/src/ads/constants.ts

@@ -0,0 +1,92 @@
+export type AdType = "text" | "image";
+
+export type TextLayout =
+  | "text_inline"
+  | "text_callout"
+  | "text_footer"
+  | "text_sidebar"
+  | "text_minimal";
+
+export type ImageLayout =
+  | "image_hero"
+  | "image_card"
+  | "image_strip"
+  | "image_thumbnail"
+  | "image_inline";
+
+export type AdLayout = TextLayout | ImageLayout;
+
+export type AdRotationMode = "none" | "fade" | "slide" | "stack";
+
+export const AD_TYPES: readonly AdType[] = ["text", "image"] as const;
+
+export const TEXT_LAYOUTS: readonly TextLayout[] = [
+  "text_inline",
+  "text_callout",
+  "text_footer",
+  "text_sidebar",
+  "text_minimal",
+] as const;
+
+export const IMAGE_LAYOUTS: readonly ImageLayout[] = [
+  "image_hero",
+  "image_card",
+  "image_strip",
+  "image_thumbnail",
+  "image_inline",
+] as const;
+
+export const AD_ROTATION_MODES: readonly AdRotationMode[] = [
+  "none", "fade", "slide", "stack",
+] as const;
+
+export const DEFAULT_TEXT_LAYOUT: TextLayout = "text_inline";
+export const DEFAULT_IMAGE_LAYOUT: ImageLayout = "image_hero";
+export const DEFAULT_ROTATION_MODE: AdRotationMode = "fade";
+export const IMPRESSION_MIN_DWELL_MS = 300;
+export const ROTATION_ANIM_MS = 300;
+
+export function layoutsForType(type: AdType): readonly AdLayout[] {
+  return type === "text" ? TEXT_LAYOUTS : IMAGE_LAYOUTS;
+}
+
+export function defaultLayoutForType(type: AdType): AdLayout {
+  return type === "text" ? DEFAULT_TEXT_LAYOUT : DEFAULT_IMAGE_LAYOUT;
+}
+
+export function normalizeAdType(raw?: string): AdType {
+  const key = (raw ?? "").trim();
+  return key === "image" ? "image" : "text";
+}
+
+export function normalizeLayout(type: AdType, raw?: string): AdLayout {
+  const key = (raw ?? "").trim();
+  const allowed = layoutsForType(type);
+  if (allowed.includes(key as AdLayout)) {
+    return key as AdLayout;
+  }
+  return defaultLayoutForType(type);
+}
+
+export function normalizeRotationMode(raw?: string, enabled?: boolean): AdRotationMode {
+  if (!enabled) {
+    return "none";
+  }
+  const key = (raw ?? "").trim() as AdRotationMode;
+  return AD_ROTATION_MODES.includes(key) ? key : DEFAULT_ROTATION_MODE;
+}
+
+export function effectiveRotationMode(rotation?: { enabled?: boolean; mode?: string }, adCount = 0): AdRotationMode {
+  if (adCount <= 1 || !rotation?.enabled) {
+    return "none";
+  }
+  return normalizeRotationMode(rotation.mode, true);
+}
+
+export function isTextLayout(layout: AdLayout): layout is TextLayout {
+  return (TEXT_LAYOUTS as readonly string[]).includes(layout);
+}
+
+export function isImageLayout(layout: AdLayout): layout is ImageLayout {
+  return (IMAGE_LAYOUTS as readonly string[]).includes(layout);
+}

package/src/ads/context.tsx

@@ -0,0 +1,76 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+
+import { resolveGatewayUrlFromEnv } from "../gateway-url";
+import type { PublicAdsRequestContext } from "../public-ads";
+import { resolvePublishableKeyFromEnv } from "../publishable-key";
+import { adsSurfaceKey } from "../platform";
+import { appBundleId } from "./bundle-id";
+import type { InAppNavigate } from "./open-click";
+import type { AdsTheme } from "./theme";
+
+export type AdsProviderProps = {
+  /** When set with gatewayUrl, feed/events use Public Ads API (no Integration Key). */
+  publishableKey?: string;
+  /**
+   * Platform API base for Public Ads (`/v1/public/ads`).
+   * Defaults to EXPO_PUBLIC_GATEWAY_URL.
+   * Do not pass the OAuth issuer (Hosted UI login host).
+   */
+  gatewayUrl?: string;
+  /** @deprecated Use gatewayUrl */
+  publicAdsGatewayUrl?: string;
+  /** Optional; when logged in, impressions may attach user_id on public events. */
+  resolveAccessToken?: () => Promise<string | null>;
+  /** Routes `app:/path` ad clicks inside the app. Path includes an optional query. */
+  onInAppNavigate?: InAppNavigate;
+  theme?: AdsTheme;
+  children: ReactNode;
+};
+
+type AdsContextValue = {
+  resolveAccessToken?: () => Promise<string | null>;
+  onInAppNavigate?: InAppNavigate;
+  providerTheme?: AdsTheme;
+  publicAds?: PublicAdsRequestContext;
+};
+
+const AdsContext = createContext<AdsContextValue | null>(null);
+
+export function AdsProvider({
+  publishableKey,
+  gatewayUrl,
+  publicAdsGatewayUrl,
+  resolveAccessToken,
+  onInAppNavigate,
+  theme,
+  children,
+}: AdsProviderProps) {
+  const value = useMemo((): AdsContextValue => {
+    const key = publishableKey?.trim() || resolvePublishableKeyFromEnv();
+    const base =
+      gatewayUrl?.trim() ||
+      publicAdsGatewayUrl?.trim() ||
+      resolveGatewayUrlFromEnv() ||
+      "";
+    let publicAds: PublicAdsRequestContext | undefined;
+    if (key && base) {
+      publicAds = {
+        gatewayUrl: base,
+        publishableKey: key,
+        surfaceKey: adsSurfaceKey(),
+        bundleId: appBundleId(),
+      };
+    }
+    return { resolveAccessToken, onInAppNavigate, providerTheme: theme, publicAds };
+  }, [publishableKey, gatewayUrl, publicAdsGatewayUrl, resolveAccessToken, onInAppNavigate, theme]);
+
+  return <AdsContext.Provider value={value}>{children}</AdsContext.Provider>;
+}
+
+export function useAdsContext(): AdsContextValue {
+  const ctx = useContext(AdsContext);
+  if (!ctx) {
+    throw new Error("useAdsContext must be used within AdsProvider");
+  }
+  return ctx;
+}

package/src/ads/creative.tsx

@@ -0,0 +1,105 @@
+import { Image, Pressable, Text, View, type StyleProp, type ViewStyle } from "react-native";
+
+import type { AdFeedItem } from "../types";
+import type { AdCreativeStyles } from "./theme";
+
+export type AdCreativeViewProps = {
+  ad: AdFeedItem;
+  onPress: () => void;
+  styles: AdCreativeStyles;
+  contentStyle?: StyleProp<ViewStyle>;
+  showImage?: boolean;
+  variant?: "stacked" | "row" | "compact" | "inline" | "text";
+};
+
+function pressableStyle(styles: AdCreativeStyles, pressed: boolean, extra?: StyleProp<ViewStyle>) {
+  return [styles.root, pressed && styles.pressed, extra];
+}
+
+export function AdCreativeView({
+  ad, onPress, styles, contentStyle, showImage = true, variant = "stacked",
+}: AdCreativeViewProps) {
+  const hasImage = showImage && ad.type === "image" && !!ad.image_url;
+  const label = ad.title || ad.body_text || "Platform ad";
+
+  if (variant === "row" && hasImage) {
+    return (
+      <Pressable
+        onPress={onPress}
+        style={({ pressed }) => pressableStyle(styles, pressed, contentStyle)}
+        accessibilityRole="button"
+        accessibilityLabel={label}
+      >
+        <Image source={{ uri: ad.image_url }} style={styles.image} resizeMode="cover" />
+        <View style={styles.content}>
+          {ad.title ? <Text style={styles.title}>{ad.title}</Text> : null}
+          {ad.body_text ? <Text style={styles.body}>{ad.body_text}</Text> : null}
+        </View>
+      </Pressable>
+    );
+  }
+
+  if (variant === "compact" && hasImage) {
+    return (
+      <Pressable
+        onPress={onPress}
+        style={({ pressed }) => pressableStyle(styles, pressed, [contentStyle, { flexDirection: "row", alignItems: "center", gap: 8 }])}
+        accessibilityRole="button"
+        accessibilityLabel={label}
+      >
+        <Image source={{ uri: ad.image_url }} style={styles.image} resizeMode="cover" />
+        <View style={styles.content}>
+          {ad.title ? <Text style={styles.title}>{ad.title}</Text> : null}
+          {ad.body_text ? <Text style={styles.body} numberOfLines={1}>{ad.body_text}</Text> : null}
+        </View>
+      </Pressable>
+    );
+  }
+
+  if (variant === "text") {
+    return (
+      <Pressable
+        onPress={onPress}
+        style={({ pressed }) => pressableStyle(styles, pressed, contentStyle)}
+        accessibilityRole="button"
+        accessibilityLabel={label}
+      >
+        {ad.title ? <Text style={styles.title}>{ad.title}</Text> : null}
+        {ad.body_text ? <Text style={styles.body}>{ad.body_text}</Text> : null}
+        <Text style={styles.link}>Learn more</Text>
+      </Pressable>
+    );
+  }
+
+  if (hasImage) {
+    return (
+      <Pressable
+        onPress={onPress}
+        style={({ pressed }) => pressableStyle(styles, pressed, contentStyle)}
+        accessibilityRole="button"
+        accessibilityLabel={label}
+      >
+        <Image source={{ uri: ad.image_url }} style={styles.image} resizeMode="cover" />
+        {(ad.title || ad.body_text) ? (
+          <View style={styles.caption}>
+            {ad.title ? <Text style={styles.title}>{ad.title}</Text> : null}
+            {ad.body_text ? <Text style={styles.body}>{ad.body_text}</Text> : null}
+          </View>
+        ) : null}
+      </Pressable>
+    );
+  }
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => pressableStyle(styles, pressed, [contentStyle, variant === "inline" && { gap: 4 }])}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+    >
+      {ad.title ? <Text style={styles.title}>{ad.title}</Text> : null}
+      {ad.body_text ? <Text style={styles.body}>{ad.body_text}</Text> : null}
+      {variant === "inline" && ad.click_url ? <Text style={styles.link}>Learn more</Text> : null}
+    </Pressable>
+  );
+}