All Projects → Instabug → Instabug React Native

Instabug / Instabug React Native

Licence: mit
In-app feedback and bug reporting tool for React Native

Programming Languages

java
68154 projects - #9 most used programming language

Projects that are alternatives of or similar to Instabug React Native

Huobi java
Java SDK for Huobi Spot API
Stars: ✭ 180 (-10.45%)
Mutual labels:  sdk
Cognitive Face Ios
iOS SDK for the Microsoft Face API, part of Cognitive Services
Stars: ✭ 191 (-4.98%)
Mutual labels:  sdk
Pan Os Python
The PAN-OS SDK for Python is a package to help interact with Palo Alto Networks devices (including physical and virtualized Next-generation Firewalls and Panorama). The pan-os-python SDK is object oriented and mimics the traditional interaction with the device via the GUI or CLI/API.
Stars: ✭ 194 (-3.48%)
Mutual labels:  sdk
Flamelink
JavaScript SDK for integrating with Flamelink CMS 🔥
Stars: ✭ 186 (-7.46%)
Mutual labels:  sdk
React Native Alipay
Alipay SDK for React Native. Support RN >= 0.47.
Stars: ✭ 191 (-4.98%)
Mutual labels:  sdk
Js Realtime Sdk
LeanCloud Realtime Message JavaScript SDK
Stars: ✭ 193 (-3.98%)
Mutual labels:  sdk
Iot Python
Client libraries and samples for connecting to IBM Watson IoT using Python 2.7 and 3.x
Stars: ✭ 183 (-8.96%)
Mutual labels:  sdk
Phpspo
Office 365 Library for PHP. It allows to performs CRUD operations against Office 365 resources via an REST/OData based API
Stars: ✭ 198 (-1.49%)
Mutual labels:  sdk
Speechtotext Websockets Javascript
SDK & Sample to do speech recognition using websockets in Javascript
Stars: ✭ 191 (-4.98%)
Mutual labels:  sdk
Pdfxkit
A drop-in replacement for Apple PDFKit powered by our PSPDFKit framework under the hood.
Stars: ✭ 195 (-2.99%)
Mutual labels:  sdk
Objc Sdk
LeanCloud Objective-C SDK
Stars: ✭ 186 (-7.46%)
Mutual labels:  sdk
Api 3.0 Php
SDK PHP da API 3.0 da Cielo
Stars: ✭ 189 (-5.97%)
Mutual labels:  sdk
Pdk
The shortest path to better modules: Puppet Development Kit; Download:
Stars: ✭ 194 (-3.48%)
Mutual labels:  sdk
Msgraph Sdk Java
Microsoft Graph SDK for Java
Stars: ✭ 184 (-8.46%)
Mutual labels:  sdk
Cos Js Sdk V5
腾讯云 COS JS SDK(XML API)
Stars: ✭ 198 (-1.49%)
Mutual labels:  sdk
Meilisearch Js
Javascript client for the MeiliSearch API
Stars: ✭ 183 (-8.96%)
Mutual labels:  sdk
Oci Python Sdk
Oracle Cloud Infrastructure SDK for Python
Stars: ✭ 191 (-4.98%)
Mutual labels:  sdk
Wechat
weixin/wechat/微信公众平台/微信企业号/微信商户平台/微信支付 go/golang sdk
Stars: ✭ 2,330 (+1059.2%)
Mutual labels:  sdk
Pay
支付 SDK 的集合与重构,支持支付宝、微信支付、银联支付。
Stars: ✭ 198 (-1.49%)
Mutual labels:  sdk
Sdk
Library for using Grafana' structures in Go programs and client for Grafana REST API.
Stars: ✭ 193 (-3.98%)
Mutual labels:  sdk

Instabug for React Native

npm npm npm Twitter Analytics

Instabug is an in-app feedback and bug reporting tool for mobile apps. With just a simple shake, your users or beta testers can report bugs or send in-app feedback and the SDK will capture an environment snapshot of your user's device including all console logs, and server-side network requests compiling all these details in one organised dashboard to help you debug and fix bugs faster.

Instabug also provides you with a reliable crash reporter that automatically captures a detailed report of the running environment, the different threads’ states, the steps to reproduce the crash, and the network request logs. All the data is captured automatically with no need for breadcrumbs, and you can always reply back to your users and they will receive your messages within the app.

For more info, visit Instabug.com.

Installation

Updating to a new version? Check the Update Guide before bumping to a new major version.

Using react-native CLI

  1. In Terminal, navigate to your React Native directory and install the instabug-reactnative package:

    npm install instabug-reactnative
    

    Or if you prefer to use Yarn instead of npm:

    yarn add instabug-reactnative
    
  2. For projects that build for iOS, install xcodeproj gem:

    gem install xcodeproj
    
  3. For React Native >= 0.60, simply run the command:

    react-native add-instabug
    

    For React Native < 0.60, link the bridging files in the instabug-reactnative package:

    react-native link instabug-reactnative
    

Initializing Instabug

To start using Instabug, import it as follows.

