跳到正文
cccskills
免费在 GitHub 公开

integration-react-native

Install and configure PostHog analytics SDK in React Native applications, including event tracking, feature flags, user identification, and error tracking. Use when the user needs to add PostHog analytics, session recording, or feature flags to a React Native app.

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(8)

  • SKILL.md2.6 KB
  • references/basic-integration-1.0-begin.md2.1 KB
  • references/basic-integration-1.1-edit.md2.5 KB
  • references/basic-integration-1.2-revise.md937 B
  • references/basic-integration-1.3-conclude.md1.6 KB
  • references/EXAMPLE.md71.3 KB
  • references/identify-users.md8.1 KB
  • references/react-native.md43.9 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

PostHog Integration for React Native

Set up PostHog analytics in a React Native application: install the SDK, configure the provider, implement event tracking, identify users, and add error tracking.

Workflow

Follow these steps in order:

  1. basic-integration-1.0-begin.md - PostHog Setup - Begin Start here
  2. basic-integration-1.1-edit.md - PostHog Setup - Edit
  3. basic-integration-1.2-revise.md - PostHog Setup - Revise
  4. basic-integration-1.3-conclude.md - PostHog Setup - Conclusion

Reference files

  • references/EXAMPLE.md - React Native example project code
  • references/react-native.md - React Native SDK docs
  • references/identify-users.md - User identification docs

Framework guidelines

  • Install posthog-react-native and its required peer dependency react-native-svg
  • Use react-native-config to load POSTHOG_PROJECT_TOKEN and POSTHOG_HOST from .env (embedded at build time, not runtime)
  • Place PostHogProvider INSIDE NavigationContainer for React Navigation v7 compatibility

Minimal provider setup:

import PostHog, { PostHogProvider } from 'posthog-react-native';
import Config from 'react-native-config';

const posthogClient = new PostHog(Config.POSTHOG_PROJECT_TOKEN, {
  host: Config.POSTHOG_HOST,
});

// Inside your App component, wrap content within NavigationContainer:
<NavigationContainer>
  <PostHogProvider client={posthogClient}>
    {/* app content */}
  </PostHogProvider>
</NavigationContainer>

Identifying users

Identify users during login and signup events. Pass the client-side session and distinct ID using X-POSTHOG-DISTINCT-ID and X-POSTHOG-SESSION-ID headers to maintain frontend/backend correlation. Refer to references/identify-users.md and references/EXAMPLE.md for the correct pattern.

Error tracking

Add PostHog error tracking around critical user flows and API boundaries. Capture errors with posthog.capture('$exception', { $exception_message: error.message }).

Verification

After completing the integration:

  1. Run the app and trigger a test event
  2. Confirm the event appears in the PostHog project dashboard within 60 seconds
  3. Verify user identification by checking the "Persons" tab for the identified user

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Skill for adding or updating educational algorithm guides, ensuring consistent patterns and simple explanations suitable for an 8-year-old.

中文简介正在准备中。当前显示原文说明。

rkmahale17/rulcode.com152026年10月12日 更新

PostHog integration for React Router v6 applications

中文简介正在准备中。当前显示原文说明。

rkmahale17/rulcode.com152026年10月12日 更新

Develop and extend the RulCode technical interview preparation platform built with React, Vite, TypeScript, and Supabase. Use when adding new algorithm problems, building visualization components, implementing DSA topic pages, updating the problem editor, or modifying the interview preparation UI.

中文简介正在准备中。当前显示原文说明。

rkmahale17/rulcode.com152026年10月12日 更新

Scan the repository for hardcoded secrets, exposed API keys, insecure network configurations, and vulnerable dependencies. Use when the user asks for a security audit, secret detection, credential scan, vulnerability check, or wants to find leaked tokens in the codebase.

中文简介正在准备中。当前显示原文说明。

rkmahale17/rulcode.com152026年10月12日 更新

Skill for adding or updating system design guides tailored for college students and beginners, using simple analogies and no simulations.

中文简介正在准备中。当前显示原文说明。

rkmahale17/rulcode.com152026年10月12日 更新

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

中文简介正在准备中。当前显示原文说明。

rkmahale17/rulcode.com152026年10月12日 更新

查看 rkmahale17 的全部技能

报告此技能的问题