# Screen tracking

Screen views are events that record the pages that your audience visits in your app. They have a `type` property set to `screen`, and a `name` representing the title of the screen or page that a person visited in your app.

Screen view events let you trigger [campaignsCampaigns are automated workflows you set up to send people messages and perform other actions when they meet your criteria.](/journeys/campaigns-in-customerio/) or add people to [segmentsA group of people who match a series of conditions. People enter and exit the segment automatically when they match or stop matching conditions.](/journeys/data-driven-segments/) based on the parts of your app your audience uses. Screen view events also update your audience’s “Last Visited” attribute, which can help you track how recently people used your app.

## Enable automatic screen tracking[](#auto-screenview)

The example below shows one way to implement automatic screen tracking using Expo Router. Use this as inspiration—every app can have its own navigation patterns and screen tracking requirements.

**Not using Expo Router?** If your Expo project renders its own `NavigationContainer` with React Navigation, checkout our [React Native screen-tracking example](/integrations/sdk/react-native/tracking/screen-events/#auto-screenview) for ideas you can adapt to your own implementation.

If you want to send more data with screen events, or you don’t want to send events for every individual screen that people view in your app, you [send screen events manually](#manual-screenview).

### Requirements and limitations[](#requirements-and-limitations)

This approach requires:

*   **Expo Router**: This example only works with apps using Expo Router (not React Navigation or other navigation libraries). Learn more in the [Expo Router documentation](https://docs.expo.dev/router/introduction/).
*   **Expo SDK 49+**: The `usePathname` and `useGlobalSearchParams` hooks require recent Expo versions. Check the [Expo SDK upgrade guide](https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/) for migration details.
*   **File-based routing**: Your app must use Expo Router’s file-based routing structure. See the [file-based routing guide](https://docs.expo.dev/router/create-pages/) for setup instructions.

 This example works well with standard Expo Router setups. Since every app has unique navigation patterns and configurations, we recommend testing this implementation in your development environment first. You may need to adjust the code based on your specific Expo workflow (managed vs. bare) or custom routing needs. For navigation-specific questions or customizations, the Expo Router documentation and community forums are great resources.

With Expo Router, screen tracking is straightforward because it always has access to a URL. Create a higher-order component that observes the currently selected URL and tracks it in your analytics provider.

```javascript
import { useEffect } from 'react';
import { usePathname, useGlobalSearchParams, Slot } from 'expo-router';
import { CustomerIO } from 'customerio-reactnative';

export default function Layout() {
  const pathname = usePathname();
  const params = useGlobalSearchParams();

  // Track the location in your analytics provider
  useEffect(() => {
    CustomerIO.screen(pathname, params);
  }, [pathname, params]);

  // Export all the children routes
  return <Slot />;
}
```

Place this code in your `app/_layout.tsx` file to track screen changes throughout your app. **Test thoroughly** in your development environment before deploying.

### Screenview settings for in-app messages[](#screenview-settings-for-in-app-messages)

Customer.io uses `screen` events to determine where users are in your app so you can target them with in-app messages on specific screens. By default, the SDK sends `screen` events to Customer.io’s backend servers. But, if you don’t use `screen` events to track user activity, segment your audience, or to trigger campaigns, these events might constitute unnecessary traffic and event history.

If you don’t use `screen` events for anything other than in-app notifications, you can set the `ScreenViewUse` parameter to `ScreenView.InApp`. This setting stops the SDK from sending `screen` events back to Customer.io but still allows the SDK to use `screen` events for in-app messages, so you can target in-app messages to the right screen(s) without sending event traffic into Customer.io!

```javascript
import {
  CioLogLevel, CioRegion, CustomerIO, CioConfig
} from 'customerio-reactnative';

const App = () => {

useEffect(() => {
   const config: CioConfig = {
      cdpApiKey: 'CDP API Key', // Mandatory
      region: CioRegion.US,
      screenViewUse: ScreenView.All
      trackApplicationLifecycleEvents: true,
      inApp: {
         siteId: 'site_id',
      }
   };
   CustomerIO.initialize(config)
   }, [])
}
```

## Send your own screen events[](#manual-screenview)

Screen events use the `.screen` method. Like other event types, you can add a `data` object containing additional information about the event or the currently-identified person.

```javascript
CustomerIO.screen("screen-name", {"property": "value"})
```