React Native surveys installation

  1. Add PostHog to your app

    Required

    Using surveys requires PostHog's React Native SDK version >= 4.5.0. It's recommended to always use the latest version.

    Our React Native enables you to integrate PostHog with your React Native project. For React Native projects built with Expo, there are no mobile native dependencies outside of supported Expo packages.

    To install, add the posthog-react-native package to your project as well as the required peer dependencies.

    Expo apps

    Terminal
    npx expo install posthog-react-native expo-file-system expo-application expo-device expo-localization

    React Native apps

    Terminal
    yarn add posthog-react-native @react-native-async-storage/async-storage react-native-device-info react-native-localize
    # or
    npm i -s posthog-react-native @react-native-async-storage/async-storage react-native-device-info react-native-localize

    React Native Web and macOS

    If you're using React Native Web or React Native macOS, do not use the expo-file-system package since the Web and macOS targets aren't supported, use the @react-native-async-storage/async-storage package instead.

    Configuration

    With the PosthogProvider

    The recommended way to set up PostHog for React Native is to use the PostHogProvider. This utilizes the Context API to pass the PostHog client around, and enables autocapture.

    To set up PostHogProvider, add it to your App.js or App.ts file:

    App.js
    // App.(js|ts)
    import { usePostHog, PostHogProvider } from 'posthog-react-native'
    ...
    

    export function MyApp() {
        return (
            <PostHogProvider apiKey="<ph_project_api_key>" options={{
                // usually 'https://us.i.posthog.com' or 'https://eu.i.posthog.com'
                host: 'https://us.i.posthog.com', 
            }}>
                <MyComponent />
            </PostHogProvider>
        )
    }

    Then you can access PostHog using the usePostHog() hook:

    React Native
    const MyComponent = () => {
        const posthog = usePostHog()
    

        useEffect(() => {
            posthog.capture("event_name")
        }, [posthog])
    }

    Without the PosthogProvider

    If you prefer not to use the provider, you can initialize PostHog in its own file and import the instance from there:

    posthog.ts
    import PostHog from 'posthog-react-native'
    

    export const posthog = new PostHog('<ph_project_api_key>', {
      // usually 'https://us.i.posthog.com' or 'https://eu.i.posthog.com'  
      host: 'https://us.i.posthog.com' 
    })

    Then you can access PostHog by importing your instance:

    React Native
    import { posthog } from './posthog'
    

    export function MyApp1() {
        useEffect(async () => {
            posthog.capture('event_name')
        }, [posthog])
    

        return <View>Your app code</View>
    }

    You can even use this instance with the PostHogProvider:

    React Native
    import { posthog } from './posthog'
    

    export function MyApp() {
      return <PostHogProvider client={posthog}>{/* Your app code */}</PostHogProvider>
    }

  2. Install surveys dependencies

    Required
    Terminal
    yarn add react-native-safe-area-context react-native-svg
    # or
    npm i -s react-native-safe-area-context react-native-svg

  3. Add the surveys provider

    Required

    Add PostHogSurveyProvider to your app anywhere inside PostHogProvider. This component fetches surveys. It also acts as the root for where popover surveys are rendered.

    TypeScript
    <PostHogProvider /*... your config ...*/>
      <PostHogSurveyProvider>{children}</PostHogSurveyProvider>
    </PostHogProvider>

    If you're not using the PostHogProvider, add PostHogSurveyProvider to your app anywhere inside your app root component.

    TypeScript
    <YourAppRoot>
      <PostHogSurveyProvider>
    </YourAppRoot>

    You can also pass your client instance to the PostHogSurveyProvider.

    TypeScript
    <PostHogSurveyProvider client={posthog}>

Supported Features

FeatureSupport
Questions
All question types✅
Multi-question surveys✅
Confirmation message✅
Feedback button presentation❌
Conditional questions✅ >= v4.5.0
Customization / Appearance
Set colors in PostHog dashboard✅ Or override with your app theme
Shuffle questions❌
PostHog branding❌
Delay popup after screen view❌
Position config❌ Always bottom center
HTML content❌
Display conditions
Feature flag & property targeting✅
Screen targeting❌
Device type targeting✅
CSS selector matches❌
Survey wait period❌
Event triggers✅
Action triggers❌
Partial responses❌

Troubleshooting

  • Update your SDK.
  • Run a clean build if you experience issues.
  • For surveys not shown, be sure to set up the surveys provider.
  • If you have enabled surveys using feature flags, the flags are evaluated on the device once the PostHog SDK starts as early as possible. The SDK might be using the cached flags from the previous SDK start. If you have changed the flag or its condition, kill and reopen the app to force a new SDK start at least once.
    • This will also happen in production, and you might experience some delay for the new flag/conditions to take effect on your users.
    • Survey feature flag evaluation does not capture $feature_flag_called events, so the Usage tab on the feature flag page won't show anything.

Community questions

Was this page useful?

Questions about this page? or post a community question.