Skip to main content

​
Before Getting Started

​
Overview

This guide walks you through setting up the Clix SDK in a React Native project. 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. This guide supports both Expo and standard React Native CLI projects.
Prerequisites
  1. Have a React Native project (Expo or React Native CLI)
  2. Create or use an existing Firebase project in the Firebase Console
  3. Note your Android package name and iOS bundle identifier
  4. For Expo projects: Ensure you’re using expo-dev-client with local development builds (not Expo Go)

​
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. Prebuild Native Code

Apply native configuration:
npx expo prebuild --clean

​
Install Clix SDK

1. Install Clix Dependencies

Add the Clix SDK and required dependencies:
npx expo install @clix-so/react-native-sdk @notifee/react-native react-native-device-info react-native-get-random-values react-native-mmkv react-native-nitro-modules [email protected]
Version Compatibility
  • React Native 0.70-0.73: Use react-native-get-random-values v1.11.0 and react-native-mmkv v2.12.2
  • React Native 0.74+: Use react-native-get-random-values v1.12.0+ and react-native-mmkv v3.0.1+
  • react-native-nitro-modules is required when using react-native-mmkv v3.0.1+

2. Initialize Clix SDK

Add the Clix initialization code at the top of your index.js file:
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import App from './App';
import Clix, { ClixLogLevel } from '@clix-so/react-native-sdk';
import 'react-native-get-random-values';

// Initialize Clix SDK
Clix.initialize({
  projectId: 'YOUR_PROJECT_ID',
  apiKey: 'YOUR_API_KEY',
  logLevel: ClixLogLevel.DEBUG, // Optional
}).then(() => {
  // If you don't manually request push permission elsewhere,
  // enable auto-request to prompt users automatically
  Clix.Notification.configure({ autoRequestPermission: true });
});

AppRegistry.registerComponent(appName, () => App);

3. Build and Run

Apply native code and configuration:
We recommend rebooting the simulator and reinstalling the app before running it again.
npx expo prebuild --clean
npx expo run:android
npx expo run:ios
Known Issue: iOS 26.0 SimulatorPush notification token generation may fail on iOS 26.0 Simulator. If you encounter this issue, update to iOS 26.1 or later. See Apple Developer Forums for details.

​
Next Steps

Setup Notification Service Extension (iOS)

Complete the iOS setup by adding a Notification Service Extension to enable rich notifications with images and track delivery events.