Development

App.js

@@ -1,7 +1,94 @@
-import React from 'react';
-import BestPracticesScreen from './src/screens/BestPracticesScreen';
-// import FamilyConnectionsScreen from './src/screens/FamilyConnectionsScreen';
+import React, { Component } from "react";
+import {
+  createAppContainer,
+  createDrawerNavigator,
+  createStackNavigator,
+  createSwitchNavigator
+} from "react-navigation";
+import { StyleSheet } from "react-native";
+import { Button } from "native-base";
 
-export default function App() {
-  return <BestPracticesScreen />;
+import BestPracticesScreen from "./src/screens/BestPracticesScreen";
+import FamilyConnectionsScreen from "./src/screens/FamilyConnectionsScreen";
+import PeopleSearchScreen from "./src/screens/PeopleSearchScreen";
+
+export default class App extends Component {
+  static navigationOptions = {
+    drawerLabel: "Notifications",
+    drawerIcon: () => (
+      <View style={styles.authContainer}>
+        <Button>
+          <Text>Log In</Text>
+        </Button>
+        <Button>
+          <Text>Sign Up</Text>
+        </Button>
+      </View>
+    )
+  };
+  render() {
+    return <AppContainer />;
+  }
 }
+
+const BestPracticeNavigator = createStackNavigator(
+  {
+    BestPractices: {
+      screen: BestPracticesScreen
+    }
+  },
+  {
+    initialRouteName: "BestPractices"
+  }
+);
+const FamilyConnectionsNavigator = createStackNavigator(
+  {
+    FamilyConnections: {
+      screen: FamilyConnectionsScreen
+    }
+  },
+  {
+    initialRouteName: "FamilyConnections"
+  }
+);
+
+const PeopleSearchNavigator = createStackNavigator(
+  {
+    PeopleSearch: {
+      screen: PeopleSearchScreen
+    }
+  },
+  {
+    initialRouteName: "PeopleSearch"
+  }
+);
+
+const AppDrawerNavigator = createDrawerNavigator(
+  {
+    "Best Practices": {
+      screen: BestPracticeNavigator
+    },
+    "Family Connections": {
+      screen: FamilyConnectionsNavigator
+    },
+    "People Search": {
+      screen: PeopleSearchNavigator
+    }
+  }
+  // To make drawer open on right side uncomment line below
+  // { drawerPosition: "right" }
+);
+
+const AppSwitchNavigator = createSwitchNavigator({
+  BestPractices: { screen: AppDrawerNavigator },
+  FamilyConnections: { screen: AppDrawerNavigator },
+  PeopleSearch: { screen: AppDrawerNavigator }
+});
+
+const styles = StyleSheet.create({
+  authContainer: {
+    flexDirection: "row"
+  }
+});
+
+const AppContainer = createAppContainer(AppSwitchNavigator);

src/components/HeaderTitle.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { View, Text, Image, Platform } from "react-native";
+import logoImg from "../../assets/simple-logo.png";
+
+const HeaderTitle = ({ title }) => (
+  // title should be the string of the components name
+  <View style={{ flexDirection: "row" }}>
+    {/* on android the text renders left aligned and therefore we put the logo next to it, ios renders centered */}
+    {Platform.OS === "android" ? (
+      <Image
+        source={logoImg}
+        style={{ width: 40, height: 40, marginHorizontal: 10 }}
+        resizeMode="contain"
+      />
+    ) : null}
+    <Text
+      style={{ fontSize: 18, fontWeight: "bold" }}
+    >{`Connect Our Kids \n${title}`}</Text>
+  </View>
+);
+
+export default HeaderTitle;

src/components/PersonsRow.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Text, View, Image } from 'react-native'
+
+export default function PersonsRow({ item }) {
+    return (
+        <View>
+            {item.images ?
+                <Image
+                    style={{ width: 75, height: 75 }}
+                    source={{ uri: `https://dev.search.connectourkids.org/api/thumbnail?tokens=${item.images[0].thumbnail_token}` }}
+                />
+                : <Image
+                    style={{ width: 75, height: 75 }}
+                    source={{ uri: 'https://dev.search.connectourkids.org/api/thumbnail?tokens=AE2861B20B7D6E22D4C9479C5C7387EF9C9CE823D35EABEA7AAFCEB4822D4BE6583BC7DC98D6B5210198C7212B2FD214763272C79F7CA63BE2B8506D2169603090E8B141709B04C80F39BCBFCEC9A282A7BB8F0DB3884DA83EF83FC8D75468D8BDBEB02A142C066F83F3FB82506B407FF8717CEA9C9FE6473138E1E10283F5B34F24AB776656BB6E1313E2142E,AE2861B242686E6ACBCD539D133B8AE59A9AE962DB1FA5AA7AF08DAFDE6D0BF11B678C83D9CDB2322ADF85744B699B543C4E5FE3AC5A925CD38B745A094D5664F48F947358B57DB95E4CE5EB,AE2861B242686E7ECDCD579C5E7398F2969BED6CDD1FA5AA7AF0D1FE8B3458E6423ED4D29392B83E30DC92630078860B351A45E7F10CCF489AD6221B511A0E6AEA99913457E825E95259E5EE91B4BDE2EF92EA61A8F712DE67821AEF8B2C64D1B596E1425E4E38518D98DFA901537D7DF60237AFCCA1CE0D667DB4F445C9' }}
+                />}
+            <Text>{item.names[0].display}</Text>
+            {item.dob ?
+                <Text>{item.dob.display}</Text>
+            : null}
+            {item.gender ?
+                <Text>{item.gender.content}</Text>
+            : null}
+            {item.addresses ?
+                item.addresses.map(address => {
+                    return (
+                        <Text>{address.city} , {address.state}</Text>
+                    )
+                })
+            : null}
+        </View>
+    )
+}

src/helpers/headerConfig.js

@@ -0,0 +1,32 @@
+import HeaderTitle from "./../components/HeaderTitle";
+import logoImg from "../../assets/simple-logo.png";
+import { Image, Platform, TouchableWithoutFeedback } from "react-native";
+import { Icon } from "native-base";
+import React from "react";
+
+export default (headerConfig = (title, navigation) => {
+  return {
+    headerTitle: <HeaderTitle title={title} />,
+    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>
+    )
+  };
+});

src/screens/BestPracticesScreen.js

@@ -1,105 +1,113 @@
-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,
+  Linking
+} from "react-native";
+import { Container, Button } from "native-base";
+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>
+import headerConfig from "../helpers/headerConfig";
+class BestPracticesScreen extends Component {
+  static navigationOptions = ({ navigation }) =>
+    headerConfig("Best Practices", navigation);
+  render() {
+    return (
+      <Container style={styles.container}>
+        <SafeAreaView>
+          <ScrollView>
+            <Text>
+              Connect Our Kids makes free tools for social workers engaged in
+              permanency 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>
-            <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>
-          <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>
-            <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
-            </Text>
-          </Button>
-        </ScrollView>
-      </SafeAreaView>
-    </Container>
-  );
-};
+            <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
   }
 });