본문으로 건너뛰기
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(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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 / 1,000자

이 양식은 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의 스킬 모두 보기

이 스킬의 문제 신고