Merge pull request #272 from Instawork/ashwinibm/experiment-android-b…

…ack-handler Demo: Custom back handler for android hardware back button
Instawork · May 17, 2021 · 579094c · 579094c
2 parents a7b809b + df47376
commit 579094c
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 11 deletions.
diff --git a/demo/components/HandleBack.js b/demo/components/HandleBack.js
@@ -0,0 +1,41 @@
+import React, { Component } from "react";
+import { withNavigation } from "react-navigation";
+import { BackHandler } from "react-native";
+
+class HandleBack extends Component {
+  constructor(props) {
+    super(props);
+    this.didFocus = props.navigation.addListener("didFocus", (payload) =>
+      BackHandler.addEventListener("hardwareBackPress", this.onBack)
+    );
+  }
+
+  componentDidMount() {
+    this.willBlur = this.props.navigation.addListener("willBlur", (payload) =>
+      BackHandler.removeEventListener("hardwareBackPress", this.onBack)
+    );
+  }
+
+  onBack = () => {
+    if(this.props.navigation && this.props.navigation.goBack && !this.props.navigation.isFirstRouteInParent()){
+      const { url } = this.props.navigation.state.params;
+      if (url.includes("custom_android_back")) {
+        this.props.navigation.popToTop(null);
+        return true;
+      }
+    }
+    return false;
+  };
+
+  componentWillUnmount() {
+    this.didFocus.remove();
+    this.willBlur.remove();
+    BackHandler.removeEventListener("hardwareBackPress", this.onBack);
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+export default withNavigation(HandleBack);
diff --git a/demo/screens/HyperviewScreen.js b/demo/screens/HyperviewScreen.js
@@ -9,6 +9,7 @@
 import React, { PureComponent } from 'react';
 import Hyperview from 'hyperview';
 import moment from 'moment';
+import HandleBack from '../components/HandleBack';
 
 export default class HyperviewScreen extends React.PureComponent {
   goBack = (params, key) => {
@@ -70,17 +71,19 @@ export default class HyperviewScreen extends React.PureComponent {
     const entrypointUrl = navigation.state.params.url;
 
     return (
-      <Hyperview
-        back={this.goBack}
-        closeModal={this.closeModal}
-        entrypointUrl={entrypointUrl}
-        fetch={this.fetchWrapper}
-        navigate={this.navigate}
-        navigation={navigation}
-        openModal={this.openModal}
-        push={this.push}
-        formatDate={this.formatDate}
-      />
+      <HandleBack>
+        <Hyperview
+          back={this.goBack}
+          closeModal={this.closeModal}
+          entrypointUrl={entrypointUrl}
+          fetch={this.fetchWrapper}
+          navigate={this.navigate}
+          navigation={navigation}
+          openModal={this.openModal}
+          push={this.push}
+          formatDate={this.formatDate}
+        />
+      </HandleBack>
     );
   }
 }
diff --git a/examples/case_studies/custom_android_back.xml b/examples/case_studies/custom_android_back.xml
@@ -0,0 +1,78 @@
+<doc xmlns="https://hyperview.org/hyperview">
+  <screen>
+    <styles>
+      <style
+        id="Header"
+        alignItems="center"
+        backgroundColor="white"
+        borderBottomColor="#eee"
+        borderBottomWidth="1"
+        flexDirection="row"
+        paddingLeft="24"
+        paddingRight="24"
+        paddingBottom="16"
+      />
+      <style
+        id="Header__Back"
+        color="blue"
+        fontSize="16"
+        fontWeight="600"
+        paddingRight="16"
+      />
+      <style id="Header__Title" color="black" fontSize="24" fontWeight="600" />
+      <style id="Body" backgroundColor="white" flex="1" />
+      <style id="Basic" fontSize="16" fontWeight="700" marginVertical="8" />
+      <style id="Container" backgroundColor="white" flex="1" margin="24" />
+      <style
+        id="Description"
+        fontSize="16"
+        fontWeight="normal"
+        marginBottom="16"
+      />
+      <style
+        id="Header"
+        alignItems="center"
+        flexDirection="row"
+        borderBottomColor="#E1E1E1"
+        borderBottomWidth="1"
+        borderColor="#4E4D4D"
+        fontSize="16"
+        fontWeight="normal"
+        padding="24"
+        paddingBottom="8"
+      />
+      <style id="Link" color="blue" fontSize="16" fontWeight="normal" />
+    </styles>
+    <body style="Body" safe-area="true">
+      <header style="Header">
+        <text action="back" href="#" style="Header__Back">Back</text>
+        <text style="Header__Title">Custom Android Back</text>
+      </header>
+
+      <view style="Container">
+        <text style="Basic">
+          Custom handling for Android back button press.
+        </text>
+        <text style="Description">
+          Goes back to the home page when the hardware back button is pressed on this page on Android.
+        </text>
+        <text style="Description">
+          This can be achieved by using the BackHandler provided by react-native at the App level.
+        </text>
+
+        <view>
+          <text style="Basic">References:</text>
+          <text style="Link" href="https://reactnative.dev/docs/backhandler">
+            BackHandler
+          </text>
+          <text
+            style="Link"
+            href="https://github.com/Instawork/hyperview/pull/272"
+          >
+            Demo implementation PR
+          </text>
+        </view>
+      </view>
+    </body>
+  </screen>
+</doc>
diff --git a/examples/case_studies/index.xml b/examples/case_studies/index.xml
@@ -151,6 +151,15 @@
           <text style="Item__Label">Photo sharing app</text>
           <text style="Item__Chevron">&gt;</text>
         </item>
+        <item
+          href="/case_studies/custom_android_back.xml"
+          key="custom-android-back"
+          show-during-load="loadingScreen"
+          style="Item"
+        >
+          <text style="Item__Label">Custom Android Back</text>
+          <text style="Item__Chevron">&gt;</text>
+        </item>
       </list>
     </body>
   </screen>