<AppgramProvider config={{ projectId: 'YOUR_PROJECT_ID', orgSlug: 'org', projectSlug: 'project', apiUrl: 'https://api.appgram.dev', theme: { mode: 'system' } }}>
  {children}
</AppgramProvider>

• 使用现成的 UI 组件或无头钩子：

<WishList onWishPress={(wish) => console.log(wish)} />
<SupportForm onSuccess={() => Alert.alert('Sent')} />
// 钩子
const { wishes, isLoading, refetch } = useWishes()
const { vote } = useVote()

功能映射（组件 → 钩子）

• 反馈：WishList、WishCard、VoteButton、WishDetailModal、SubmitWishSheet → useWishes、useVote、useComments。
• 路线图：RoadmapBoard → useRoadmap。
• 发布/更新日志：Releases、ReleaseList、ReleaseDetail → useReleases、useRelease。
• 帮助中心：HelpCenter、HelpFlowCard、HelpFlowDetail、HelpArticleCard、HelpArticleDetail → useHelpCenter、useHelpFlow、useHelpArticle。
• 支持与表单：SupportForm、FormRenderer → useSupport、useForm、useFormSubmit。
• 调查：SurveyForm → useSurvey、useSurveySubmit。
• 博客：Blog、BlogList、BlogCard、BlogPostDetail → useBlogPosts、useBlogPost、useBlogCategories、useFeaturedPosts。
• 状态：StatusBoard → useStatus。
• 聊天：ChatScreen（提供 ChatSource 类型）—— 根据需要通过上下文客户端拉取数据。
• 基础 UI 组件：Button、Card、Badge、Input，用于保持一致的样式。

钩子模式： 钩子返回数据 + isLoading（通常还有 error、refetch）；许多钩子接受 refreshInterval 和过滤属性（参见导出的选项/结果类型）。

属性与选项详情

• 钩子：参见 references/hooks.md（选项、返回结构、如 refreshInterval 和设备指纹识别等行为）。
• 组件：参见 references/components.md（每个组件的用途 + 关键属性）。

配置与主题

• AppgramProvider.config：
  • projectId（必需），orgSlug/projectSlug 用于路由。
  • apiUrl 用于覆盖自托管/暂存环境（默认为 https://api.appgram.dev）。
  • enableFingerprinting（默认为 true）使用 AsyncStorage + 设备信息进行匿名投票。
  • theme：mode（light|dark|system），可选的 lightColors/darkColors 部分覆盖；默认值来自 Hazel 设计系统。
• 访问上下文：useAppgramContext() → { client, config, fingerprint, theme }。
• 自定义 UI 中的主题：useAppgramTheme() → { colors, spacing, radius, typography, isDark, mode }；调色板导出 lightColors、darkColors，以及可重用的 spacing、radius、typography 比例。

主题使用示例

const { colors, spacing, radius } = useAppgramTheme()
return (
  <Card style={{ backgroundColor: colors.background, padding: spacing.lg, borderRadius: radius.lg }}>
    <WishList submitButtonText=\"Suggest a feature\" />
  </Card>
)

API 客户端

• 从上下文中获取已实例化的 AppgramClient：const { client } = useAppgramContext()。
• 方法对应钩子（例如，client.getWishes、client.vote、client.getRoadmap）；响应遵循从 types 导出的 ApiResponse / PaginatedResponse 类型。
• 当你需要命令式流程（例如，导航前预取）或自定义缓存时使用。

本地开发与维护（此仓库）

• 安装开发依赖：npm install。
• 代码检查：npm run lint；类型检查：npm run typecheck。
• 构建包：npm run build（使用 builder-bob，输出到 lib/）；通过 prepare 脚本在 npm install 时自动运行。
• 文档：npm run docs:json（typedoc）→ docs.json；npm run docs:transform（使用 transform-docs.js）；npm run docs:build 执行两者。
• 发布（准备就绪时）：npm run release（假设已进行 npm 认证和版本号更新）。保持 package.json 中的 react-native-builder-bob 配置；构建使用 tsconfig.build.json。

