SDK Installation

Install MoEngage's React Native plugin using the npm package manager. And then link your native dependencies :

$ npm install react-native-moengage
$ react-native link

After installing the plugin lets move on to platform-specific configuration.

Android

In android/settings.gradle add the following

include ':react-native-moengage'
project(':react-native-moengage').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-moengage/android')

In android/app/build.gradle add the following

dependencies {
    ...
      
    implementation project(':react-native-moengage')
    implementation "com.moengage:moe-android-sdk:9.8.04"
}

Add the MoEngage React Package in the Application class's getPackages() Also enable auto integration in the onCreate()

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(), new MoEReactPackage());
    }
  };

  @Override public void onCreate() {
    super.onCreate();
    // this is the instance of the application class and "XXXXXXXXXXX" is the APP ID from the dashboard.
   MoEngage moEngage =
        new MoEngage.Builder(this, "XXXXXXXXXXX")
  			.build();
    MoEInitializer.initialize(moEngage);
  }

  @Override
  public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
  }
}

In case you are facing issues with the import add the below import statement in your java file.

import com.moengage.react.MoEReactPackage;
import com.moengage.core.MoEngage;

iOS

🚧
NOTE:
The current react-native-moengage plugin supports MoEngage-iOS-SDK version 5.*.

CocoaPods Integration:

CocoaPods Integration is supported from react-native-moengage version 4.0.0

If using CocoaPods integration for adding the dependency, then you just have to run pod install to add our react native plugin and MoEngage-iOS-SDK pods to iOS project. Post that add "${PODS_ROOT}/../<YourProjectName>" to the Header Search Path of ReactNativeMoEngage target in Pods project as shown below :

Post-install hook in pod file:

The above can also be achieved by having a post-install hook in your pod file as shown below:

target 'YourAppTarget' do
  # list of pods
  use_native_modules!
  
  post_install do |installer|
    installer.pods_project.targets.each do |target|
      if target.name == "ReactNativeMoEngage"
        puts "Updating #{target.name} HEADER_SEARCH_PATHS"
        append_header_search_path(target, "${PODS_ROOT}/../<YourProjectName>")
      end
    end
  end

end

# Method to append header search path to a target
def append_header_search_path(target, path)
    target.build_configurations.each do |config|
        xcconfig_path = config.base_configuration_reference.real_path

        # to keep the delimiter at the end of each string:
        file_data = File.read(xcconfig_path).split(/(?<=[\S])\n/)

        # Copy current headers
        header_search_paths = ""
        header_search_paths_index = nil
        file_data.select.with_index do |val, index|
          if /HEADER_SEARCH_PATHS/ =~ val
            header_search_paths = val
            header_search_paths_index = index
          end
        end

        # Append the new header
        new_header_search_paths = header_search_paths << " #{path}"
        file_data[header_search_paths_index] = new_header_search_paths

        # Write it back to the file
        file_data = file_data.join("\n")
        File.write(xcconfig_path, file_data)
    end
end

Libraries Integration:

In case if you are using the Libraries Integration, you will have to explicitly update pod file to install our native MoEngage iOS SDK. Add MoEngage-iOS-SDK to your podfile:

pod 'MoEngage-iOS-SDK','~> 5.0.0'

After installing the Pods, select the MoEReactBridge target in MoEReactBridge.xcodeproj and go to Header Search Paths section in Build Settings as shown below. Here update the search path $(SRCROOT)/../../../ios to include your Project's main directory which contains the AppDelegate file as shown below.

🚧
NOTE:
Updating the Header Search Path is important as the MoEngage React Native plugin needs access to the AppDelegate file of your project.

🚧
NOTE :
Incase if you get errors in the test targets of the project, go to build settings of the test target and add -lc++ flag to Other Linker Flags as shown below :