> This page is part of the [Customer.io documentation](https://docs.customer.io). For the complete index, see [llms.txt](https://docs.customer.io/llms.txt).
> Last updated: August 5, 2026

# Quick start guide

 There's a new version available!

These pages cover version 4 of our SDK, but a newer version is available. In general, we suggest that you update to the latest version to take advantage of new features and fixes.

*   Are you new to our SDKs? [Check out the latest docs.](/integrations/sdk/react-native/getting-started)
*   Otherwise, [learn about updating to the latest version](/integrations/sdk/react-native/whats-new/)

 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 Customer.io MCP](/ai/mcp/get-started/) to get started.

## Setup process overview

React Native lets you build native mobile apps with JavaScript. Our React Native SDK helps you integrate Customer.io to `identify` profiles, `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

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](/integrations/sdk/react-native/4.x/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
    
    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
    
    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

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 automations 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

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

1.  To enable in-app messaging, all you need to do is add the site ID. Remember, you’ll find your site ID under **[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.

Version[](https://github.com/customerio/customerio-reactnative/releases/tag/6.6.2 "See this release in GitHub")

6.6.2 (Current)5.3.04.11.03.9.12.5.1

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

Copy page

Copy page [Download .md](/integrations/sdk/react-native/4.x/quick-start-guide.md) [Download React Native 4.x SDK bundle](/files/react-native-4.x-sdk-docs.md)

Is this page helpful?

![](https://docs.customer.io/images/export-success.png) ![](https://docs.customer.io/images/export-failure.png)

# How can we make it better?

Close

Do you need help from Customer.io support?  No  
 Yes

What part of Customer.io do you need help with? 

How can we improve this page?

Email (optional):  Please provide a valid email address

 I am not a bot

 

We appreciate your feedback!

Our support team will contact you as soon as possible