How to add app id and API key in expo project

[ShivaniNTT]

I am facing issues on ios and android after installing and done steps given on https://docs.swrve.com/developer-documentation/integration/react-native/

I am using

"react-native-swrve-plugin": "^6.0.0",
"expo": "~51.0.28",
"react-native": "0.75.1",

react-native info

warn Package rn-fetch-blob contains invalid configuration: "dependency.hooks" is not allowed. Please verify it's properly linked using "npx react-native config" command and contact the package maintainers about this.
info Fetching system and libraries information...
(node:75191) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:75191) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
System:
  OS: macOS 15.3
  CPU: (12) arm64 Apple M2 Pro
  Memory: 110.77 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.13.1
    path: ~/.nvm/versions/node/v22.13.1/bin/node
  Yarn: Not Found
  npm:
    version: 10.9.2
    path: ~/.nvm/versions/node/v22.13.1/bin/npm
  Watchman:
    version: 2025.02.17.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23726.103.2422.12816248
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.12
    path: /Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.75.1
    wanted: 0.75.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

I have added AppDelegate.mm file

  // To use the EU stack, include this in your config
  // config.stack = SWRVE_STACK_EU;
  [SwrvePlugin initWithAppID: <App_id> apiKey:@"<API-key>" config:config];

in MainApplication.kt file

import com.swrve.sdk.config.SwrveConfig;
import com.swrve.sdk.config.SwrveStack;


SwrvePlugin.createInstance(this, <App_id>, <"API-key">, swrveConfig);

on react page

import SwrveSDK from 'react-native-swrve-plugin';

try {
				const ident = await SwrveSDK.identify("ID");
				alert(`Identify successful - ident ${ident}`);
			} catch (e) {
				alert(`Identify failed - ${e}`);
				console.log('Identify failed', e);
			}

app.config.js file

export default {
	expo: {
		name: 'ui-mobile',
		slug: 'di-app-name-ui-mobile',
		version: process.env.VERSION,
		icon: './assets/app-nameLogo.png',
		orientation: 'portrait',
		userInterfaceStyle: 'light',
		scheme: 'app-name',
		splash: {
			image: './assets/staticDataIcons/app-nameLogo.png',
			resizeMode: 'contain',
			backgroundColor: '#000000',
		},
		ios: {
			// buildNumber: '1.0.22',
			config: {
				usesNonExemptEncryption: false,
				branch: {
					apiKey: '@BRANCH_IO_API_KEY',
				},
			},
			supportsTablet: true,
			bundleIdentifier: 'com.diapp-name.ui.mobile',
			googleServicesFile: './config/GoogleService-Info.plist',
			infoPlist: {
				NSCameraUsageDescription: '[REASON]',
				NSMicrophoneUsageDescription: '[REASON]',
				NSPhotoLibraryUsageDescription: '[REASON]',
				GADApplicationIdentifier: process.env.GAM_IOS_APP_ID,
			},
		},
		android: {
			// versionCode: 22,
			// versionName: '1.0.22',
			adaptiveIcon: {
				foregroundImage: './assets/app-nameLogo.png',
				backgroundColor: '#000000',
			},
			config: {
				branch: {
					apiKey: '@BRANCH_IO_API_KEY',
				},
			},
			package: 'com.diapp-name.ui.mobile',
			googleServicesFile: './config/google-services.json',
			intentFilters: [
				{
					action: 'VIEW',
					data: [
						{
							scheme: 'https',
							host: 'app-namesingapore.test-app.link',
							pathPrefix: '/',
						},
					],
					category: ['BROWSABLE', 'DEFAULT'],
					extra: [
						{
							name: 'branch_force_new_session',
							value: 'true',
							type: 'boolean',
						},
					],
				},
			],
			permissions: [
				'android.permission.CAMERA',
				'android.permission.READ_MEDIA_IMAGES',
				'android.permission.READ_MEDIA_AUDIO',
				'android.permission.READ_MEDIA_VIDEO',
				'android.permission.ACCESS_MEDIA_LOCATION',
			],
		},
		web: {
			favicon: './assets/app-nameLogo.png',
		},
		extra: {
			eas: {
				projectId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
			},
		},
		plugins: [
			'@react-native-firebase/app',
			'@react-native-firebase/crashlytics',
			[
				'expo-font',
				{
					fonts: [
						'./assets/fonts/chapman/Chapman-Regular.otf',
						'./assets/fonts/chapman/Chapman-Bold.otf',
						'./assets/fonts/chapman/Chapman-SemiBold.otf',
						'./assets/fonts/chapman/Chapman-Italic.otf',
						'./assets/fonts/chapman/Chapman-Light.otf',
						'./assets/fonts/northbank/Northbank-N5.otf',
						'./assets/fonts/northbank/Northbank-N7.otf',
						'./assets/fonts/northbank/Northbank-Forward.otf',
						'./assets/fonts/northbank/Northbank-N5Slanted.otf',
						'./assets/fonts/northbank/Northbank-ForwardSlanted.otf',
						'./assets/fonts/northbank/Northbank-N5Bold.otf',
						'./assets/fonts/northbank/Northbank-N5BoldSlanted.otf',
						'./assets/fonts/nhaasgrotesk/NHaasGroteskDSStd-45Lt.otf',
						'./assets/fonts/nhaasgrotesk/NHaasGroteskDSStd-46LtIt.otf',
						'./assets/fonts/nhaasgrotesk/NHaasGroteskDSStd-55Rg.otf',
						'./assets/fonts/nhaasgrotesk/NHaasGroteskDSStd-56It.otf',
						'./assets/fonts/nhaasgrotesk/NHaasGroteskDSStd-75Bd.otf',
					],
				},
			],
			[
				'react-native-share',
				{
					ios: ['fb', 'instagram', 'twitter', 'tiktoksharesdk'],
					android: [
						'com.facebook.katana',
						'com.instagram.android',
						'com.twitter.android',
						'com.zhiliaoapp.musically',
					],
				},
			],
			[
				'@config-plugins/react-native-branch',
				{
					apiKey: process.env.BRANCH_IO_API_KEY,
				},
			],
			[
				'react-native-permissions',
				{
					iosPermissions: ['Camera', 'Microphone'],
				},
			],
			[
				'expo-secure-store',
				{
					configureAndroidBackup: true,
					faceIDPermission:
						'Allow $(PRODUCT_NAME) to access your Face ID biometric data.',
				},
			],
			[
				'expo-build-properties',
				{
					ios: {
						useFrameworks: 'static', // Ensure you are using static frameworks
						modularHeaders: true,
					},
				},
			],
			[
				'react-native-google-mobile-ads',
				{
					androidAppId: process.env.GAM_ANDROID_APP_ID,
					iosAppId: process.env.GAM_IOS_APP_ID,
					userTrackingUsageDescription:
						'This identifier will be used to deliver personalized ads to you.',
					skAdNetworkItems: ['cstr6suwn9.skadnetwork'],
				},
			],
		],
		owner: 'di-app-name-ui-mobile',
	},
};

