React Native surveys installation

  1. Install the package

    Required

    Install the PostHog React Native library and its dependencies:

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

  2. Configure PostHog

    Required

    PostHog is most easily used via the PostHogProvider component. Wrap your app with the provider:

    App.tsx
    import { PostHogProvider } from 'posthog-react-native'
    

    export function MyApp() {
        return (
            <PostHogProvider
                apiKey="<ph_project_token>"
                options={{
                    host: "https://us.i.posthog.com",
                }}
            >
                <RestOfApp />
            </PostHogProvider>
        )
    }

  3. Send events

    Recommended

    Once installed, PostHog will automatically start capturing events. You can also manually send events using the usePostHog hook:

    Component.tsx
    import { usePostHog } from 'posthog-react-native'
    

    function MyComponent() {
        const posthog = usePostHog()
    

        const handlePress = () => {
            posthog.capture('button_pressed', {
                button_name: 'signup'
            })
        }
    

        return <Button onPress={handlePress} title="Sign Up" />
    }

  4. Install surveys dependencies

    Required

    Other than the PostHog SDK, Surveys requires a few additional dependencies to be installed.

    yarn add react-native-safe-area-context react-native-svg

  5. 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.

    App.tsx
    <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.

    App.tsx
    <YourAppRoot>
      <PostHogSurveyProvider>{children}</PostHogSurveyProvider>
    </YourAppRoot>

    You can also pass your client instance to the PostHogSurveyProvider.

    App.tsx
    <PostHogSurveyProvider client={posthog}>
        {children}
    </PostHogSurveyProvider>

  6. Next steps

    Recommended

    After installing the PostHog SDK, you can create your first survey.

    ResourceDescription
    Creating surveysLearn how to build and customize your surveys
    Targeting surveysShow surveys to specific users based on properties, events, or feature flags
    How to create custom surveysBuild advanced survey experiences with custom code
    Framework guidesSetup guides for React, Next.js, Vue, and other frameworks
    More tutorialsOther real-world examples and use cases

    You should also identify users and capture events with PostHog to control who and when to show surveys to your users.

    Not all survey features are available on every SDK. See the SDK feature support matrix for a full comparison.

Supported Features

Not all survey features are available on every SDK. See the SDK feature support matrix for a full comparison.

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.