# React Native web analytics installation - Docs

1.  1

    ## Install the package

    Required

    Install the PostHog React Native library and its dependencies:

    PostHog AI

    ### Expo

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

    ### yarn

    ```bash
    yarn add posthog-react-native @react-native-async-storage/async-storage react-native-device-info react-native-localize
    # for iOS
    cd ios && pod install
    ```

    ### npm

    ```bash
    npm i -s posthog-react-native @react-native-async-storage/async-storage react-native-device-info react-native-localize
    # for iOS
    cd ios && pod install
    ```

2.  2

    ## Configure PostHog

    Required

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

    App.tsx

    PostHog AI

    ```jsx
    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.  3

    ## Track screen views

    Recommended

    Despite the name, the web analytics dashboard can be used to track screen views in mobile apps, too. Open your app and view some screens to generate some events.

    To automatically capture screen views with React Navigation, use the `usePostHogCapture` hook:

    App.tsx

    PostHog AI

    ```jsx
    import { usePostHogCapture } from 'posthog-react-native'
    import { NavigationContainer } from '@react-navigation/native'
    function App() {
        const routeNameRef = useRef<string>()
        const navigationRef = useRef<NavigationContainerRef<any>>()
        const captureEvent = usePostHogCapture()
        return (
            <NavigationContainer
                ref={navigationRef}
                onReady={() => {
                    routeNameRef.current = navigationRef.current?.getCurrentRoute()?.name
                }}
                onStateChange={async () => {
                    const previousRouteName = routeNameRef.current
                    const currentRouteName = navigationRef.current?.getCurrentRoute()?.name
                    if (previousRouteName !== currentRouteName) {
                        captureEvent('$screen', { $screen_name: currentRouteName })
                    }
                    routeNameRef.current = currentRouteName
                }}
            >
                {/* App content */}
            </NavigationContainer>
        )
    }
    ```

4.  4

    ## Next steps

    Recommended

    After installing PostHog and ensuring [autocapture](/docs/data/autocapture.md) is enabled, head to your [web analytics dashboard](/docs/web-analytics/dashboard.md) to see your data. And then check out our [getting started](/docs/web-analytics/getting-started.md) guide.

    > **PostHog tip:** Web analytics works with [anonymous events](/docs/data/anonymous-vs-identified-events.md). This means if you are primarily using PostHog for web analytics, it can be significantly cheaper for you.

### Community questions

Ask a question

### Was this page useful?

HelpfulCould be better