I am getting error on android is

* What went wrong:
Execution failed for task ':app:compileDebugKotlin'.
> A failure occurred while executing org.jetbrains.kotlin.compilerRunner.GradleCompilerRunnerWithWorkers$GradleKotlinCompilerWorkAction
   > Compilation error. See log for more details```

❌ (/Users/shivanisonawane/Library/Developer/Xcode/DerivedData/uimobile-fzgupwpzffwwbccpxkskgryiewog/Build/Products/Debug-iphonesimulator/react-native-swrve-plugin/react_native_swrve_plugin.framework/Headers/SwrvePlugin.h:2:1)

1 | #import <React/RCTBridgeModule.h>

2 | @import SwrveSDK;
| ^ use of '@import' when C++ modules are disabled, consider using -fmodules and -fcxx-modules
3 |
4 | #define SWRVE_PLUGIN_VERSION "6.0.0"
5 |

❌ (/Users/shivanisonawane/Library/Developer/Xcode/DerivedData/uimobile-fzgupwpzffwwbccpxkskgryiewog/Build/Products/Debug-iphonesimulator/react-native-swrve-plugin/react_native_swrve_plugin.framework/Headers/SwrvePlugin.h:8:85)

6 | @protocol SwrvePluginNativeProtocol
7 |

8 | + (void)initWithAppID:(int)appId apiKey:(nonnull NSString *)apiKey config:(nullable SwrveConfig *)config;
| ^ expected a type
9 |
10 | + (void)handleDeeplink:(nonnull NSURL *)url;
11 |

❌ (/Users/shivanisonawane/Library/Developer/Xcode/DerivedData/uimobile-fzgupwpzffwwbccpxkskgryiewog/Build/Products/Debug-iphonesimulator/react-native-swrve-plugin/react_native_swrve_plugin.framework/Headers/SwrvePlugin.h:24:39)

22 | NS_ASSUME_NONNULL_BEGIN
23 |

24 | @Property(nonatomic, strong, nonnull) Swrve *swrveInstance;
| ^ unknown type name 'Swrve'
25 |
26 | + (void)handleAction:(NSString *)nonProcessedAction;
27 |

❌ (/Users/shivanisonawane/Library/Developer/Xcode/DerivedData/uimobile-fzgupwpzffwwbccpxkskgryiewog/Build/Products/Debug-iphonesimulator/react-native-swrve-plugin/react_native_swrve_plugin.framework/Headers/SwrvePlugin.h:24:1)

22 | NS_ASSUME_NONNULL_BEGIN
23 |

24 | @Property(nonatomic, strong, nonnull) Swrve *swrveInstance;
| ^ property with 'retain ' attribute must be of object type
25 |
26 | + (void)handleAction:(NSString *)nonProcessedAction;
27 |

❌ (ios/uimobile/AppDelegate.mm:22:3)

20 | self.initialProps = @{};
21 |

22 | SwrveConfig* config = [[SwrveConfig alloc] init];
| ^ unknown type name 'SwrveConfig'
23 | // To use the EU stack, include this in your config
24 | // config.stack = SWRVE_STACK_EU;
25 | [SwrvePlugin initWithAppID: app-id apiKey:@"" config:config];

❌ (ios/uimobile/AppDelegate.mm:22:27)

20 | self.initialProps = @{};
21 |

22 | SwrveConfig* config = [[SwrveConfig alloc] init];
| ^ use of undeclared identifier 'SwrveConfig'
23 | // To use the EU stack, include this in your config
24 | // config.stack = SWRVE_STACK_EU;
25 | [SwrvePlugin initWithAppID: app-id apiKey:@"" config:config];

[KevBrodigan]

Thanks @ShivaniNTT

For the iOS issue can you try the following:

In the xcode project can you ensure “Enable Modules (C and Objective C)” is set to true

Also can you add this line “Other C++ Flags”. (see pic attached)
-fcxx-modules

Also you can remove this line in your AppDelegate (if you have added it)
#import <SwrveSDK/SwrveSDK.h>

On the Android issue we would need to see the stack trace to help debug further.

Its prob best to move this to our Support Team to help with your setup. Can you submit a ticket to support@swrve.com and we can pick it up from there?

Thanks