Install Shake

Install

Execute the npm install command in your terminal:

Terminal
npm install @shakebugs/react-native-shake

If you are using a React Native version 0.60 or greater, you should also run add command:

Terminal
react-native add-shake

If you are using a React Native version older than 0.60, you should instead run link command:

Terminal
react-native link @shakebugs/react-native-shake

Install pods from the project root directory:

Terminal
cd ios && pod install && cd ..

Add Client ID and Client secret keys

Android

Open your AndroidManifest.xml file. Paste this and replace your-api-client-id and your-api-client-secret with the actual values you have in your workspace settings.

AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity android:name=".MainActivity" android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<meta-data
android:name="com.shakebugs.APIClientID"
android:value="your-api-client-id" />
<meta-data
android:name="com.shakebugs.APIClientSecret"
android:value="your-api-client-secret" />
</application>
<uses-permission android:name="android.permission.INTERNET" />
</manifest>

iOS

Open your workspace and in the Project Navigator, right click on Info.plist, and Open as › Source code. Paste this but replace your-api-client-id and your-api-client-secret with the actual values you have in your workspace settings.

Info.plist
<?xml version="1.0" encoding="utf-8" ?>
<plist version="1.0">
<dict>
<key>Shake</key>
<dict>
<key>APIClientID</key>
<string>your-api-client-id</string>
<key>APIClientSecret</key>
<string>your-api-client-secret</string>
</dict>
</dict>
</plist>

ProGuard

If you are using code shrinking when building your application, add following ProGuard rule to the proguard-rules.pro file:

proguard-rules.pro
-keep class com.shakebugs.** { *; }

Initialize Shake

Android

Call Shake.start() method on application start to run Shake:

MainApplication.java
import com.shakebugs.shake.Shake;
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
Shake.getReportConfiguration().setInvokeShakeOnShakeDeviceEvent(true);
Shake.getReportConfiguration().setShowFloatingReportButton(false);
Shake.getReportConfiguration().setInvokeShakeOnScreenshot(false);
Shake.start(this);
}

This first run will automatically add your app to your Shake Dashboard based on your app ID.

iOS

Call Shake.start() method whenever you want to run Shake:

App.js
import React, {Component} from 'react';
import {View} from 'react-native';
import Shake from '@shakebugs/react-native-shake';
export default class App extends Component<{}> {
componentDidMount() {
Shake.start();
}
render() {
return (
<View style={styles.container} />
</View>
);
}
}

This first run will automatically add your app to your Shake Dashboard based on your bundle ID.

Manual linking

Normally, linking is done automatically or using react-native link @shakebugs/react-native-shake command. If you want to link it manually, you can do it following way.

Android

Add the following lines of code to your settings.gradle file:

settings.gradle
include ':@shakebugs_react-native-shake'
project(':@shakebugs_react-native-shake').projectDir = new File(rootProject.projectDir, '../node_modules/@shakebugs/react-native-shake/android')

Then, include the following dependency to app-level build.gradle file:

app/build.gradle
dependencies {
implementation project(':@shakebugs_react-native-shake')
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
implementation "com.facebook.react:react-native:+" // From node_modules
}

Update the getPackages() method:

MainApplication.java
@Override protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
packages.add(new ShakePackage());
return packages;
}

Include Shake maven repository to your project-level build.gradle file:

build.gradle
allprojects {
repositories {
mavenLocal()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url("$rootDir/../node_modules/react-native/android")
}
maven {
// Android JSC is installed from npm
url("$rootDir/../node_modules/jsc-android/dist")
}
google()
jcenter()
maven { url 'https://www.jitpack.io' }
maven { url 'https://dl.bintray.com/shake/shake' }
}
}

Add the following dependency to your app-level build.gradle file:

app/build.gradle
dependencies {
implementation 'com.shakebugs.android:shake:10.0.+'
...
}

If you do not have multiDexEnabled, update app level build.gradle:

app/build.gradle
defaultConfig {
applicationId "com.shakebugs.react.example"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0.0"
multiDexEnabled true
}

iOS

After executing npm install, find Shake.xcodeproj in $rootDir/node_modules/react-native/shake/ios/. Add it to the Libraries folder of your app project.

Navigate to the Building phases tab and add libShake.a to the Link Binary With Libraries section.