Instabug

Integration

This page covers how to install Instabug SDK into your React-Native application.

Installation

If you are upgrading, check the Upgrade Guide before bumping to a new major version.

  1. Open the command line and navigate to your React Native Directory. Then, run the following command.
npm install instabug-reactnative
  1. Link the bridging files in the npm package to the ios project use the following command. Make sure you have Ruby installed before running this last command (You can skip installing Ruby if you're building an Android app only).
react-native link instabug-reactnative

Upgrading from 1.x.x

When upgrading from version 1.x.x please make sure you do the following steps:

  1. Open the command line and navigate to your React Native Directory. Then, run the following command.
npm install instabug-reactnative
  1. Open your Pod file and delete this line pod 'Instabug', '~> 7.0'

  2. Run this command from inside the ios directory inside your root project's directory

pod install
  1. Run this command from your root project's directory.
    Make sure you have Ruby installed before running this last command (You can skip installing Ruby if you're building an Android app only).
react-native link instabug-reactnative

Upgrading from 2.0.x and from 8.0.3

When upgrading from 2.0.x to 2.1.x or from 8.0.3 to 8.x, please make sure you do the following steps:

  1. Unlink the project before upgrading to the new version.
react-native unlink instabug-reactnative
  1. Install the new version by running the following command.
npm install instabug-reactnative
  1. Link the project by running the following command.
react-native link instabug-reactnative

Using Instabug

  1. To start using Instabug, import it into your index.ios.js and index.android.js file.
import Instabug, { BugReporting, Surveys, FeatureRequests } from 'instabug-reactnative';
  1. Then initialize it in the constructor or componentWillMount. This line will let the Instabug SDK work with the default behavior. The SDK will be invoked when the device is shaken. You can customize this behavior through the APIs (You can skip this step if you are building an Android app only).
Instabug.startWithToken('IOS_APP_TOKEN', [Instabug.invocationEvent.shake]);
  1. Open android/app/src/main/java/[...]/MainApplication.java, locate the getPackages method. and add your Android app token. You can skip this step if you are building an iOS app only.
@Override
protected List<ReactPackage> getPackages() {
	return Arrays.<ReactPackage>asList(
	new MainReactPackage(),
	new RNInstabugReactnativePackage.Builder("TOKEN",MainApplication.this)
							.setInvocationEvent("shake", "button", "screenshot")
							.setPrimaryColor("#1D82DC")
							.setFloatingEdge("left")
							.setFloatingButtonOffsetFromTop(250)
							.build()
}

You can find your app token by selecting the SDK tab from your Instabug dashboard.

Same Build for Beta and App Store

The following method handles both cases: when the app is running live from the App Store and if it is running from the simulator, Xcode, Fabric Beta or Test Flight.

Instabug.isRunningLive(function (isLive) {
  if (isLive) {
    Instabug.startWithToken('LIVE_TOKEN', Instabug.invocationEvent.none);
  } else {
    Instabug.startWithToken('BETA_TOKEN', Instabug.invocationEvent.screenshot);
  }
});

Manual Linking

You can follow the steps here if you would like to integrate the SDK using manual linking.

Android

1 - Append the following lines to android/settings.gradle

include ':instabug-reactnative'
project(':instabug-reactnative').projectDir = new File(rootProject.projectDir, '../node_modules/instabug-reactnative/android')

2 - Add the following line to your module level dependencies in android/app/build.gradle

compile project(':instabug-reactnative')

3 - Initialize the sdk in android/app/src/main/java/[...]/MainApplication.java by adding the following lines to your getPackages method while adding your application token.

@Override
protected List<ReactPackage> getPackages() {
	return Arrays.<ReactPackage>asList(
	new MainReactPackage(),
	new RNInstabugReactnativePackage.Builder("YOUR_APP_TOKEN", MainApplication.this)
                            .setInvocationEvent("shake", "button", "screenshot")
                            .setPrimaryColor("#1D82DC")
                            .setFloatingEdge("left")
                            .setFloatingButtonOffsetFromTop(250)
                            .build()
}

iOS

1 - In your project navigator in XCode, right click on LibrariesAdd Files to [your project name]. Navigate to your project node_modulesinstabug-reactnativeios and add RNInstabug.xcodeproj.
2 - In your project navigator in XCode, select General and add libRNInstabug.a to your Linked Frameworks and Libraries.
3 - In your project navigator in XCode, select Build Settings and add $(SRCROOT)/../node_modules/instabug-reactnative/ios to your Header Search Paths.
4 - In your project navigator in XCode, select Build Settings and add ../node_modules/instabug-reactnative/ios to your Framework Search Paths.
5 - In your project navigator in XCode, select General → add Embedded BinariesAdd Other → navigate to node_modules/instabug-reactnative/ios → add Instabug.framework and InstabugCore.framework.
6 - For release: In your project navigator in XCode, select Build Phases → add New Run Script Phase → rename to run script phase to Strip Frameworks → add the following lines to your script.

bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/InstabugCore.framework/strip-frameworks.sh"

Integration

This page covers how to install Instabug SDK into your React-Native application.