Get Started

16min
The Cooee's React Native plugin for customer engagement gives your team the power to easily integrate it into your CReact Native application. Follow these simple steps:
Add Plugin
Install the plugin using the popular single commands in the Terminal/PowerShell:
YARN
NPM
|
yarn add @letscooee/react-native
yarn add @letscooee/react-native
﻿
NPM/YARN will automatically pull the latest version of the plugin.
﻿
Static Libray compatibility (iOS only) (Required)
If your react native iOS application uses the Flipper library, these steps are for you.
This plugin depends on CooeeSDK which is a framework. To make it compatible with the iOS static library, you need to follow the below steps:
Add below line to Podfile present in ios/ folder
Podfile
|
require_relative '../node_modules/@letscooee/react-native/scripts/cooee_static_pod'
require_relative '../node_modules/@letscooee/react-native/scripts/cooee_static_pod'
﻿
Append the following pre_install script in Podfile present at ios/ folder.
Podfile
|
target 'APPLICATION_NAME' to
    ...
    pre_install do |installer|
        setup_cooee(installer)
    end
    ...
end
target 'APPLICATION_NAME' to
    ...
    pre_install do |installer|
        setup_cooee(installer)
    end
    ...
end
﻿
Configure Credentials
Android
Add the following in AndroidManifest.xml inside the application tag:
XML
|
<application
    tools:replace="android:name"
    ...
    >
    <meta-data
        android:name="COOEE_APP_ID"
        android:value="MY_COOEE_APP_ID"/>

    <!-- Sets configuration for com.google.ar.core -->
    <meta-data android:name="com.google.ar.core" android:value="optional" />
<application
    tools:replace="android:name"
    ...
    >
    <meta-data
        android:name="COOEE_APP_ID"
        android:value="MY_COOEE_APP_ID"/>

    <!-- Sets configuration for com.google.ar.core -->
    <meta-data android:name="com.google.ar.core" android:value="optional" />
﻿
iOS
Add the following snippet in the app level Info.plist:
Plist
|
<key>COOEE_APP_ID</key>
<string>MY_COOEE_APP_ID</string>
<key>COOEE_APP_ID</key>
<string>MY_COOEE_APP_ID</string>
﻿
Replace MY_COOEE_APP_ID with the App ID which is present at Cooee Portal.
Permission Usage
Android (Optional)
Cooee SDK supports prompting the following permissions via engagement. To make it work, you need to add the following to the app's AndroidManifest.xml file present in android/app/src/main/ folder.
XML
|
<!-- Cooee SDK use this permission to run Augmented Reality engagements -->
<uses-permission android:name="android.permission.CAMERA" />

<!-- Cooee SDK use this permission to run Location based engagements -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!-- Cooee SDK use this permission to run Augmented Reality engagements -->
<uses-permission android:name="android.permission.CAMERA" />

<!-- Cooee SDK use this permission to run Location based engagements -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
﻿
iOS (Required)
Cooee SDK uses a few permission if granted (we do not ask explicitly) for analysing the user. This helps us to create and deliver better notifications and in-apps. Apple requires a user-friendly description of such permissions as defined here. 
Add the following permission description to App's Info.plist file present at ios/APPLICATION_NAME/ folder.
Plist
|
<key>NSLocationWhenInUseUsageDescription</key>
<string>App uses location to search retailer location</string>
<key>NSBluetoothAlwaysUsageDescription</key>
<string>App uses Bluetooth to find out nearby devices</string>
<key>NSCameraUsageDescription</key>
<string>Need to access your camera for a better AR experience.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>App uses location to search retailer location</string>
<key>NSBluetoothAlwaysUsageDescription</key>
<string>App uses Bluetooth to find out nearby devices</string>
<key>NSCameraUsageDescription</key>
<string>Need to access your camera for a better AR experience.</string>
﻿
Configure Native code
Android
Open your MainApplication class present in android/app/src/main/java/your_package_name/ and extend it with CooeePlugin class.
Java
Kotlin
|
import com.letscooee.CooeePlugin;
...

public class MainApplication extends CooeePlugin implements ReactApplication {
    ...
}
import com.letscooee.CooeePlugin;
...

public class MainApplication extends CooeePlugin implements ReactApplication {
    ...
}
﻿
iOS
Open your AppDelegate file from ios/app_name/ and add following snippet:
ObjectiveC
Swift
|
#import "CooeeSDK/CooeeSDK-Swift.h"
...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    ...
    [AppController configure];
    ...
}
#import "CooeeSDK/CooeeSDK-Swift.h"
...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    ...
    [AppController configure];
    ...
}
﻿
Grab a Reference
TypeScript
|
import CooeeReactNative from '@letscooee/react-native';
import CooeeReactNative from '@letscooee/react-native';
﻿
﻿