平台设置与调试

• 安装顺序、pod install、Gradle 检查、缓存清理和平台注意事项：references/platform-setup.md。

常用示例

• 自定义投票按钮： 使用 useVote；传递 onVote 以同步本地计数；如果缺少设备指纹，则通过提示启用 cookie/存储来防护。
• 支持与魔法链接： 使用 useSupport；调用 requestMagicLink(email) 然后 verifyToken(token)；工单也保存在本地（storedTickets、clearStoredTickets）。
• 嵌入更新日志标签页： 使用 Releases 的堆栈导航器屏幕；按下时，导航到包装了 ReleaseDetail 的详情屏幕。
• 匿名愿望清单： 保持 enableFingerprinting 开启（默认）；如果隐私要求，设置为 false 并禁用投票 UI。
• 博客索引 + 详情： 使用 BlogList 作为首页；如果需要无限滚动，使用 useBlogPosts；按下时路由到 BlogPostDetail。
• 状态页面横幅： 调用 useStatus({ slug, refreshInterval: 60000 }) 并使用 data.status 渲染一个小的内联横幅。
• 参见 references/snippets.md 中可粘贴的代码。

故障排除

• 缺少对等依赖 / 原生链接：确保所有对等依赖已安装；为 iOS 运行 npx pod-install；如果符号缺失，请清除 Metro 缓存。
• 主题未应用：验证 theme.mode 未被系统覆盖；自定义主色/背景色/前景色时，同时传递浅色/深色覆盖。
• 匿名投票被阻止：如果无法生成设备指纹，设置 enableFingerprinting=false，或确保 AsyncStorage 在环境中正常工作。
• API 错误：确认 projectId/slugs 和 apiUrl；使用 client 方法检查 response.success 和 response.error。
• 版本支持：为 React Native ≥0.70 和 React 18+ 构建。确保 react-native-svg 和 lucide-react-native 版本保持兼容。

参考（按需加载）

• 钩子选项/返回值：references/hooks.md
• 组件属性说明：references/components.md
• API 客户端方法 + 说明：references/api-client.md
• 平台设置与调试：references/platform-setup.md
• 实用代码片段：references/snippets.md

每周安装量

1

仓库

appgram/react-native

首次出现

1 天前

安全审计

Gen Agent Trust HubPassSocketFailSnykWarn

安装于

amp1

cline1

opencode1

cursor1

kimi-cli1

codex1

Install: npm install @appgram/react-native then peer deps npm install @react-native-async-storage/async-storage lucide-react-native react-native-svg react-native-markdown-display react-native-render-html.

Feature map (components → hooks)

• Feedback: WishList, WishCard, VoteButton, WishDetailModal, SubmitWishSheet → useWishes, useVote, useComments.
• Roadmap: RoadmapBoard → useRoadmap.
• Releases/Changelog: Releases, ReleaseList, ReleaseDetail → useReleases, useRelease.
• Help Center: HelpCenter, HelpFlowCard, HelpFlowDetail, HelpArticleCard, HelpArticleDetail → useHelpCenter, useHelpFlow, useHelpArticle.
• Support & Forms: SupportForm, FormRenderer → useSupport, useForm, useFormSubmit.
• Surveys: SurveyForm → useSurvey, useSurveySubmit.
• Blog: Blog, BlogList, BlogCard, BlogPostDetail → useBlogPosts, useBlogPost, useBlogCategories, useFeaturedPosts.
• Status: StatusBoard → useStatus.
• Chat: ChatScreen (ChatSource type available) – pull data via context client as needed.
• Base UI bits: Button, Card, Badge, Input for consistent styling.

Hook pattern: hooks return data + isLoading (and often error, refetch); many accept refreshInterval and filter props (see exported option/result types).

Props & options details

