Adding the React Native Embrace SDK
Add the JavaScript library
Use Yarn or NPM to install the NPM module.
yarn add @embrace-io/react-native
npm install @embrace-io/react-native --save
If you are using a yarn workspace, you must run the command at the react-native application folder level or modify package.json manually. Do not run this on your yarn workspace root.
Adding the SDK
Setup Script
The JavaScript Embrace SDK ships with a setup script to modify the files in your
project to add the native dependencies. The setup scripts can be found in your
node_modules
folder at node_modules/@embrace-io/dist/scripts/setup
Run the setup script
node node_modules/@embrace-io/react-native/lib/scripts/setup/installAndroid.js
node node_modules/@embrace-io/react-native/lib/scripts/setup/installIos.js
You can use git to see the changes that the script made.
git diff
Compare the changes to the Manual Setup step to verify the changes were made correctly.
Manually
- iOS
- Android
You'll need to add an Embrace-Info.plist
file at the root of the iOS project.
- Create a file called
Embrace-Info.plist
with the following content.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>API_KEY</key>
<string>{API_KEY}</string>
<key>CRASH_REPORT_ENABLED</key>
<true/>
</dict>
</plist>
If you'd like to use Embrace's internal crash reporter,
set the CRASH_REPORT_ENABLED
field to true in the Embrace-Info.plist
file that you created earlier (as
described in the Adding the Embrace SDK page).
If you're using Crashlytics, set this value to false.
Identify your root iOS Project.
Right click on that project and select
Add Files to YOUR_PROJECT
.Select
Embrace-Info.plist
and click onAdd
. Do not forget to select whichTargets
you are using.Check if the file appears inside YOUR_PROJECT.
React Native Version < 0.60
If you're on React Native version 0.60 and above, you can use Autolinking to set up the native modules.
- iOS
Configure your PodFile
to add Embrace. (RN Versions < 0.6)
target 'MyApp' do
# ...
pod 'EmbraceIO'
pod 'RNEmbrace', :path => '../node_modules/@embrace-io/react-native'
end
Then, install the pod.
cd ios && pod install --repo-update
Update the build.gradle
file (usually located at <root>/android/build.gradle
) to include the Embrace Swazzler.
buildscript {
repositories {
mavenCentral()
google()
}
dependencies {
classpath "io.embrace:embrace-swazzler:${findProject(':embrace-io_react-native').properties['emb_android_sdk']}"
}
}
Then, update the app build.gradle
file (usually located at <root>/android/app/build.gradle
).
apply plugin: 'com.android.application'
apply plugin: 'embrace-swazzler'
repositories {
mavenCentral()
google()
}
React Native 0.59.0 and later automatically adds the required compileOptions
directive to the android/app/build.gradle
file.
If you are using a version of React Native older than 0.59.0, or your project was created with a version older than 0.59.0, add the following to your android/app/build.gradle
file:
android {
// ...
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
// ...
}
Now, add the Embrace config file at android/app/src/main/embrace-config.json
, and add your API key and token.
{
"app_id": "xxxxx",
"api_token": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}
Your API ID and token are available on the Embrace dashboard.
You’ll need to set the following permissions so the Embrace SDK can send events and monitor connectivity.
android.permission.INTERNET
android.permission.ACCESS_NETWORK_STATE
There's a little more configuration we have to do to set up the uploading of symbol files. You'll be learning about that next.