fix(android): handle back button

usabilla · May 7, 2021 · a36106f · a36106f
1 parent 216f766
commit a36106f
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -309,6 +309,41 @@ The **response** array contains the following information:
 
 **NOTE**: **isRedirectToAppStoreEnabled** is not included in the **response** array on Android since displaying the Play Store Rating prompt is handled automatically by the SDK.
 
+### Android hardware back button
+Android hardware back button press should be captured and passed to usabilla react native in order to remove feedback form properly and get a callback.
+To achieve this, you can use a pattern like this;
+```
+  import { BackHandler } from 'react-native';
+  ...
+
+  var isFormVisible = false;
+
+  constructor() {
+    super()
+    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
+    usabilla.setFormDidLoadSuccessfully((response) => isFormVisible = true);
+    usabilla.setFormDidClose((response) => isFormVisible = false);
+    ...
+  }
+
+  componentDidMount() {
+    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
+  }
+
+  handleBackButtonClick() {
+    usabilla.onBackPressed()
+    return isFormVisible;
+  }
+```
+If you close a feedback form with `onBackPressed()`, then the **response** will contain the following information:
+**rating**: -1
+**sent**: false
+**abandonedpageindex**: -1
+
 ## Custom Variables
 
 In order to set custom variables in the Usabilla native library it's necessary to call the method:

diff --git a/UsabillaSampleApp/App.js b/UsabillaSampleApp/App.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Platform, PixelRatio, StyleSheet, SafeAreaView,Text, TextInput, View, Image, ImageBackground, TouchableWithoutFeedback} from 'react-native';
 import usabilla from 'usabilla-react-native';
 import { bgImage,logo } from './assets/images';
+import { BackHandler } from 'react-native';
 
 const instructions = Platform.select({
   ios: 'Press Cmd+R to reload,\nCmd+D or shake for dev menu',
@@ -10,25 +11,48 @@ const instructions = Platform.select({
 
 /// Usabilla Configuration
 // Replace appId with your usabilla app id.
-const appId = "YOUR_APP_ID_HERE";
+const appId = "[YOUR_APP_ID_HERE]";
 // Replace FormId with your usabilla form id.
-const formId = "YOUR_FORM_ID_HERE";
+const formId = "[YOUR_FORM_ID_HERE]";
 // Replace custom variable with your usabilla custom variable created for targeting specific Campaign..
 const customVars = {"Key": "Value"};
 
+var isFormVisible = false;
+
 export default class App extends Component<{}> {
   constructor() {
     super()
     this.state = {text: ''}
+    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
     usabilla.initialize(appId);
     usabilla.setDataMasking(usabilla.getDefaultDataMasks(), 'X');
     usabilla.setCustomVariables(customVars);
-    usabilla.setFormDidLoadSuccessfully((reminder) => console.log("successfull loading form: ", reminder));
+    usabilla.setFormDidLoadSuccessfully((reminder) => {
+      isFormVisible = true
+      console.log("successfull loading form: ", reminder)
+      }
+    );
     usabilla.setFormDidFailLoading((reminder) => console.log("Error loading form: ", reminder));
-    usabilla.setFormDidClose((reminder) => console.log("Form closed: ", reminder));
+    usabilla.setFormDidClose((reminder) => { 
+      isFormVisible = false
+      console.log("Form closed: ", reminder)
+    });
     usabilla.setCampaignDidClose((reminder) => console.log("Campaign closed: ",JSON.stringify(reminder)))
   }
 
+  componentDidMount() {
+    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
+  }
+
+  handleBackButtonClick() {
+    usabilla.onBackPressed()
+    return isFormVisible;
+  }
+
   resetCampaignData() {
       usabilla.resetCampaignData(()=> {
           console.log("Campaign data is successfully reset!")

diff --git a/UsabillaSampleApp/android/build.gradle b/UsabillaSampleApp/android/build.gradle
@@ -3,7 +3,7 @@
 buildscript {
     ext {
         buildToolsVersion = "29.0.2"
-        minSdkVersion = 19
+        minSdkVersion = 21
         compileSdkVersion = 29
         targetSdkVersion = 29
     }

diff --git a/android/src/main/java/com/usabilla/reactnative/ubform/UsabillaBridge.java b/android/src/main/java/com/usabilla/reactnative/ubform/UsabillaBridge.java
@@ -87,6 +87,27 @@ public void onReceive(Context context, Intent intent) {
         }
     };
 
+    /**
+     * Called via the index.js to handle back press
+     */
+    @ReactMethod
+    public void onBackPressed() {
+        final Activity activity = getCurrentActivity();
+        if (activity instanceof FragmentActivity) {
+            FragmentManager supportFragmentManager = ((FragmentActivity) activity).getSupportFragmentManager();
+            Fragment fragment = supportFragmentManager.findFragmentByTag(FRAGMENT_TAG);
+
+            if (fragment != null) {
+                supportFragmentManager.beginTransaction().remove(fragment).commit();
+                final WritableMap result = Arguments.createMap();
+                result.putInt(KEY_RATING, -1);
+                result.putInt(KEY_ABANDONED_PAGE_INDEX, -1);
+                result.putBoolean(KEY_SENT, false);
+                emitReactEvent(getReactApplicationContext(), "UBFormDidClose", result);
+            }
+        }
+    }
+
     @ReactMethod
     public String mainButtonTextArg = "mainButtonText";