import Instabug from 'instabug-reactnative';
  • iOS

    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.

    Instabug.start('IOS_APP_TOKEN', [Instabug.invocationEvent.shake]);
    
  • Android

  1. Open android/app/src/main/java/[...]/MainApplication.java

    • Make sure to import the package class:
      import com.instabug.reactlibrary.RNInstabugReactnativePackage;

    • For React Native >= 0.60
      Add the integration code to the onCreate() method like the below snippet.

       @Override
       public void onCreate() {
           super.onCreate();
           new RNInstabugReactnativePackage
               .Builder("APP_TOKEN", MainApplication.this)
               .setInvocationEvent("shake")
               .setPrimaryColor("#1D82DC")
               .setFloatingEdge("left")
               .setFloatingButtonOffsetFromTop(250)
               .build();
       }
      
    • For React Native < 0.60
      You should find the getPackages() method looks like the below snippet. You just need to add your Android app token.

      @Override
      protected List<ReactPackage> getPackages() {
          return Arrays.<ReactPackage>asList(
              new MainReactPackage(),
              new RNInstabugReactnativePackage.Builder("YOUR_APP_TOKEN", MainApplication.this)
              .setInvocationEvent("shake")
              .setPrimaryColor("#1D82DC")
              .setFloatingEdge("left")
              .setFloatingButtonOffsetFromTop(250)
              .build()
          );
      }
      
    • You can change the invocation event from here, simply by replacing the "shake" with any of the following "button", "none", "screenshot", or "swipe". You can change the primary color by replacing the "#1D82DC" with any color of your choice. In the case that you are using the floating button as an invocation event, you can change the floating button edge and the floating button offset using the last two methods, by replacing "left" to "right", and by changing the offset number.

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

  2. Make sure the following snippet is added to your project level build.gradle. This should be added automatically upon linking. If not, you can add it manually.

    allprojects {
    	repositories {
    	    maven {
    	        url "https://sdks.instabug.com/nexus/repository/instabug-cp"
    	    }
    	}
    }
    

Microphone and Photo Library Usage Description (iOS Only)

Instabug needs access to the microphone and photo library to be able to let users add audio and video attachments. Starting from iOS 10, apps that don’t provide a usage description for those 2 permissions would be rejected when submitted to the App Store.

For your app not to be rejected, you’ll need to add the following 2 keys to your app’s info.plist file with text explaining to the user why those permissions are needed:

  • NSMicrophoneUsageDescription
  • NSPhotoLibraryUsageDescription

If your app doesn’t already access the microphone or photo library, we recommend using a usage description like:

  • "<app name> needs access to the microphone to be able to attach voice notes."
  • "<app name> needs access to your photo library for you to be able to attach images."

The permission alert for accessing the microphone/photo library will NOT appear unless users attempt to attach a voice note/photo while using Instabug.

Uploading Source Map Files for Crash Reports

For your app crashes to show up with a fully symbolicated stack trace, we will automatically generate the source map files and upload them to your dashboard on release build. To do so, we rely on your app token being explicitly added to Instabug.start('YOUR_APP_TOKEN') in JavaScript.

If your app token is defined as a constant, you can set an environment variable INSTABUG_APP_TOKEN to be used instead. We also automatically read your versionName and versionCode to upload your sourcemap file. alternatively, can also set the environment variables INSTABUG_APP_VERSION_NAME and INSTABUG_APP_VERSION_CODE to be used instead.

To disable the automatic upload in android, you can set the following property your build.gradle:

ext {
    instabugUploadEnable = false;
}

Network Logging

Instabug network logging is enabled by default. It intercepts any requests performed with fetch or XMLHttpRequest and attaches them to the report that will be sent to the dashboard. To disable network logs:

import { NetworkLogger } from 'instabug-reactnative';
NetworkLogger.setEnabled(false);

Repro Steps

Instabug Repro Steps are enabled by default. It captures a screenshot of each screen the user navigates to. These screens are attached to the BugReport when sent.

We support the two most popular React Native navigation libraries:

  • react-navigation

    • v5 set the onStateChange to Instabug.onStateChange in your NavigationContainer as follows:

        <NavigationContainer
        onStateChange={  Instabug.onStateChange  }  />
      
    • <=v4 set the onNavigationStateChange to Instabug.onNavigationStateChange in your App wrapper as follows:

      export  default () => (
      <App
      onNavigationStateChange={  Instabug.onNavigationStateChange  }  />
      );
      
  • react-native-navigation

    Register Instabug.componentDidAppearListener listener using:

      Navigation.events().registerComponentDidAppearListener( Instabug.componentDidAppearListener );
    

Alternatively, you can report your screen changes manually using the following API

Instabug.reportScreenChange('screenName');

You can disable Repro Steps using the following API:

Instabug.setReproStepsMode(Instabug.reproStepsMode.disabled);

Update Guide

Updating to versions 8.0-8.4.x

When updating to version 8.0 through 8.4.x, you'll need to perform the steps below.

  1. Unlink Instabug

    react-native unlink instabug-reactnative
    
  2. Install the new version of Instabug

    npm install instabug-reactnative
    
  3. Link Instabug

    react-native link instabug-reactnative
    

Updating to version 8.5

Only for apps using React Native >= 0.60. If you're using a lower version, you don't need to perform any extra steps when updating.

Version 8.5 adds support for React Native 0.60. To use Instabug 8.5 with React Native 0.60, you'll need to perform the following steps.

  1. Unlink Instabug

    react-native unlink instabug-reactnative
    
  2. Install the new version of Instabug

    npm install instabug-reactnative
    
  3. Add Instabug to your project

    react-native add-instabug
    

Features that are not supported yet

  • Push Notification Support for In-App Messaging
  • User Steps.

Documentation

For more details about the supported APIs and how to use them, check our Documentation.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].