• Hooks: see references/hooks.md (options, return shapes, behaviors like refreshInterval and fingerprinting).
• Components: see references/components.md (purpose + key props per component).

Configuration & theming

• AppgramProvider.config:
  • projectId (required), orgSlug/projectSlug for routing.
  • apiUrl override for self-host/staging (default https://api.appgram.dev).
  • enableFingerprinting (default true) uses AsyncStorage + device info for anonymous votes.
  • theme: mode (light|dark|system), optional lightColors/darkColors partial overrides; defaults from Hazel design system.
• Access context: useAppgramContext() → { client, config, fingerprint, theme }.
• Theming in custom UI: useAppgramTheme() → { colors, spacing, radius, typography, isDark, mode }; palette exports lightColors, darkColors, scales spacing, radius, typography for reuse.

Sample themed usage

const { colors, spacing, radius } = useAppgramTheme()
return (
  <Card style={{ backgroundColor: colors.background, padding: spacing.lg, borderRadius: radius.lg }}>
    <WishList submitButtonText=\"Suggest a feature\" />
  </Card>
)

API client

• Get the instantiated AppgramClient from context: const { client } = useAppgramContext().
• Methods mirror hooks (e.g., client.getWishes, client.vote, client.getRoadmap); responses follow ApiResponse / PaginatedResponse types exported from types.
• Use when you need imperative flows (e.g., prefetch before navigation) or custom caching.

Local development & maintenance (this repo)

• Install dev deps: npm install.
• Lint: npm run lint; typecheck: npm run typecheck.
• Build package: npm run build (builder-bob, outputs to lib/); runs automatically on npm install via prepare.
• Docs: npm run docs:json (typedoc) → docs.json; npm run docs:transform (uses transform-docs.js); npm run docs:build to do both.
• Publish (when ready): npm run release (assumes npm auth + version bump). Keep react-native-builder-bob config in package.json; build uses tsconfig.build.json.

Platform setup & debugging

• Install order, pod install, Gradle check, cache clears, and platform notes: references/platform-setup.md.

Common recipes

• Custom vote button: use useVote; pass onVote to sync local counts; guard for missing fingerprint by showing a prompt to enable cookies/storage.
• Support with magic link: use useSupport; call requestMagicLink(email) then verifyToken(token); tickets also saved locally (storedTickets, clearStoredTickets).
• Embed changelog tab: stack navigator screen with Releases; on press, navigate to detail screen wrapping ReleaseDetail.
• Anonymous wishlist: keep enableFingerprinting on (default); if privacy requires, set false and disable voting UI.
• Blog index + detail: BlogList for landing; use useBlogPosts if you need infinite scroll; route to BlogPostDetail on press.
• Status page banner: call useStatus({ slug, refreshInterval: 60000 }) and render a small inline banner with data.status.
• See ready-to-paste code in references/snippets.md.

Troubleshooting

• Missing peer deps / native linking: ensure all peers installed; run npx pod-install for iOS; clear Metro cache if symbols missing.
• Theming not applying: verify theme.mode not overridden by system; pass both light/dark overrides when customizing primary/background/foreground.
• Anonymous voting blocked: set enableFingerprinting=false if fingerprint cannot be generated, or ensure AsyncStorage works in environment.
• API errors: confirm projectId/slugs and apiUrl; use client methods to inspect response.success and response.error.
• Version support: built for React Native ≥0.70 and React 18+. Ensure react-native-svg and lucide-react-native versions stay compatible.

References (load on demand)

• Hooks options/returns: references/hooks.md
• Components props notes: references/components.md
• API client methods + notes: references/api-client.md
• Platform setup & debugging: references/platform-setup.md
• Practical code snippets: references/snippets.md

Weekly Installs

1

Repository

appgram/react-native

First Seen

1 day ago

Security Audits

Gen Agent Trust HubPassSocketFailSnykWarn

Installed on

amp1

cline1

opencode1

cursor1

kimi-cli1

codex1