Browse Source

Handle android back button to go back in the webview

Arnaud Vergnet 4 years ago
parent
commit
08de6765a7
1 changed files with 31 additions and 0 deletions
  1. 31
    0
      src/components/Screens/WebViewScreen.js

+ 31
- 0
src/components/Screens/WebViewScreen.js View File

@@ -9,6 +9,7 @@ import MaterialHeaderButtons, {Item} from '../Custom/HeaderButton';
9 9
 import {HiddenItem} from "react-navigation-header-buttons";
10 10
 import {Linking} from "expo";
11 11
 import i18n from 'i18n-js';
12
+import {BackHandler} from "react-native";
12 13
 
13 14
 type Props = {
14 15
     navigation: Object,
@@ -27,9 +28,12 @@ class WebViewScreen extends React.PureComponent<Props> {
27 28
 
28 29
     webviewRef: Object;
29 30
 
31
+    canGoBack: boolean;
32
+
30 33
     constructor() {
31 34
         super();
32 35
         this.webviewRef = React.createRef();
36
+        this.canGoBack = false;
33 37
     }
34 38
 
35 39
     /**
@@ -40,8 +44,32 @@ class WebViewScreen extends React.PureComponent<Props> {
40 44
         this.props.navigation.setOptions({
41 45
             headerRight: rightButton,
42 46
         });
47
+        this.props.navigation.addListener(
48
+            'focus',
49
+            () =>
50
+                BackHandler.addEventListener(
51
+                    'hardwareBackPress',
52
+                    this.onBackButtonPressAndroid
53
+                )
54
+        );
55
+        this.props.navigation.addListener(
56
+            'blur',
57
+            () =>
58
+                BackHandler.removeEventListener(
59
+                    'hardwareBackPress',
60
+                    this.onBackButtonPressAndroid
61
+                )
62
+        );
43 63
     }
44 64
 
65
+    onBackButtonPressAndroid = () => {
66
+        if (this.canGoBack){
67
+            this.onGoBackClicked();
68
+            return true;
69
+        }
70
+        return false;
71
+    };
72
+
45 73
     /**
46 74
      * Gets a header refresh button
47 75
      *
@@ -99,6 +127,9 @@ class WebViewScreen extends React.PureComponent<Props> {
99 127
                     errorCode={ERROR_TYPE.CONNECTION_ERROR}
100 128
                     onRefresh={this.onRefreshClicked}
101 129
                 />}
130
+                onNavigationStateChange={navState => {
131
+                    this.canGoBack = navState.canGoBack;
132
+                }}
102 133
             />
103 134
         );
104 135
     }

Loading…
Cancel
Save