Support react-navigation v5 (#502)

* Support react-navigation v5

* Add new API for reporting screen changes manually

* update readme

* update changelog

* Add defensive code

* Fix CI
Co-authored-by: Ali Abdelfattah <aabdelfattah@instabug.com>

Author: alyezz

.circleci/config.yml

@@ -100,7 +100,7 @@ jobs:
   test_android:
     working_directory: ~/project/InstabugSample
     docker:
-      - image: circleci/android:api-28-node
+      - image: circleci/android@sha256:793ae9aa1777ba7fc375109978b307ed03a49be468295a8778d588eba0670e4b
     environment:
       JVM_OPTS: -Xmx3200m
     steps:

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## master
 
+* Adds support for react-navigation v5
 * Fixes an issue with `onReportSubmitHandler` on iOS
 
 ## v9.1.7 (2020-08-10)

InstabugSample/android/build.gradle

@@ -14,7 +14,7 @@ buildscript {
         jcenter()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:3.4.1")
+        classpath('com.android.tools.build:gradle:3.6.0')
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
 
         // NOTE: Do not place your application dependencies here; they belong

InstabugSample/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.4-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

README.md

@@ -203,24 +203,40 @@ Instabug Repro Steps are enabled by default. It captures a screenshot of each sc
 
 We support the 2 most popular React Native navigation libraries:
 
-* **react-navigation**
-1) Set the `onNavigationStateChange` to `Instabug.onNavigationStateChange` in your App wrapper as follows:
-
-    ```javascript
-    export default () => (
-      <App
-        onNavigationStateChange={ Instabug.onNavigationStateChange } />
-    );
-    ```
-
-* **react-native-navigation**
-1) Register `Instabug.componentDidAppearListener` listener using: 
-
-    ```javascript
-    Navigation.events().registerComponentDidAppearListener( Instabug.componentDidAppearListener );
-    ```
+  *  **react-navigation**
+
+	  *  **v5**
+		set the `onStateChange` to `Instabug.onStateChange` in your NavigationContainer as follows:
+
+			```javascript
+			<NavigationContainer
+			onStateChange={  Instabug.onStateChange  }  />
+			```
+
+	 *  **<=v4**
+		set the `onNavigationStateChange` to `Instabug.onNavigationStateChange` in your App wrapper as follows:
+
+		```javascript
+		export  default () => (
+		<App
+		onNavigationStateChange={  Instabug.onNavigationStateChange  }  />
+		);
+		```
+	*  **react-native-navigation**
+
+		 Register `Instabug.componentDidAppearListener` listener using:
+		```javascript
+		Navigation.events().registerComponentDidAppearListener( Instabug.componentDidAppearListener );
+		```
+		
+Alternatively, you can report your screen changes manually using the following API
+  
+  ```javascript
+Instabug.reportScreenChange('screenName');
+```
 
 You can disable Repro Steps using the following API:
+
 ```javascript
 Instabug.setReproStepsMode(Instabug.reproStepsMode.disabled);
 ```

android/upload_sourcemap.sh

@@ -2,7 +2,7 @@
 cd ..
 cd ..
 cd ..
-if [[ -s "$HOME/.nvm/nvm.sh" ]]; then
+if [ -s "$HOME/.nvm/nvm.sh" ]; then
 . "$HOME/.nvm/nvm.sh"
 elif [[ -x "$(command -v brew)" && -s "$(brew --prefix nvm)/nvm.sh" ]]; then
 . "$(brew --prefix nvm)/nvm.sh"

index.d.ts

@@ -233,6 +233,12 @@ export function onNavigationStateChange(
   currentState: any,
   action: any
 ): void;
+export function onStateChange(
+  state: any
+): void;
+export function reportScreenChange(
+  screenName: string
+): void;
 export function componentDidAppearListener(componentObj:
   { componentId: any, componentName: any, passProps: any }
 ): void;

index.js

