Implement WebView component for external services

src/components/Button.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Button as RNEButton } from 'react-native-elements';
+
+import { colors } from '../config';
+
+export const Button = ({ title, onPress }) => {
+  return (
+    <RNEButton
+      type="outline"
+      onPress={onPress}
+      title={title}
+      titleStyle={styles.titleStyle}
+      buttonStyle={styles.buttonStyle}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  titleStyle: {
+    color: colors.primary,
+    fontFamily: 'titillium-web-bold'
+  },
+  buttonStyle: {
+    borderColor: colors.primary
+  }
+});
+
+Button.propTypes = {
+  title: PropTypes.string.isRequired,
+  onPress: PropTypes.func.isRequired
+};

src/components/index.js

@@ -1,3 +1,4 @@
+export * from './Button';
 export * from './CardList';
 export * from './DiagonalGradient';
 export * from './HtmlView';

src/navigation/AppStackNavigator.js

@@ -1,6 +1,6 @@
 import { createStackNavigator } from 'react-navigation';
 
-import { DetailScreen, HomeScreen, HtmlScreen, IndexScreen } from '../screens';
+import { DetailScreen, HomeScreen, HtmlScreen, IndexScreen, WebScreen } from '../screens';
 import { defaultStackNavigatorConfig } from './defaultStackNavigatorConfig';
 
 import { texts } from '../config';
@@ -30,6 +30,12 @@ const AppStackNavigator = createStackNavigator(
       navigationOptions: (props) => ({
         title: props.navigation.getParam('title', '')
       })
+    },
+    Web: {
+      screen: WebScreen,
+      navigationOptions: (props) => ({
+        title: props.navigation.getParam('title', '')
+      })
     }
   },
   defaultStackNavigatorConfig('Home')

src/screens/HtmlScreen.js

@@ -4,7 +4,7 @@ import { ActivityIndicator, ScrollView, StyleSheet, TouchableOpacity, View } fro
 import { Query } from 'react-apollo';
 
 import { colors, normalize } from '../config';
-import { HtmlView, Icon, Wrapper } from '../components';
+import { Button, HtmlView, Icon, Wrapper } from '../components';
 import { trimNewLines } from '../helpers';
 import { GET_PUBLIC_HTML_FILE } from '../queries';
 import { arrowLeft } from '../icons';
@@ -25,6 +25,8 @@ export class HtmlScreen extends React.Component {
   render() {
     const { navigation } = this.props;
     const queryVariables = navigation.getParam('queryVariables', '');
+    const title = navigation.getParam('title', '');
+    const webUrl = navigation.getParam('webUrl', '');
 
     if (!queryVariables || !queryVariables.name) return null;
 
@@ -49,6 +51,20 @@ export class HtmlScreen extends React.Component {
             <ScrollView>
               <Wrapper>
                 <HtmlView html={trimNewLines(data.publicHtmlFile.content)} />
+                {!!webUrl && (
+                  <Button
+                    title={`${title} öffnen`}
+                    onPress={() =>
+                      navigation.navigate({
+                        routeName: 'Web',
+                        params: {
+                          title,
+                          webUrl
+                        }
+                      })
+                    }
+                  />
+                )}
               </Wrapper>
             </ScrollView>
           );

src/screens/WebScreen.js

@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ActivityIndicator, StyleSheet, TouchableOpacity, View, WebView } from 'react-native';
+
+import { colors, normalize } from '../config';
+import { Icon } from '../components';
+import { arrowLeft } from '../icons';
+
+export class WebScreen extends React.PureComponent {
+  static navigationOptions = ({ navigation }) => {
+    return {
+      headerLeft: (
+        <View>
+          <TouchableOpacity onPress={() => navigation.goBack()}>
+            <Icon icon={arrowLeft(colors.lightestText)} style={styles.icon} />
+          </TouchableOpacity>
+        </View>
+      )
+    };
+  };
+
+  render() {
+    const { navigation } = this.props;
+    const webUrl = navigation.getParam('webUrl', '');
+
+    if (!webUrl) return null;
+
+    return (
+      <WebView
+        source={{ uri: webUrl }}
+        startInLoadingState
+        renderLoading={() => (
+          <View style={styles.loadingContainer}>
+            <ActivityIndicator />
+          </View>
+        )}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    paddingHorizontal: normalize(14)
+  },
+  loadingContainer: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center'
+  }
+});
+
+WebScreen.propTypes = {
+  navigation: PropTypes.object.isRequired
+};

src/screens/index.js

@@ -2,3 +2,4 @@ export * from './DetailScreen';
 export * from './HomeScreen';
 export * from './HtmlScreen';
 export * from './IndexScreen';
+export * from './WebScreen';