From 161434a730431233fcc423633eb27395230f9cf8 Mon Sep 17 00:00:00 2001
From: keplyx <keplyx@gmail.com>
Date: Thu, 7 Nov 2019 10:57:58 +0100
Subject: [PATCH] Added footer webview navigation

---
 components/WebViewScreen.js                 | 36 +++++++++++++++++++--
 native-base-theme/variables/platform.js     |  4 +--
 native-base-theme/variables/platformDark.js |  4 +--
 screens/PlanexScreen.js                     |  3 +-
 4 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/components/WebViewScreen.js b/components/WebViewScreen.js
index 4950937..7a2ba8b 100644
--- a/components/WebViewScreen.js
+++ b/components/WebViewScreen.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import {Linking, Platform, View} from 'react-native';
-import {Spinner} from 'native-base';
+import {Spinner, Footer, Right, Left, Body} from 'native-base';
 import WebView from "react-native-webview";
 import Touchable from "react-native-platform-touchable";
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
@@ -16,6 +16,7 @@ type Props = {
     headerTitle: string,
     hasHeaderBackButton: boolean,
     hasSideMenu: boolean,
+    hasFooter: boolean,
 }
 
 /**
@@ -27,6 +28,7 @@ export default class WebViewScreen extends React.Component<Props> {
         customInjectedJS: '',
         hasBackButton: false,
         hasSideMenu: true,
+        hasFooter: true,
     };
 
     webview: WebView;
@@ -50,7 +52,6 @@ export default class WebViewScreen extends React.Component<Props> {
     getRefreshButton() {
         return (
             <View style={{flexDirection: 'row'}}>
-                {this.getHeaderButton(() => this.openWebLink(), 'web')}
                 {this.getHeaderButton(() => this.refreshWebview(), 'refresh')}
             </View>
         );
@@ -60,6 +61,14 @@ export default class WebViewScreen extends React.Component<Props> {
         this.webview.reload();
     }
 
+    goBackWebview() {
+        this.webview.goBack();
+    }
+
+    goForwardWebview() {
+        this.webview.goForward();
+    }
+
     render() {
         const nav = this.props.navigation;
         return (
@@ -95,6 +104,29 @@ export default class WebViewScreen extends React.Component<Props> {
                         </View>
                     }
                 />
+                {this.props.hasFooter ?
+                    <Footer>
+                        <Left style={{
+                            paddingLeft: 6,
+                        }}>
+                            {this.getHeaderButton(() => this.openWebLink(), 'open-in-new')}
+                        </Left>
+                        <Body/>
+                        <Right style={{
+                            flexDirection: 'row',
+                            alignItems: 'flex-end',
+                            paddingRight: 6
+                        }}>
+                            <View style={{
+                                flexDirection: 'row',
+                                marginRight: 0,
+                                marginLeft: 'auto'
+                            }}>
+                                {this.getHeaderButton(() => this.goBackWebview(), 'chevron-left')}
+                                {this.getHeaderButton(() => this.goForwardWebview(), 'chevron-right')}
+                            </View>
+                        </Right>
+                    </Footer> : <View/>}
             </BaseContainer>
         );
     }
diff --git a/native-base-theme/variables/platform.js b/native-base-theme/variables/platform.js
index 5e2e13d..8cdaf83 100644
--- a/native-base-theme/variables/platform.js
+++ b/native-base-theme/variables/platform.js
@@ -106,7 +106,7 @@ export default {
     checkboxTickColor: "#fff",
 
     // Color
-    brandPrimary: platform === "ios" ? "#be1522" : "#be1522",
+    brandPrimary: "#be1522",
     brandInfo: "#62B1F6",
     brandSuccess: "#5cb85c",
     brandDanger: "#d9534f",
@@ -137,7 +137,7 @@ export default {
 
     // Footer
     footerHeight: 55,
-    footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
+    footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
     footerPaddingBottom: 0,
 
     // FooterTab
diff --git a/native-base-theme/variables/platformDark.js b/native-base-theme/variables/platformDark.js
index 80cf361..1be2df6 100644
--- a/native-base-theme/variables/platformDark.js
+++ b/native-base-theme/variables/platformDark.js
@@ -106,7 +106,7 @@ export default {
     checkboxTickColor: "#fff",
 
     // Color
-    brandPrimary: platform === "ios" ? "#be1522" : "#be1522",
+    brandPrimary: "#be1522",
     brandInfo: "#62B1F6",
     brandSuccess: "#5cb85c",
     brandDanger: "#d9534f",
@@ -138,7 +138,7 @@ export default {
 
     // Footer
     footerHeight: 55,
-    footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
+    footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
     footerPaddingBottom: 0,
 
     // FooterTab
diff --git a/screens/PlanexScreen.js b/screens/PlanexScreen.js
index 426a157..0a41fad 100644
--- a/screens/PlanexScreen.js
+++ b/screens/PlanexScreen.js
@@ -39,7 +39,8 @@ export default class PlanexScreen extends React.Component<Props> {
                 url={PLANEX_URL}
                 customInjectedJS={this.customInjectedJS}
                 headerTitle={'Planex'}
-                hasHeaderBackButton={false}/>
+                hasHeaderBackButton={false}
+                hasFooter={false}/>
         );
     }
 }