Add Additional Screens to TabNavigator

components/AboutScreen.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleSheet, View} from 'react-native';
+import { connect } from 'react-redux';
+import WebSurface from './WebSurface.js';
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+        marginTop: 20,
+    },
+});
+
+export const routeName = 'About';
+const URL = 'http://mosaicchristian.org/mobilebeliefs';
+
+class AboutScreen extends React.Component {
+    static navigationOptions = {
+        title: routeName,
+    };
+
+    render() {
+        return (
+          <View style={styles.container}>
+            <WebSurface name={routeName} url={URL} />
+          </View>
+        );
+    }
+}
+
+export default connect()(AboutScreen);

components/GivingScreen.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleSheet, View} from 'react-native';
+import { connect } from 'react-redux';
+import WebSurface from './WebSurface.js';
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+        marginTop: 20,
+    },
+});
+
+export const routeName = 'Giving';
+const URL = 'http://mosaicchristian.org/mobilegive';
+
+class GivingScreen extends React.Component {
+    static navigationOptions = {
+        title: routeName,
+    };
+
+    render() {
+        return (
+          <View style={styles.container}>
+            <WebSurface name={routeName} url={URL} />
+          </View>
+        );
+    }
+}
+
+export default connect()(GivingScreen);

components/SermonScreen.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleSheet, View} from 'react-native';
+import { connect } from 'react-redux';
+import WebSurface from './WebSurface.js';
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+        marginTop: 20,
+    },
+});
+
+export const routeName = 'Sermons';
+const URL = 'http://mosaicchristian.org/mobilesermons';
+
+class SermonScreen extends React.Component {
+    static navigationOptions = {
+        title: routeName,
+    };
+
+    render() {
+        return (
+          <View style={styles.container}>
+            <WebSurface name={routeName} url={URL} />
+          </View>
+        );
+    }
+}
+
+export default connect()(SermonScreen);

navigators/AppNavigator.js

@@ -1,8 +1,15 @@
 import { TabNavigator } from 'react-navigation';
 import HomeScreen, {routeName as homeRoute} from '../components/HomeScreen.js';
+import SermonScreen, {routeName as sermonRoute} from '../components/SermonScreen.js';
+import AboutScreen, {routeName as aboutRoute} from '../components/AboutScreen.js';
+import GivingScreen, {routeName as givingRoute} from '../components/GivingScreen.js';
 
 export const screens = {
     [homeRoute]: { screen: HomeScreen},
+    [sermonRoute]: { screen: SermonScreen},
+    [aboutRoute]: { screen: AboutScreen},
+    [givingRoute]: { screen: GivingScreen},
+
 };
 
 export const AppNavigator = TabNavigator(screens);