Back to Details

feature-flags-react-native

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

PostHog feature flags for React Native

适用于React Native应用的PostHog功能标志

This skill helps you add PostHog feature flags to React Native applications.
本技能可帮助你在React Native应用中添加PostHog功能标志。

Reference files

参考文件

  • references/react-native.md
    - React native feature flags installation - docs
  • references/adding-feature-flag-code.md
    - Adding feature flag code - docs
  • references/best-practices.md
    - Feature flag best practices - docs
Consult the documentation for API details and framework-specific patterns.
  • references/react-native.md
    - React Native功能标志安装文档
  • references/adding-feature-flag-code.md
    - 添加功能标志代码文档
  • references/best-practices.md
    - 功能标志最佳实践文档
如需API详情和框架特定模式，请查阅文档。

Key principles

核心原则

  • Environment variables: Always use environment variables for PostHog keys. Never hardcode them.
  • Minimal changes: Add feature flag code alongside existing logic. Don't replace or restructure existing code.
  • Boolean flags first: Default to boolean flag checks unless the user specifically asks for multivariate flags.
  • Server-side when possible: Prefer server-side flag evaluation to avoid UI flicker.
  • 环境变量：始终使用环境变量存储PostHog密钥，切勿硬编码。
  • 最小改动：在现有逻辑旁添加功能标志代码，不要替换或重构现有代码。
  • 优先布尔标志：默认使用布尔标志检查，除非用户明确要求多变量标志。
  • 尽可能使用服务端评估：优先选择服务端标志评估，以避免UI闪烁。

PostHog MCP tools

PostHog MCP工具

Check if a PostHog MCP server is connected. If available, look for tools related to feature flag management (creating, listing, updating, deleting flags). Use these tools to manage flags directly in PostHog rather than requiring the user to do it manually in the dashboard.
检查是否已连接PostHog MCP服务器。如果可用，查找与功能标志管理相关的工具（创建、列出、更新、删除标志）。使用这些工具直接在PostHog中管理标志，无需用户手动在控制面板操作。

Framework guidelines

框架指南

  • For feature flags, use useFeatureFlagEnabled() or useFeatureFlagPayload() hooks - they handle loading states and external sync automatically
  • Add analytics capture in event handlers where user actions occur, NOT in useEffect reacting to state changes
  • Do NOT use useEffect for data transformation - calculate derived values during render instead
  • Do NOT use useEffect to respond to user events - put that logic in the event handler itself
  • Do NOT use useEffect to chain state updates - calculate all related updates together in the event handler
  • Do NOT use useEffect to notify parent components - call the parent callback alongside setState in the event handler
  • To reset component state when a prop changes, pass the prop as the component's key instead of using useEffect
  • useEffect is ONLY for synchronizing with external systems (non-React widgets, browser APIs, network subscriptions)
  • 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
  • 对于功能标志，使用useFeatureFlagEnabled()或useFeatureFlagPayload()钩子——它们会自动处理加载状态和外部同步
  • 在用户操作发生的事件处理程序中添加分析捕获，不要在响应状态变化的useEffect中添加
  • 不要使用useEffect进行数据转换——而是在渲染期间计算派生值
  • 不要使用useEffect响应用户事件——将该逻辑放在事件处理程序本身中
  • 不要使用useEffect链式更新状态——在事件处理程序中一起计算所有相关更新
  • 不要使用useEffect通知父组件——在事件处理程序中调用父回调的同时执行setState
  • 当属性变化时重置组件状态，将属性作为组件的key传递，而不是使用useEffect
  • useEffect仅用于与外部系统同步（非React组件、浏览器API、网络订阅）
  • posthog-react-native是React Native SDK的包名
  • 使用react-native-config从.env文件加载POSTHOG_PROJECT_TOKEN和POSTHOG_HOST（变量在构建时嵌入，而非运行时）
  • react-native-svg是posthog-react-native的必需对等依赖项（用于调查功能），必须与其一起安装
  • 为兼容React Navigation v7，请将PostHogProvider放在NavigationContainer内部