added navigation between views and side drawer functionality

App.js

@@ -1,7 +1,69 @@
-import React from 'react';
-import BestPracticesScreen from './src/screens/BestPracticesScreen';
-// import FamilyConnectionsScreen from './src/screens/FamilyConnectionsScreen';
+import React from "react";
+import BestPracticesScreen from "./src/screens/BestPracticesScreen";
+import FamilyConnectionsScreen from "./src/screens/FamilyConnectionsScreen";
+import {
+  createAppContainer,
+  createDrawerNavigator,
+  createStackNavigator,
+  createSwitchNavigator
+} from "react-navigation";
 
 export default function App() {
-  return <BestPracticesScreen />;
+  return <AppContainer />;
 }
+
+// const AppNavigator = createStackNavigator(
+//   {
+//     BestPractices: {
+//       screen: BestPracticesScreen
+//     },
+//     FamilyConnections: {
+//       screen: FamilyConnectionsScreen
+//     }
+//   },
+//   {
+//     initialRouteName: "BestPractices",
+//   }
+// );
+const BestPracticeNavigator = createStackNavigator(
+  {
+    BestPractices: {
+      screen: BestPracticesScreen
+    }
+  },
+  {
+    initialRouteName: "BestPractices"
+  }
+);
+const FamilyConnectionsNavigator = createStackNavigator(
+  {
+    FamilyConnections: {
+      screen: FamilyConnectionsScreen
+    }
+  },
+  {
+    initialRouteName: "FamilyConnections"
+  }
+);
+
+// const AppContainer = createAppContainer(AppNavigator);
+
+const AppDrawerNavigator = createDrawerNavigator(
+  {
+    BestPractices: {
+      screen: BestPracticeNavigator
+    },
+    FamilyConnections: {
+      screen: FamilyConnectionsNavigator
+    }
+  }
+  // To make drawer open on right side uncomment line below
+  // { drawerPosition: "right" }
+);
+
+const AppSwitchNavigator = createSwitchNavigator({
+  BestPractices: { screen: AppDrawerNavigator },
+  FamilyConnections: { screen: AppDrawerNavigator }
+});
+
+const AppContainer = createAppContainer(AppSwitchNavigator);

src/screens/BestPracticesScreen.js

@@ -1,105 +1,165 @@
-import React from 'react';
+import React, { Component } from "react";
 import {
   Image,
   SafeAreaView,
   StyleSheet,
   Text,
   View,
   WebView,
-  Platform
-} from 'react-native';
-import { Container, Button, Icon, H2 } from 'native-base';
-import logoImg from '../../assets/simple-logo.png';
-import { ScrollView } from 'react-native-gesture-handler';
+  Platform,
+  TouchableWithoutFeedback,
+  Linking
+} from "react-native";
+import { Container, Button, Icon, H3 } from "native-base";
+import logoImg from "../../assets/simple-logo.png";
+import { ScrollView } from "react-native-gesture-handler";
 