@@ -56,18 +56,18 @@ const InstabugModule = {
    * @param {invocationEvent} invocationEvent The event that invokes
    * the SDK's UI.
    */
-  start: function(token, invocationEvent) {
+  start: function (token, invocationEvent) {
     if (Platform.OS === 'ios') {
       Instabug.startWithToken(token, invocationEvent);
     }
     _isFirstScreen = true;
     _currentScreen = firstScreen;
-    setTimeout(function() {
+    setTimeout(function () {
       if (_currentScreen == firstScreen) {
         Instabug.reportScreenChange(firstScreen);
         _currentScreen = null;
       }
-    }, 1000); 
+    }, 1000);
   },
 
   /**
@@ -190,7 +190,7 @@ const InstabugModule = {
    * notifications are enabled or disabled.
    */
   setPushNotificationsEnabled(isPushNotificationEnabled) {
-      Replies.setPushNotificationsEnabled(isPushNotificationEnabled);
+    Replies.setPushNotificationsEnabled(isPushNotificationEnabled);
   },
 
   /* istanbul ignore next */
@@ -221,7 +221,7 @@ const InstabugModule = {
    * floating button.
    */
   setFloatingButtonEdge(floatingButtonEdge, offsetFromTop) {
-      BugReporting.setFloatingButtonEdge(floatingButtonEdge, offsetFromTop); 
+    BugReporting.setFloatingButtonEdge(floatingButtonEdge, offsetFromTop);
   },
 
   /**
@@ -757,28 +757,28 @@ const InstabugModule = {
     // handled js crash
     if (Platform.OS === 'android') {
       IBGEventEmitter.addListener(Instabug, InstabugConstants.SEND_HANDLED_CRASH, async jsonObject => {
-          try {
-            let report = await Instabug.getReport();
-            const { tags, consoleLogs, instabugLogs, userAttributes, fileAttachments } = report;
-            const reportObj = new Report(tags, consoleLogs, instabugLogs, userAttributes, fileAttachments);
-            preSendingHandler(reportObj);
-            Instabug.sendHandledJSCrash(JSON.stringify(jsonObject));
-          } catch (e) {
-            console.error(e);
-          }
+        try {
+          let report = await Instabug.getReport();
+          const { tags, consoleLogs, instabugLogs, userAttributes, fileAttachments } = report;
+          const reportObj = new Report(tags, consoleLogs, instabugLogs, userAttributes, fileAttachments);
+          preSendingHandler(reportObj);
+          Instabug.sendHandledJSCrash(JSON.stringify(jsonObject));
+        } catch (e) {
+          console.error(e);
+        }
       });
     }
 
     if (Platform.OS === 'android') {
       IBGEventEmitter.addListener(Instabug, InstabugConstants.SEND_UNHANDLED_CRASH, async (jsonObject) => {
-        
-          let report = await Instabug.getReport();
-          const { tags, consoleLogs, instabugLogs, userAttributes, fileAttachments } = report;
-          const reportObj = new Report(tags, consoleLogs, instabugLogs, userAttributes, fileAttachments);
-          preSendingHandler(reportObj);
-          Instabug.sendJSCrash(JSON.stringify(jsonObject));
+
+        let report = await Instabug.getReport();
+        const { tags, consoleLogs, instabugLogs, userAttributes, fileAttachments } = report;
+        const reportObj = new Report(tags, consoleLogs, instabugLogs, userAttributes, fileAttachments);
+        preSendingHandler(reportObj);
+        Instabug.sendJSCrash(JSON.stringify(jsonObject));
       });
-    } 
+    }
 
     Instabug.setPreSendingHandler(preSendingHandler);
   },
@@ -788,25 +788,44 @@ const InstabugModule = {
   },
 
   onNavigationStateChange(prevState, currentState, action) {
-      const currentScreen = InstabugUtils.getActiveRouteName(currentState);
-      const prevScreen = InstabugUtils.getActiveRouteName(prevState);
+    const currentScreen = InstabugUtils.getActiveRouteName(currentState);
+    const prevScreen = InstabugUtils.getActiveRouteName(prevState);
 
-      if (prevScreen !== currentScreen) {
-        if (_currentScreen != null && _currentScreen != firstScreen) {
-          Instabug.reportScreenChange(_currentScreen);
+    if (prevScreen !== currentScreen) {
+      if (_currentScreen != null && _currentScreen != firstScreen) {
+        Instabug.reportScreenChange(_currentScreen);
+        _currentScreen = null;
+      }
+      _currentScreen = currentScreen;
+      setTimeout(function () {
+        if (_currentScreen == currentScreen) {
+          Instabug.reportScreenChange(currentScreen);
           _currentScreen = null;
         }
-        _currentScreen = currentScreen;
-        setTimeout(function() { 
-          if (_currentScreen == currentScreen) {
-            Instabug.reportScreenChange(currentScreen);
-            _currentScreen = null;
-          }
-        }, 1000);
+      }, 1000);
+    }
+  },
+
+  onStateChange(state) {
+    const currentScreen = InstabugUtils.getFullRoute(state);
+    if (_currentScreen != null && _currentScreen != firstScreen) {
+      Instabug.reportScreenChange(_currentScreen);
+      _currentScreen = null;
+    }
+    _currentScreen = currentScreen;
+    setTimeout(function () {
+      if (_currentScreen == currentScreen) {
+        Instabug.reportScreenChange(currentScreen);
+        _currentScreen = null;
       }
+    }, 1000);
+  },
+
+  reportScreenChange(screenName) {
+    Instabug.reportScreenChange(screenName);
   },
 
-  componentDidAppearListener({componentId, componentName, passProps}) {
+  componentDidAppearListener({ componentId, componentName, passProps }) {
     if (_isFirstScreen) {
       _lastScreen = componentName;
       _isFirstScreen = false;
@@ -816,9 +835,9 @@ const InstabugModule = {
       Instabug.reportScreenChange(componentName);
       _lastScreen = componentName;
     }
-},
+  },
+
 
-  
   /**
    * The event used to invoke the feedback form
    * @readonly

ios/upload_sourcemap.sh

@@ -1,9 +1,9 @@
 #!/bin/sh
 cd ${PROJECT_DIR}
 cd ..
-if [[ -s "$HOME/.nvm/nvm.sh" ]]; then
+if [ -s "$HOME/.nvm/nvm.sh" ]; then
 . "$HOME/.nvm/nvm.sh"
-elif [[ -x "$(command -v brew)" && -s "$(brew --prefix nvm)/nvm.sh" ]]; then
+elif [ -x "$(command -v brew)" && -s "$(brew --prefix nvm)/nvm.sh" ]; then
 . "$(brew --prefix nvm)/nvm.sh"
 fi
 export NODE_BINARY=node

utils/InstabugUtils.js

@@ -1,12 +1,12 @@
 'use strict';
-import {NativeModules, Platform} from 'react-native';
-let {Instabug} = NativeModules;
+import { NativeModules, Platform } from 'react-native';
+let { Instabug } = NativeModules;
 import IBGEventEmitter from './IBGEventEmitter';
 import InstabugConstants from './InstabugConstants';
 import parseErrorStackLib from '../../react-native/Libraries/Core/Devtools/parseErrorStack.js';
 
 export const parseErrorStack = (error) => {
-    return parseErrorStackLib(error);
+  return parseErrorStackLib(error);
 };
 
 const originalHandler = global.ErrorUtils.getGlobalHandler();
@@ -29,55 +29,67 @@ export const getActiveRouteName = (navigationState) => {
   return route.routeName;
 }
 
+function getFullRoute(state) {
+  try {
+    if (!state.routes[state.index].state) {
+      return state.routes[state.index].name;
+    }
+    return getFullRoute(state.routes[state.index].state);
+  } catch (e) {
+    return "";
+  }
+}
+
 export const isOnReportHandlerSet = () => {
   return _isOnReportHandlerSet;
 };
 
 export const captureJsErrors = () => {
-    if (!process.env.JEST_WORKER_ID) {
-      if (__DEV__) {
-          return;
-      }
+  if (!process.env.JEST_WORKER_ID) {
+    if (__DEV__) {
+      return;
     }
+  }
 
-    function errorHandler(e, isFatal) {
-      let jsStackTrace = parseErrorStackLib(e);
+  function errorHandler(e, isFatal) {
+    let jsStackTrace = parseErrorStackLib(e);
 
-      //JSON object to be sent to the native SDK
-      var jsonObject = {
-        message: e.name + " - " + e.message,
-        os: Platform.OS,
-        platform: 'react_native',
-        exception: jsStackTrace
-      }
-      
-      if(Platform.OS === 'android') {
-        if (_isOnReportHandlerSet) {
-          IBGEventEmitter.emit( InstabugConstants.SEND_UNHANDLED_CRASH, jsonObject);
-        } else {
-          Instabug.sendJSCrash(JSON.stringify(jsonObject));
-        }
+    //JSON object to be sent to the native SDK
+    var jsonObject = {
+      message: e.name + " - " + e.message,
+      os: Platform.OS,
+      platform: 'react_native',
+      exception: jsStackTrace
+    }
+
+    if (Platform.OS === 'android') {
+      if (_isOnReportHandlerSet) {
+        IBGEventEmitter.emit(InstabugConstants.SEND_UNHANDLED_CRASH, jsonObject);
       } else {
-        Instabug.sendJSCrash(jsonObject);
+        Instabug.sendJSCrash(JSON.stringify(jsonObject));
       }
+    } else {
+      Instabug.sendJSCrash(jsonObject);
+    }
 
-      if (originalHandler && !process.env.JEST_WORKER_ID) {
-        if (Platform.OS === 'ios') {
+    if (originalHandler && !process.env.JEST_WORKER_ID) {
+      if (Platform.OS === 'ios') {
+        originalHandler(e, isFatal);
+      } else {
+        setTimeout(() => {
           originalHandler(e, isFatal);
-        } else {
-          setTimeout(() => {
-            originalHandler(e, isFatal);
-          }, 500);
-        }
+        }, 500);
       }
     }
-    global.ErrorUtils.setGlobalHandler(errorHandler);
+  }
+  global.ErrorUtils.setGlobalHandler(errorHandler);
 };
 
 export default {
-    parseErrorStack,
-    captureJsErrors,
-    setOnReportHandler,
-    isOnReportHandlerSet,
-    getActiveRouteName
+  parseErrorStack,
+  captureJsErrors,
+  setOnReportHandler,
+  isOnReportHandlerSet,
+  getActiveRouteName,
+  getFullRoute
 };