Merge pull request #1972 from ecency/nt/in-app-browser

Nt/in app browser

src/screens/webBrowser/index.ts

@@ -1 +1 @@
-export {default as WebBrowser} from './webBrowser';
+export {default as WebBrowser} from './screen/webBrowser';

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

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',
+  }
+
+});

src/screens/webBrowser/webBrowser.tsx

@@ -1,47 +0,0 @@
-import React, { PureComponent } from 'react';
-import { View, 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';
-
-class WebBrowser extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    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>
-    );
-  }
-}
-
-
-
-export default injectIntl(withNavigation(WebBrowser));