From b3b8b3d66c4171accd7c3d29a4363edfc080c355 Mon Sep 17 00:00:00 2001
From: Nouman Tahir <nouman.hawkdev@gmail.com>
Date: Fri, 11 Jun 2021 22:51:23 +0500
Subject: [PATCH 1/3] webview conversion to functional component

---
 src/screens/webBrowser/webBrowser.tsx | 70 +++++++++++++--------------
 1 file changed, 34 insertions(+), 36 deletions(-)

diff --git a/src/screens/webBrowser/webBrowser.tsx b/src/screens/webBrowser/webBrowser.tsx
index a1de6958e..9f0478c51 100644
--- a/src/screens/webBrowser/webBrowser.tsx
+++ b/src/screens/webBrowser/webBrowser.tsx
@@ -1,47 +1,45 @@
-import React, { PureComponent } from 'react';
-import { View, StatusBar } from 'react-native';
+import React, {useMemo } from 'react';
+import {Alert, StatusBar } from 'react-native';
 import { WebView } from 'react-native-webview';
 
-import { injectIntl } from 'react-intl';
-import { withNavigation } from 'react-navigation';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { BasicHeader } from '../../components';
+import {get} from 'lodash';
 
-class WebBrowser extends PureComponent {
-  constructor(props) {
-    super(props);
+export interface WebBrowserParams {
+    url:string;
+}
 
-    this.state = {
-      isLoading: false,
-    };
-  }
-
-  _onNavigationStateChange = (event) => {
-
-  };
-
-  render() {
-    const url = this.props.navigation.getParam('url');
-    return (
-      <SafeAreaView style={{ flex: 1 }}>
-        <StatusBar />
-        <BasicHeader
-          title="Ecency"
-        />
-        <WebView
-          source={{
-            uri: url,
-          }}
-          onNavigationStateChange={this._onNavigationStateChange}
-          ref={(ref) => {
-            this.webview = ref;
-          }}
-        />
-      </SafeAreaView>
-    );
+interface Props {
+  navigation:{
+    state:{
+      params:WebBrowserParams
+    }
   }
 }
 
+const WebBrowser = (props:Props) => {
+
+  const url = useMemo(() => get(props, 'navigation.state.params.url'), []);
+
+  if(!url){
+    Alert.alert("DEV: url parameter cannot be empty")
+  }
+
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <StatusBar />
+      <BasicHeader
+        title="Ecency"
+      />
+      <WebView
+        source={{
+          uri: url,
+        }}
+      />
+    </SafeAreaView>
+  )
+}
 
 
-export default injectIntl(withNavigation(WebBrowser));
+export default WebBrowser

From e17adad914a8d883258aaa6e01e1c2366a4d0fe3 Mon Sep 17 00:00:00 2001
From: Nouman Tahir <nouman.hawkdev@gmail.com>
Date: Fri, 11 Jun 2021 23:18:14 +0500
Subject: [PATCH 2/3] improved in-app browser interface

- disabled dark mode in browser
- added custom header
- status bar dark content
---
 src/screens/webBrowser/index.ts               |  2 +-
 src/screens/webBrowser/screen/webBrowser.tsx  | 64 +++++++++++++++++++
 .../webBrowser/screen/webBrowserStyles.ts     | 34 ++++++++++
 src/screens/webBrowser/webBrowser.tsx         | 45 -------------
 4 files changed, 99 insertions(+), 46 deletions(-)
 create mode 100644 src/screens/webBrowser/screen/webBrowser.tsx
 create mode 100644 src/screens/webBrowser/screen/webBrowserStyles.ts
 delete mode 100644 src/screens/webBrowser/webBrowser.tsx

diff --git a/src/screens/webBrowser/index.ts b/src/screens/webBrowser/index.ts
index bb7c41a17..673bf98e3 100644
--- a/src/screens/webBrowser/index.ts
+++ b/src/screens/webBrowser/index.ts
@@ -1 +1 @@
-export {default as WebBrowser} from './webBrowser';
+export {default as WebBrowser} from './screen/webBrowser';
diff --git a/src/screens/webBrowser/screen/webBrowser.tsx b/src/screens/webBrowser/screen/webBrowser.tsx
new file mode 100644
index 000000000..93f4ed400
--- /dev/null
+++ b/src/screens/webBrowser/screen/webBrowser.tsx
@@ -0,0 +1,64 @@
+import React, {useMemo } from 'react';
+import {Alert, StatusBar, View, Text } from 'react-native';
+import { WebView } from 'react-native-webview';
+
+import { SafeAreaView } from 'react-native-safe-area-context';
+import {get} from 'lodash';
+import styles from './webBrowserStyles';
+import { IconButton } from '../../../components';
+
+export interface WebBrowserParams {
+    url:string;
+}
+
+interface Props {
+  navigation:{
+    state:{
+      params:WebBrowserParams
+    }
+    goBack:()=>void;
+  }
+}
+
+const WebBrowser = ({navigation}:Props) => {
+
+  const url = useMemo(() => get(navigation, 'state.params.url'), []);
+
+  if(!url){
+    Alert.alert("DEV: url parameter cannot be empty")
+  }
+
+  const _onBackPress = () => {
+    navigation.goBack();
+  }
+
+  const _renderHeader = () => {
+    return (
+      <View style={styles.header}>
+          <View style={styles.titleContainer}>
+            <Text style={styles.title}>ECENCY</Text>
+          </View>
+          <IconButton
+            iconStyle={styles.backIcon}
+            iconType="MaterialIcons"
+            name="arrow-back"
+            onPress={_onBackPress}
+          />
+      </View>
+    )
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <StatusBar barStyle='dark-content'  />
+      {_renderHeader()}
+      <WebView
+        source={{
+          uri: url,
+        }}
+      />
+    </SafeAreaView>
+  )
+}
+
+export default WebBrowser
\ No newline at end of file
diff --git a/src/screens/webBrowser/screen/webBrowserStyles.ts b/src/screens/webBrowser/screen/webBrowserStyles.ts
new file mode 100644
index 000000000..29309b7c5
--- /dev/null
+++ b/src/screens/webBrowser/screen/webBrowserStyles.ts
@@ -0,0 +1,34 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  backIcon: {
+    fontSize: 24,
+    color: '#c1c5c7', //avoiding dark theme based color for web browser
+  },
+  header:{
+    padding:16,
+    paddingVertical:12,
+    alignItems:'center',
+    flexDirection:'row',
+    borderBottomWidth:EStyleSheet.hairlineWidth,
+    borderColor:'#c1c5c7'
+  },
+  titleContainer:{
+    position:'absolute',
+    left:0,
+    right:0,
+    top:0,
+    bottom:0,
+    justifyContent:'center',
+    alignItems:'center'
+  },
+  title:{
+    color: '#c1c5c7',
+    fontSize: 16,
+    fontWeight: 'bold',
+  }
+
+});
diff --git a/src/screens/webBrowser/webBrowser.tsx b/src/screens/webBrowser/webBrowser.tsx
deleted file mode 100644
index 9f0478c51..000000000
--- a/src/screens/webBrowser/webBrowser.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, {useMemo } from 'react';
-import {Alert, StatusBar } from 'react-native';
-import { WebView } from 'react-native-webview';
-
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { BasicHeader } from '../../components';
-import {get} from 'lodash';
-
-export interface WebBrowserParams {
-    url:string;
-}
-
-interface Props {
-  navigation:{
-    state:{
-      params:WebBrowserParams
-    }
-  }
-}
-
-const WebBrowser = (props:Props) => {
-
-  const url = useMemo(() => get(props, 'navigation.state.params.url'), []);
-
-  if(!url){
-    Alert.alert("DEV: url parameter cannot be empty")
-  }
-
-  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <StatusBar />
-      <BasicHeader
-        title="Ecency"
-      />
-      <WebView
-        source={{
-          uri: url,
-        }}
-      />
-    </SafeAreaView>
-  )
-}
-
-
-export default WebBrowser

From 58fb8141ab10c7869fbf2a139cdbdaafe0fbb4f8 Mon Sep 17 00:00:00 2001
From: Nouman Tahir <nouman.hawkdev@gmail.com>
Date: Fri, 11 Jun 2021 23:25:14 +0500
Subject: [PATCH 3/3] new line at end

---
 src/screens/webBrowser/screen/webBrowser.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/screens/webBrowser/screen/webBrowser.tsx b/src/screens/webBrowser/screen/webBrowser.tsx
index 93f4ed400..db31b60cd 100644
--- a/src/screens/webBrowser/screen/webBrowser.tsx
+++ b/src/screens/webBrowser/screen/webBrowser.tsx
@@ -61,4 +61,4 @@ const WebBrowser = ({navigation}:Props) => {
   )
 }
 
-export default WebBrowser
\ No newline at end of file
+export default WebBrowser