> ## Documentation Index
> Fetch the complete documentation index at: https://docs.clix.so/llms.txt
> Use this file to discover all available pages before exploring further.

# SDK Quickstart - React Native

> Start sending your first notification in 10 minutes.

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

<Check>
  **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)
</Check>

## Install React Native Firebase

You can skip this step if you already integrate [React Native Firebase](https://rnfirebase.io/).

<Tabs>
  <Tab title="Expo">
    <Info>
      **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:

      ```bash theme={null}
      npx expo install expo-dev-client
      ```
    </Info>

    <AccordionGroup>
      <Accordion title="1. Install React Native Firebase Core Module" defaultOpen>
        Add the core Firebase module:

        ```bash theme={null}
        npx expo install @react-native-firebase/app @react-native-firebase/messaging expo-build-properties
        ```
      </Accordion>

      <Accordion title="2. Add Firebase Config Files" defaultOpen>
        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:

        ```json theme={null}
        {
          "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"]
              }
            }
          }
        }
        ```
      </Accordion>

      <Accordion title="3. Prebuild Native Code" defaultOpen>
        Apply native configuration:

        ```bash theme={null}
        npx expo prebuild --clean
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="React Native CLI">
    <AccordionGroup>
      <Accordion title="1. Install React Native Firebase Modules" defaultOpen>
        Install the core Firebase modules:

        ```bash theme={null}
        npm install @react-native-firebase/app @react-native-firebase/messaging
        # or
        yarn add @react-native-firebase/app @react-native-firebase/messaging
        ```
      </Accordion>

      <Accordion title="2. Configure iOS" defaultOpen>
        **Add Firebase Configuration File**

        Download `GoogleService-Info.plist` from Firebase Console and add it to your Xcode project.

        **Update Podfile**

        Ensure your `ios/Podfile` has the following configuration:

        ```ruby ios/Podfile theme={null}
        platform :ios, '14.0'

        # Add this line before the target block
        use_frameworks! :linkage => :static
        $RNFirebaseAsStaticFramework = true

        target 'YourAppName' do
          # ... rest of your configuration
        end
        ```

        <Info>
          The `use_frameworks! :linkage => :static` configuration is required for proper integration with Firebase and Clix SDK dependencies.
        </Info>

        **Install Pods**

        ```bash theme={null}
        cd ios && pod install && cd ..
        ```

        **Configure AppDelegate**

        Add Firebase initialization code to your AppDelegate:

        <Tabs>
          <Tab title="React Native 0.77+ (AppDelegate.swift)">
            ```swift ios/YourApp/AppDelegate.swift theme={null}
            import UIKit
            import Firebase // Add this import

            @main
            class AppDelegate: UIResponder, UIApplicationDelegate {
              func application(
                _ application: UIApplication,
                didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
              ) -> Bool {
                FirebaseApp.configure() // Add this line
                // ... rest of your code
                return true
              }
            }
            ```
          </Tab>

          <Tab title="React Native < 0.77 (AppDelegate.mm)">
            ```objc ios/YourApp/AppDelegate.mm theme={null}
            #import "AppDelegate.h"
            #import <Firebase.h> // Add this import

            @implementation AppDelegate

            - (BOOL)application:(UIApplication *)application
                didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
            {
              [FIRApp configure]; // Add this line
              // ... rest of your code
              return YES;
            }

            @end
            ```
          </Tab>
        </Tabs>

        **Enable Capabilities in Xcode**

        1. Open your project in Xcode
        2. Select your target → Signing & Capabilities
        3. Add "Push Notifications" capability
        4. Add "Background Modes" capability and enable "Remote notifications"
        5. Add "App Groups" capability
        6. Click the "+" button under App Groups and create a new App Group with identifier: `group.clix.YOUR_BUNDLE_ID`

        <Info>
          The App Group identifier must follow the format `group.clix.{bundle_id}` (e.g., `group.clix.com.yourcompany.yourapp`). This ensures MMKV can share data between your app and extensions.
        </Info>
      </Accordion>

      <Accordion title="3. Configure Android" defaultOpen>
        **Add Firebase Configuration File**

        Download `google-services.json` from Firebase Console and place it in `android/app/`.

        **Update build.gradle Files**

        Add Google Services plugin to `android/build.gradle`:

        ```gradle theme={null}
        buildscript {
            dependencies {
                classpath 'com.google.gms:google-services:4.3.15'
            }
        }
        ```

        Apply the plugin in `android/app/build.gradle`:

        ```gradle theme={null}
        apply plugin: 'com.android.application'
        apply plugin: 'com.google.gms.google-services'
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Install Clix SDK

<Tabs>
  <Tab title="Expo">
    <AccordionGroup>
      <Accordion title="1. Install Clix Dependencies" defaultOpen>
        Add the Clix SDK and required dependencies:

        ```bash theme={null}
        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 uuid@11.1.0
        ```

        <Info>
          **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+
        </Info>
      </Accordion>

      <Accordion title="2. Initialize Clix SDK" defaultOpen>
        Add the Clix initialization code at the top of your `index.js` file:

        ```typescript theme={null}
        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);
        ```
      </Accordion>

      <Accordion title="3. Build and Run" defaultOpen>
        Apply native code and configuration:

        <Info>
          **We recommend rebooting the simulator and reinstalling the app before running it again.**
        </Info>

        ```bash theme={null}
        npx expo prebuild --clean
        npx expo run:android
        npx expo run:ios
        ```

        <Warning>
          **Known Issue: iOS 26.0 Simulator**

          Push 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](https://developer.apple.com/forums/thread/797507) for details.
        </Warning>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="React Native CLI">
    <AccordionGroup>
      <Accordion title="1. Install Clix Dependencies" defaultOpen>
        Install the Clix SDK and required dependencies:

        ```bash theme={null}
        npm install @clix-so/react-native-sdk @notifee/react-native react-native-device-info react-native-get-random-values@^1.11.0 react-native-mmkv react-native-nitro-modules uuid@11.1.0
        # or
        yarn add @clix-so/react-native-sdk @notifee/react-native react-native-device-info react-native-get-random-values@^1.11.0 react-native-mmkv react-native-nitro-modules uuid@11.1.0
        ```

        <Info>
          **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+
        </Info>
      </Accordion>

      <Accordion title="2. Install iOS Pods" defaultOpen>
        Install the iOS dependencies:

        ```bash theme={null}
        cd ios && pod install && cd ..
        ```
      </Accordion>

      <Accordion title="3. Initialize Clix SDK" defaultOpen>
        Add the Clix initialization code at the top of your `index.js` file:

        ```typescript theme={null}
        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);
        ```
      </Accordion>

      <Accordion title="4. Build and Run" defaultOpen>
        Run your application:

        **iOS**

        ```bash theme={null}
        npx react-native run-ios
        ```

        **Android**

        ```bash theme={null}
        npx react-native run-android
        ```

        <Info>
          **We recommend cleaning and rebuilding if you encounter any issues:**

          * iOS: Product → Clean Build Folder in Xcode
          * Android: `cd android && ./gradlew clean && cd ..`
        </Info>

        <Warning>
          **Known Issue: iOS 26.0 Simulator**

          Push 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](https://developer.apple.com/forums/thread/797507) for details.
        </Warning>
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Next Steps

<CardGroup cols={1}>
  <Card title="Setup Notification Service Extension (iOS)" icon="apple" href="/sdk-ios-nse">
    Complete the iOS setup by adding a Notification Service Extension to enable
    rich notifications with images and track delivery events.
  </Card>
</CardGroup>