-const BestPracticesScreen = () => {
-  return (
-    <Container style={styles.container}>
-      <SafeAreaView>
-        <ScrollView>
-          <View style={styles.header}>
-            <Image
-              source={logoImg}
-              style={{ width: 40, height: 40 }}
-              resizeMode="contain"
-            />
-            <View>
-              <H2>Connect Our Kids</H2>
-              <H2>Best Practices</H2>
-            </View>
-            <Icon
-              ios="ios-menu"
-              android="md-menu"
-              style={{ fontSize: 40, color: '#000' }}
-            />
-          </View>
+const title = `Connect Our Kids \nBest Practices`;
 
-          <Text>
-            Connect Our Kids makes free tools for social workers engaged in
-            permanancy searches for foster kids. Watch the video below to learn
-            more about the free tools and resources in this app.
-          </Text>
-          <View style={{ height: 300, marginBottom: 30 }}>
-            <WebView
-              style={styles.WebViewContainer}
-              javaScriptEnabled={true}
-              domStorageEnabled={true}
-              source={{ uri: 'https://www.youtube.com/embed/eMivJgf7RNA' }}
-            />
-          </View>
+const HeaderTitle = () => (
+  <View style={{ flexDirection: "row" }}>
+    {Platform.OS === "android" ? (
+      <Image
+        source={logoImg}
+        style={{ width: 40, height: 40, marginHorizontal: 10 }}
+        resizeMode="contain"
+      />
+    ) : null}
+    <Text style={{ fontSize: 18, fontWeight: "bold" }}>{title}</Text>
+  </View>
+);
 
-          <Button style={styles.button} block transparent>
-            <Text style={styles.buttonText}>
-              People Search - Find Contact Information for Anyone
-            </Text>
-          </Button>
-          <Button style={styles.button} transparent>
-            <Text style={styles.buttonText}>
-              Family Connections - Family Trees for Permanancy
-            </Text>
-          </Button>
-          <Button style={styles.button} transparent>
-            <Text style={styles.buttonText}>
-              Resources - Useful Materials and Information
+class BestPracticesScreen extends Component {
+  static navigationOptions = ({ navigation }) => {
+    return {
+      headerTitle: <HeaderTitle />,
+      headerLeft:
+        Platform.OS === "ios" ? (
+          <Image
+            source={logoImg}
+            style={{ width: 40, height: 40, marginHorizontal: 20 }}
+            resizeMode="contain"
+          />
+        ) : null,
+      headerRight: (
+        <TouchableWithoutFeedback
+          onPress={() => {
+            navigation.toggleDrawer();
+          }}
+        >
+          <Icon
+            ios="ios-menu"
+            android="md-menu"
+            style={{ fontSize: 40, color: "#000", paddingRight: 20 }}
+          />
+        </TouchableWithoutFeedback>
+      )
+    };
+  };
+  render() {
+    return (
+      <Container style={styles.container}>
+        <SafeAreaView>
+          <ScrollView>
+            {/* <View style={styles.header}>
+              <Image
+                source={logoImg}
+                style={{ width: 40, height: 40 }}
+                resizeMode="contain"
+              />
+              <View>
+                <H3>Connect Our Kids</H3>
+                <H3>Best Practices</H3>
+              </View>
+              <Icon
+                ios="ios-menu"
+                android="md-menu"
+                style={{ fontSize: 40, color: "#000" }}
+              />
+            </View> */}
+
+            <Text>
+              Connect Our Kids makes free tools for social workers engaged in
+              permanancy searches for foster kids. Watch the video below to
+              learn more about the free tools and resources in this app.
             </Text>
-          </Button>
-        </ScrollView>
-      </SafeAreaView>
-    </Container>
-  );
-};
+            <View style={{ height: 300, marginBottom: 30 }}>
+              <WebView
+                style={styles.WebViewContainer}
+                javaScriptEnabled={true}
+                domStorageEnabled={true}
+                source={{ uri: "https://www.youtube.com/embed/eMivJgf7RNA" }}
+              />
+            </View>
+
+            <Button
+              style={styles.button}
+              block
+              transparent
+              onPress={() => this.props.navigation.navigate("PeopleSearch")}
+            >
+              <Text style={styles.buttonText}>
+                People Search - Find Contact Information for Anyone
+              </Text>
+            </Button>
+            <Button
+              style={styles.button}
+              transparent
+              onPress={() =>
+                this.props.navigation.navigate("FamilyConnections")
+              }
+            >
+              <Text style={styles.buttonText}>
+                Family Connections - Family Trees for Permanency
+              </Text>
+            </Button>
+            <Button
+              style={styles.button}
+              transparent
+              onPress={() => Linking.openURL("https://connectourkids.org")}
+            >
+              <Text style={styles.buttonText}>
+                Resources - Useful Materials and Information
+              </Text>
+            </Button>
+          </ScrollView>
+        </SafeAreaView>
+      </Container>
+    );
+  }
+}
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#fff',
+    backgroundColor: "#fff",
     padding: 20
   },
   header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
     marginBottom: 25
   },
   button: {
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    flexDirection: 'row'
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexDirection: "row"
   },
   buttonText: {
-    color: 'rgb(80,141,179)',
+    color: "rgb(80,141,179)",
     fontSize: 12,
-    textDecorationLine: 'underline'
+    textDecorationLine: "underline"
   },
   textInput: {
-    borderColor: 'black',
+    borderColor: "black",
     borderWidth: 1,
-    borderStyle: 'solid'
+    borderStyle: "solid"
   },
   red: {
-    backgroundColor: 'red'
+    backgroundColor: "red"
   },
   WebViewContainer: {
-    marginTop: Platform.OS == 'ios' ? 20 : 0
+    marginTop: Platform.OS == "ios" ? 20 : 0
   }
 });