Skip to main content

npm

Learn how to add Shake to your React Native app using npm.

Install

Execute the npm install command in your terminal:

Terminal
npm install @shakebugs/react-native-shake

Install pods from the project root directory:

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

After the installation also run pod update Shake to be perfectly sure that you're using the latest Shake .

Set compileSdkVersion version in the build.gradle file

Since Shake requires compileSdkVersion 29 or greater, verify that compileSdkVersion is correctly set in the build.gradle file:

android/build.gradle
buildscript {
ext {
buildToolsVersion = "30.0.2"
minSdkVersion = 21
compileSdkVersion = 30
targetSdkVersion = 30
ndkVersion = "20.1.5948944"
}
repositories {
google()
mavenCentral()
}
dependencies {
classpath("com.android.tools.build:gradle:4.2.1")
}
}

Set multidexEnabled flag in the build.gradle file

If you do not have multiDexEnabled flag set, update app-level build.gradle like below:

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
}

Initialize Shake

Call Shake.start() in your index.js file. Replace your-api-client-id and your-api-client-secret with the actual values you have in your workspace settings:

index.js
import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';
import Shake from '@shakebugs/react-native-shake';
AppRegistry.registerComponent(appName, () => App);
Shake.start('your-api-client-id', 'your-api-client-secret');

Build and run your project by running react-native start command in the terminal. Use the react-native run-android command to run your app on the Android device. Or use the react-native run-ios command to run your app on the iOS device.

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

Conditional initialization

We recommend initializing Shake in the entry point of your app. However, depending on your app, you'll want to initialize Shake just in a specific conditions, depending on your app data. You can do it as shown in the example below when your app data is available:

MainScreen.js
import Shake from '@shakebugs/react-native-shake';
const MainScreen = props => {
useEffect(() => {
if (User.isTester) {
Shake.start('your-api-client-id', 'your-api-client-secret');
}
}, []);
}

Visit your Shake dashboard

Follow the instructions there to send your first feedback with Shake and you're all set.

SDK customizations

Now that Shake SDK is in your app and you have sent the first feedback for fun, everything else is optional. As the next step, try the three most popular SDK customizations: