# 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)

React Native lets you build native mobile apps with JavaScript. Our React Native SDK helps you integrate Customer.io to `identify` people, `track` their activity, and send both push notifications and in-app messages.

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)

You need to add a new *React Native* connectionRepresents an integration between Customer.io and another service or app under *[Data & Integrations > Integrations](https://fly.customer.io/workspaces/last/integrations/all/overview)*. A connection in Customer.io provides you with API keys and settings for your integration. in Customer.io to get your CDP API key. See [Get your CDP API key](../getting-started/auth/#get-your-cdp-api-key) for details.

1.  Make sure you [set up your React Native environment](https://reactnative.dev/docs/environment-setup) first. **You must use React Native 0.79 or later**.
    
2.  Open your terminal and go to your project folder.
    
3.  Install the `customerio-reactnative` package using NPM or Yarn:
    
    ```bash
    npm install customerio-reactnative
    # or
    yarn add customerio-reactnative
    ```
    
4.  Set up your project to support iOS and/or Android deployments:
    
     iOS
    
    #### iOS[](#iOS)
    
    For iOS, install CocoaPods dependencies:
    
    ```bash
    pod install --repo-update --project-directory=ios
    ```
    
    Make sure your minimum iOS deployment target is set to `13.0` in both your `Podfile` and Xcode project settings.
    
     Android
    
    #### Android[](#Android)
    
    1.  For Android, include the Google Services plugin by adding the following to your project-level `android/build.gradle` file:
        
        ```groovy
        buildscript {
            repositories {
              google()  // Google's Maven repository
            }
        
            dependencies {
              classpath 'com.google.gms:google-services:<version-here>'  // Google Services plugin
            }
        }
        
        allprojects {
            repositories {
              google()  // Google's Maven repository
            }
        }
        ```
        
    2.  Add the plugin to your app-level `android/app/build.gradle`:
        
        ```groovy
        apply plugin: 'com.google.gms.google-services'  // Google Services plugin
        ```
        
    3.  Download `google-services.json` from your Firebase project and place it in `android/app/google-services.json`.
        
    
5.  Add your *CDP API key* and *site ID* to your configuration.
    
    *   **CDP API Key**: You’ll find this key in your [*React Native* connection](https://fly.customer.io/workspaces/last/pipelines/sources).
    *   **Site ID**: You’ll find this value in your workspace under **[Settings > Workspace Settings > API and webhook credentials](https://fly.customer.io/workspaces/last/settings/api_credentials)**.
6.  Initialize the SDK in your app. Add the following code to your main component or App.js file:
    
    ```typescript
    import React, { useEffect } from 'react';
    import { 
      CioConfig, 
      CioRegion, 
      CioLogLevel, 
      CustomerIO,
      PushClickBehaviorAndroid
    } from 'customerio-reactnative';
    
    useEffect(() => {
      const initializeCustomerIO = async () => {
        const config: CioConfig = {
          cdpApiKey: 'YOUR_CDP_API_KEY', // Required
          region: CioRegion.US, // Replace with CioRegion.EU if your Customer.ioaccount is in the EU
          logLevel: CioLogLevel.Debug,
          trackApplicationLifecycleEvents: true,
          inApp: {
            siteId: 'YOUR_SITE_ID', // Required for in-app messaging
          }
        };
        await CustomerIO.initialize(config);
      };
      initializeCustomerIO();
    }, []);
    ```
    
7.  Run your application to ensure everything is set up correctly:
    
    *   **iOS**: `npx react-native run-ios`
    *   **Android**: `npx react-native run-android`

## 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 = async () => {
      await CustomerIO.identify({
        userId: 'react-native-test-user@example.com',
        traits: {
          firstName: 'John',
          lastName: 'Doe',
          email: 'react-native-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 = async () => {
      await CustomerIO.track('purchased_item', {
        product: 'Premium Subscription',
        price: 99.99,
        currency: 'USD'
      });
      console.log('Custom event tracked successfully');
    };
    ```
    
3.  Track screen views to trigger in-app messages associated with specific screens.
    
    ```typescript
    import { CustomerIO } from "customerio-reactnative";
    
    const trackScreenViewExample = async () => {
      await CustomerIO.screen('ProductDetails');
      console.log('Screen view tracked successfully');
    };
    ```
    

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

1.  Set up your push notification credentials in Customer.io:
    
    *   **iOS**: [Upload your Apple Push Notification certificate](https://fly.customer.io/workspaces/last/settings/actions/push/ios) (.p8 file).
    *   **Android**: [Upload your Firebase Cloud Messaging server key](https://fly.customer.io/workspaces/last/settings/actions/push/android) (.json format).
2.  Request push notification permissions from the user:
    
    ```typescript
    import { CustomerIO, CioPushPermissionStatus } from "customerio-reactnative";
    
    const requestPushPermissions = async () => {
      const permissionStatus = await CustomerIO.pushMessaging.showPromptForPushNotifications({
        ios: { 
          sound: true, 
          badge: true 
        }
      });
    
      switch (permissionStatus) {
        case CioPushPermissionStatus.Granted:
          console.log('Push notifications enabled');
          break;
        case CioPushPermissionStatus.Denied:
        case CioPushPermissionStatus.NotDetermined:
          console.log('Push notifications denied');
          break;
      }
    };
    ```
    
3.  For iOS: to ensure that metrics are tracked, configure Background Modes. In Xcode, enable “Remote notifications” under Capabilities > Background Modes.
    
4.  For Android: add notification icon resources:
    
    *   Place a notification icon file named `ic_notification.png` in your drawable folders.
    *   Make sure your app’s `AndroidManifest.xml` has the proper FCM permissions.

## 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. You can call the `initialize` method from your components or services:
    

```typescript
import { CioConfig, CustomerIO } from "customerio-reactnative";
import { useEffect } from "react";

useEffect(() => {
  const initializeCustomerIO = async () => {
    const config: CioConfig = {
      cdpApiKey: 'YOUR_CDP_API_KEY',
      inApp: {
        siteId: 'YOUR_SITE_ID',
      }
    };

    await CustomerIO.initialize(config);
  };
  initializeCustomerIO();
}, []);
```

 Check out our code samples!

You’ll find a complete, working sample app in our [React Native SDK’s example directory](https://github.com/customerio/customerio-reactnative/tree/main/example). If you get stuck, you can refer to the sample app to see how everything fits together.