Working webview

navigation/MenuDrawerNavigator.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { SafeAreaView } from 'react-navigation';
 import { createDrawerNavigator } from 'react-navigation-drawer';
+import { createStackNavigator } from 'react-navigation-stack';
 import { ScrollView } from 'react-native';
 import { Drawer } from 'react-native-paper';
 
@@ -11,6 +12,7 @@ import {
   AuthStartScreen,
   SettingsScreen,
   DownloadsScreen,
+  WebviewScreen,
 } from '../screens';
 
 // If the current route is the same as the route called in
@@ -82,4 +84,17 @@ const MenuDrawerNavigator = createDrawerNavigator(
     ),
   },
 );
-export default MenuDrawerNavigator;
+
+// TODO change initialRouteName back to MainApp
+const AppStackNavigator = createStackNavigator(
+  {
+    MainApp: MenuDrawerNavigator,
+    Webview: { screen: WebviewScreen },
+  },
+  {
+    initialRouteName: 'Webview',
+    headerMode: 'none',
+  },
+);
+
+export default AppStackNavigator;

package.json

@@ -26,6 +26,7 @@
     "react-native-reanimated": "^1.4.0",
     "react-native-status-bar-height": "^2.4.0",
     "react-native-vector-icons": "^6.6.0",
+    "react-native-webview": "^7.6.0",
     "react-native-zip-archive": "^5.0.0",
     "react-navigation": "^4.0.10",
     "react-navigation-drawer": "^2.3.3",

screens/WebviewScreen.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Appbar } from 'react-native-paper';
+import { WebView } from 'react-native-webview';
+
+const WebViewComponent = props => {
+  return <WebView source={{ uri: props.uri }} />;
+};
+
+// TODO: change navigation.toggleDrawer to goBack()?
+class WebviewScreen extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Appbar.Header>
+          <Appbar.BackAction
+            onPress={() => this.props.navigation.toggleDrawer()}
+          />
+          <Appbar.Content title="Webview" />
+        </Appbar.Header>
+        <WebViewComponent
+          style={styles.webView}
+          uri="https://en.wikipedia.org/wiki/Yosemite_National_Park"
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  webView: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+  },
+});
+
+export default WebviewScreen;

screens/index.js

@@ -6,3 +6,4 @@ export { default as RegisterScreen } from './RegisterScreen';
 export { default as RoutesScreen } from './RoutesScreen';
 export { default as SettingsScreen } from './SettingsScreen';
 export { default as DownloadsScreen } from './DownloadsScreen';
+export { default as WebviewScreen } from './WebviewScreen';