integration-react-native
Step-by-step guide for integrating PostHog analytics in React Native applications.
Install
mkdir -p .claude/skills/integration-react-native && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/14529" && unzip -o skill.zip -d .claude/skills/integration-react-native && rm skill.zipInstalls to .claude/skills/integration-react-native
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
PostHog integration for React Native applicationsKey capabilities
- →Add PostHog analytics to React Native applications
- →Configure PostHog SDK using environment variables
- →Identify users during login and signup events
- →Add PostHog error tracking
- →Maintain correlation between frontend and backend sessions
How it works
The skill guides through a four-step integration workflow, emphasizing the use of environment variables for PostHog keys and minimal code changes. It details how to identify users and add error tracking, following patterns from an example project.
Inputs & outputs
When to use integration-react-native
- →Setting up analytics tracking
- →Identifying users in React Native
- →Adding event instrumentation
About this skill
PostHog integration for React Native
This skill helps you add PostHog analytics to React Native applications.
Workflow
Follow these steps in order to complete the integration:
basic-integration-1.0-begin.md- PostHog Setup - Begin ← Start herebasic-integration-1.1-edit.md- PostHog Setup - Editbasic-integration-1.2-revise.md- PostHog Setup - Revisebasic-integration-1.3-conclude.md- PostHog Setup - Conclusion
Reference files
references/EXAMPLE.md- React Native example project codereferences/react-native.md- React native - docsreferences/identify-users.md- Identify users - docsreferences/basic-integration-1.0-begin.md- PostHog setup - beginreferences/basic-integration-1.1-edit.md- PostHog setup - editreferences/basic-integration-1.2-revise.md- PostHog setup - revisereferences/basic-integration-1.3-conclude.md- PostHog setup - conclusion
The example project shows the target implementation pattern. Consult the documentation for API details.
Key principles
- Environment variables: Always use environment variables for PostHog keys. Never hardcode them.
- Minimal changes: Add PostHog code alongside existing integrations. Don't replace or restructure existing code.
- Match the example: Your implementation should follow the example project's patterns as closely as possible.
Framework guidelines
- posthog-react-native is the React Native SDK package name
- Use react-native-config to load POSTHOG_PROJECT_TOKEN and POSTHOG_HOST from .env (variables are embedded at build time, not runtime)
- react-native-svg is a required peer dependency of posthog-react-native (used by the surveys feature) and must be installed alongside it
- Place PostHogProvider INSIDE NavigationContainer for React Navigation v7 compatibility
Identifying users
Identify users during login and signup events. Refer to the example code and documentation for the correct identify pattern for this framework. If both frontend and backend code exist, pass the client-side session and distinct ID using X-POSTHOG-DISTINCT-ID and X-POSTHOG-SESSION-ID headers to maintain correlation.
Error tracking
Add PostHog error tracking to relevant files, particularly around critical user flows and API boundaries.
When not to use it
- →The application is not a React Native application
- →The project does not use PostHog for analytics
- →The user wants to hardcode PostHog keys
Limitations
- →Requires `posthog-react-native` package
- →Requires `react-native-config` for environment variables
- →Requires `react-native-svg` as a peer dependency
How it compares
This skill provides a structured, step-by-step workflow for integrating PostHog into React Native, ensuring secure configuration and consistent tracking patterns compared to ad-hoc implementation.
Compared to similar skills
integration-react-native side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| integration-react-native (this skill) | 0 | 3mo | Review | Beginner |
| react-native-architecture | 55 | 2mo | Review | Advanced |
| claude-mobile-ios-testing | 18 | 9mo | No flags | Intermediate |
| react-native-design | 33 | 2mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
react-native-architecture
wshobson
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.
claude-mobile-ios-testing
krzemienski
Use when testing iOS apps on simulator, capturing screenshots for validation gates, automating UI testing with expo-mcp and xc-mcp, or verifying visual correctness - combines expo-mcp autonomous testing (React Native level) with xc-mcp simulator management (iOS level)
react-native-design
wshobson
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.
vercel-react-native-skills
vercel-labs
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
agent-spec-mobile-react-native
ruvnet
Agent skill for spec-mobile-react-native - invoke with $agent-spec-mobile-react-native
heroui-native
heroui-inc
HeroUI Native component library for React Native (Tailwind v4 via Uniwind). Use when working with HeroUI Native components, installing HeroUI Native, customizing themes, or accessing component documentation. Keywords: HeroUI Native, heroui-native, React Native UI, Uniwind.