# Quick Start Guide

 Our MCP server can help you get started

Our MCP server includes SDK-installation tools that can help you get integrated quickly with Customer.io and troubleshoot any issues you might have. See [Set up an MCP server](/ai/mcp-server/) to get started.

## Setup process overview[](#setup-process-overview)

Expo provides a managed framework to help you build React Native mobile apps. Our Expo plugin relies on our React Native SDK. When you run the prebuild, we’ll generate the native files you’ll need to integrate Customer.io push notifications in your app. Then you’ll add calls to your app to `identify` people, `track` their activity, and listen for notifications.

1.  [Install the SDK.](#install)
2.  [Identify and Track](#identify-and-track)
3.  [Push Notifications](#push-notifications)
4.  [In-App](#in-app)

## 1\. Install the SDK[](#install)

1.  If you haven’t already gotten a *CDP API key*, you’ll need to add a new *Expo* integration to your Customer.io workspace. This “integration” represents your app in Customer.io and provides you the CDP API key that you’ll use to initialize your app. See [Get your CDP API key](../getting-started/auth/#get-your-cdp-api-key) for details.
    
2.  Install the Customer.io Expo plugin and React Native SDK.
    
    ```bash
    npx expo install customerio-expo-plugin customerio-reactnative
    ```
    
3.  Configure your *CDP API key* and *site ID*.
    
    *   **CDP API Key**: You’ll find this key in the **[*Expo* integration](https://fly.customer.io/workspaces/last/journeys/integrations/all/overview)** that you created in [step 1 of this section](#install).
    *   **Site ID**: You’ll find this value in your integrations under **[Customer.io API: Track](https://fly.customer.io/workspaces/last/settings/api_credentials)**.
4.  Initialize React Native SDK
    
     Auto-initialization (Expo 53+)
    
    #### Auto-initialization (Expo 53+)[](#Auto-initialization \(Expo 53+\))
    
    **Note:** Auto-initialization is supported in Expo 53+ only. For older Expo versions, use manual initialization.
    
    Add React Native SDK configuration to your `app.json` file:
    
    ```json
    {
       "expo": {
          "plugins": [
             [
                "customerio-expo-plugin",
                {
                   "config": {
                      "cdpApiKey": "<CDP API KEY>",
                      "siteId": "<SITE ID>", // Optionally, you can enable in-app messaging by adding site ID
                      "region": "us" // use "eu" if your workspace is in EU region
                   }
                }
             ]
          ]
       }
    }
    ```
    
    See [Configuration Options](../getting-started/packages-options/#auto-initialization-configuration-options-expo-53) for more details.
    
     Manual initialization
    
    #### Manual initialization[](#Manual initialization)
    
    Add your *CDP API key* and *site ID* to your `.env` file.
    
    ```env
    EXPO_PUBLIC_CDP_API_KEY=<CDP API KEY>
    EXPO_PUBLIC_SITE_ID=<SITE ID>
    ```
    
    Ensure the SDK is initialized in your app. You can call the `initialize` method from your components or services. We recommend initializing the SDK in the `useEffect` hook of your main component or layout file.
    
    ```typescript
    import { CioConfig, CustomerIO } from "customerio-reactnative";
    
    useEffect(() => {
       const initializeCustomerIO = () => {
          const config: CioConfig = {
             cdpApiKey: process.env.EXPO_PUBLIC_CDP_API_KEY,
             region: "us", // use "eu" if your workspace is in EU region
             // Optionally, you can enable in-app messaging by adding the site ID
             inApp: {
                siteId: process.env.EXPO_PUBLIC_SITE_ID,
             }
          };
          CustomerIO.initialize(config);
       };
       initializeCustomerIO();
    }, []);
    ```
    
5.  You must also add push notification options to your `app.json` file to build the native files, even if you don’t use Customer.io push notifications in your app. See [Push Notifications](#push-notifications) for more information, and then run the prebuild command.
    
    ```bash
    npx expo prebuild
    ```
    
6.  Run your application using `npx expo run:ios` or `npx expo run:android` instead of using the dev server via `npx expo start`. You need to use these commands so that the plugin can build native files that let your app receive push notifications and in-app messages.
    

## 2\. Identify and Track[](#identify-and-track)

1.  Identify a user in your app using the `CustomerIO.identify` method. You *must* identify a user before you can send push notifications and personalized in-app messages.
    
    ```typescript
    import { CustomerIO } from "customerio-reactnative";
    
    const identifyUserExample = () => {
       CustomerIO.identify({
          userId: 'expo-test-user@example.com',
          traits: {
             firstName: 'John',
             lastName: 'Doe',
             email: 'expo-test-user@example.com',
             subscriptionStatus: 'active',
          },
       });
       console.log('User identified successfully');
    };
    ```
    
2.  Track a custom event using the `CustomerIO.track` method. Events help you trigger personalized campaigns and track user activity.
    
    ```typescript
    import { CustomerIO } from "customerio-reactnative";
    
    const trackCustomEventExample = () => {
       CustomerIO.track('purchased_item', {
          product: 'Premium Subscription',
          price: 99.99,
          currency: 'USD'
       });
       console.log('Custom event tracked successfully');
    };
    ```
    
3.  Track screen views to automatically trigger in-app messages associated with specific screens.
    
    ```typescript
    import { CustomerIO } from "customerio-reactnative";
    
    const trackScreenViewExample = () => {
       CustomerIO.screen('ProductDetails');
       console.log('Screen view tracked successfully');
    };
    ```
    

## 3\. Push Notifications[](#push-notifications)

1.  Configure push notifications for iOS and Android. Update your `app.json` file with the following configuration:
    
     Auto-initialization
    
    #### Auto-initialization[](#Auto-initialization)
    
    ```json
    {
       "expo": {
          ...Other options
          "plugins": [
             [
                "customerio-expo-plugin",
                {
                   "config": {
                      "cdpApiKey": "<CDP API KEY>",
                      "region": "us" // us or eu
                   },
                   "android": {
                      "googleServicesFile": "./files/google-services.json"
                   },
                   "ios": {
                      "pushNotification": {
                         "useRichPush": true
                      }
                   }
                }
             ]
          ]
       }
    }
    ```
    
     Manual initialization
    
    #### Manual initialization[](#Manual initialization)
    
    ```json
    {
       "expo": {
          ...Other options
          "plugins": [
             [
                "customerio-expo-plugin",
                {
                   "android": {
                      "googleServicesFile": "./files/google-services.json"
                   },
                   "ios": {
                      "pushNotification": {
                         "useRichPush": true,
                         "env": {
                            "cdpApiKey": "<CDP API KEY>",
                            "region": "us" // us or eu
                         }
                      }
                   }
                }
             ]
          ]
       }
    }
    ```
    
2.  Upload your push service credentials in Customer.io under **[Settings > Workspace Settings > Push](https://fly.customer.io/workspaces/last/settings/actions/push/ios)**.
    
    *   **iOS**: upload your Apple Push Notification certificate (`.p8` file).
    *   **Android**: upload your server key json file (`.json` format).

See [Push Notifications](../push-notifications/) for detailed configuration options.

## 4\. In-App[](#in-app)

1.  To enable in-app messaging, all you need to do is add the site ID. Remember, you’ll find your site ID under **[Data & Integrations > Integrations > Customer.io API: Track](https://fly.customer.io/workspaces/last/settings/api_credentials)** in the *Connections* tab.
    
2.  Ensure that the SDK is initialized with the site ID in your app:
    
     Auto-initialization
    
    #### Auto-initialization[](#Auto-initialization)
    
    Add `siteId` to your `app.json` config:
    
    ```json
    {
       "expo": {
          "plugins": [
             [
                "customerio-expo-plugin",
                {
                   "config": {
                      "cdpApiKey": "<CDP API KEY>",
                      "siteId": "<SITE ID>",
                      "region": "us"
                   }
                }
             ]
          ]
       }
    }
    ```
    
     Manual initialization
    
    #### Manual initialization[](#Manual initialization)
    
    Add `siteId` to your environment variables and initialization config. You can call the `initialize` method from your components or services:
    
    ```env
    EXPO_PUBLIC_SITE_ID=<SITE ID>
    ```
    
    ```typescript
    import { CioConfig, CustomerIO } from "customerio-reactnative";
    import { useEffect } from "react";
    
    useEffect(() => {
       const initializeCustomerIO = () => {
          const config: CioConfig = {
             cdpApiKey: process.env.EXPO_PUBLIC_CDP_API_KEY,
             inApp: {
                siteId: process.env.EXPO_PUBLIC_SITE_ID,
             }
          };
    
          CustomerIO.initialize(config);
       };
       initializeCustomerIO();
    }, []);
    ```
    

See [In-App Messages](../in-app-messages/) for more details.