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));