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..db31b60cd
--- /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 (
+
+
+ ECENCY
+
+
+
+ )
+ }
+
+ return (
+
+
+ {_renderHeader()}
+
+
+ )
+}
+
+export default WebBrowser
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 a1de6958e..000000000
--- a/src/screens/webBrowser/webBrowser.tsx
+++ /dev/null
@@ -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 (
-
-
-
- {
- this.webview = ref;
- }}
- />
-
- );
- }
-}
-
-
-
-export default injectIntl(withNavigation(WebBrowser));