Skip to main content

​
Before Getting Started

​
Overview

This guide walks you through setting up the Clix SDK in a React Native project using Expo. It covers all required steps including installing dependencies, configuring Firebase, and initializing the SDK. By following this quickstart, you can send your first notification in just a few minutes. The instructions assume you have an existing Expo project and a Firebase setup ready to use.
Prerequisites
  1. Have an Expo project created using the latest Expo CLI.
  2. Create or use an existing Firebase project in the Firebase Console.
  3. Note your Android package name and iOS bundle identifier, matching your app.json setup (Expo will prompt if missing).

​
Install React Native Firebase

You can skip this step if you already integrate React Native Firebase.
Make sure your React Native Expo project is using expo-dev-client with a local development build (not the standard Expo Go app).This is required to enable platform-native features such as push notifications.If your project isn’t using expo-dev-client yet, run the following script to install it:
 npx expo install expo-dev-client

1. Install React Native Firebase Core Module

Add the core Firebase module:
npx expo install @react-native-firebase/app @react-native-firebase/messaging expo-build-properties

2. Add Firebase Config Files

From the Firebase console download:
  • google-services.json (for Android)
  • GoogleService-Info.plist (for iOS)
Place them in your project root, then add to app.json:
{
  "expo": {
    "plugins": [
      "@react-native-firebase/app",
      "@react-native-firebase/messaging",
	  [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          },
		  "android": {
            "extraMavenRepos": [
              "../../node_modules/@notifee/react-native/android/libs"
            ]
          }
        }
      ]
    ],
    "android": {
      "package": "com.your.app",
      "googleServicesFile": "./google-services.json"
    },
    "ios": {
      "bundleIdentifier": "com.your.app",
      "googleServicesFile": "./GoogleService-Info.plist",
      "entitlements": {
        "aps-environment": "production"
      },
      "infoPlist": {
        "UIBackgroundModes": ["remote-notification"]
      }
    }
  }
}

3. Build and Run

To apply native code and config:
npx expo prebuild --clean
npx expo run:android
npx expo run:ios

​
Install React Native Firebase

1. Install Clix Dependency

Add the Clix modules:
npx expo install @clix-so/react-native-sdk @notifee/react-native react-native-device-info react-native-get-random-values react-native-mmkv uuid

2. Add Clix Initialize Code

Make sure to add the code below at the very beginning of your app’s execution — ideally where your app is first initialized.
import Clix, { ClixLogLevel } from '@clix-so/react-native-sdk';

// Initialize Clix SDK
await Clix.initialize({
  projectId: 'YOUR_PROJECT_ID',
  apiKey: 'YOUR_API_KEY'
});

3. Build and Run

To apply native code and config:
We also recommend rebooting the simulator and reinstalling the app before running it again.
npx expo prebuild --clean
npx expo run:android
npx expo run:ios