Added pictures to friend map, Dynamically render pictures

app/AddFence.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { View, Text, StyleSheet, Button, Picker, ListView } from 'react-native';
 import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
 import AuthAxios from './AuthAxios.js';
+import styles from './styles.js';
 
 const Item = Picker.Item
 export default class AddFence extends Component {
@@ -69,26 +70,24 @@ export default class AddFence extends Component {
 
   renderFence(fence) {
     return (
-      <View>
-        <Text>
+      <View style={styles.container}>
+        <Text style={styles.settingText}>
           {fence.label}
         </Text>
-        <Text>
-          {fence.address}{'\n'}{'\n'}
+        <Text style={styles.fenceAddress}>
+          {fence.address}
         </Text>
       </View>
     )
   }
 
   render() {
     return (
-      <View>
-        <View>
-          <ListView
-            dataSource={this.state.fences}
-            renderRow={this.renderFence}
-          />
-        </View>
+      <View style={styles.container}>
+        <Button
+            title='Set this fence'
+            onPress={() => this.makeFence(this.state.coordinates)}
+        />
         <Picker 
           selectedValue={this.state.label}
           onValueChange={this.onValueChange.bind(this)}>
@@ -153,10 +152,13 @@ export default class AddFence extends Component {
             debounce={200}
         />
         </View>
-          <Button
-              title='Set this fence'
-              onPress={() => this.makeFence(this.state.coordinates)}
+        <View>
+          <ListView
+            dataSource={this.state.fences}
+            renderRow={this.renderFence}
+            style={styles.listView}
           />
+        </View>
       </View>
     );
   }

app/CreateGroup.js

@@ -77,37 +77,40 @@ export default class CreateGroup extends Component {
     const params = this.props.navigation.state.params;
     return (
       <View style={styles.container}>
-        <Text style={styles.createGroupText}>Create Group:</Text>
-        <TextInput
-          style={{fontSize: 18, textAlign: 'left'}}
-          onChangeText={(text) => this.setState( {groupName: text} )}
-          placeholder='Insert Group Name'
-          value={this.state.text}
-        />
-        <Text style={styles.createGroupText}>Privacy Setting:</Text>
-        <Picker
-          selectedValue={this.state.privacy}
-          onValueChange={(privacy) => this.setState({ privacy: privacy })}
-        >
-          <Picker.Item label='Label' value='label' />
-          <Picker.Item label='GPS' value='gps' />
-        </Picker>
-        <Text style={styles.createGroupText}>Members:</Text>
-        <ListView
-          dataSource={this.state.friends}
-          style={styles.listView}
-          renderRow={(rowData) => (
-            <CheckBox
-              label={rowData.first}
-              onChange={() => this.handleUserChange(rowData)}
-              underlayColor='transparent'
-            />
-          )}
-        />
         <Button 
           title="Create Group"
           onPress={this.submitGroup}
         />
+        <View style={styles.createGroupContainer}>
+          <Text style={styles.createGroupText}>Create Group:</Text>
+          <TextInput
+            style={styles.createGroupTextInput}
+            onChangeText={(text) => this.setState( {groupName: text} )}
+            placeholder='Insert Group Name'
+            value={this.state.text}
+          />
+          <Text style={styles.createGroupText}>Privacy Setting:</Text>
+          <Picker
+            selectedValue={this.state.privacy}
+            onValueChange={(privacy) => this.setState({ privacy: privacy })}
+          >
+            <Picker.Item label='Label' value='label' />
+            <Picker.Item label='GPS' value='gps' />
+          </Picker>
+          <Text style={styles.createGroupText}>Members:</Text>
+          <ListView
+            dataSource={this.state.friends}
+            style={styles.listView}
+            renderRow={(rowData) => (
+              <CheckBox
+                label={rowData.first}
+                labelStyle={styles.fenceAddress}
+                onChange={() => this.handleUserChange(rowData)}
+                underlayColor='transparent'
+              />
+            )}
+          />
+        </View>
       </View>
     );
   }

app/FriendMap.js

@@ -61,6 +61,7 @@ export default class FriendMap extends Component {
   render() {
     return (
       <View style={styles.container}>
+        <Button title='Let me know when they get home' onPress={() => {this.subscribeTo(data)}} />
         <View style={styles.switchContainer}>
           <Switch
               onValueChange={this.switchChange}
@@ -82,12 +83,20 @@ export default class FriendMap extends Component {
   }
 
   renderLabel(data) {
+    let path;
+    if( data.currentLabel === 'School' ) { path = require('./Image/school.png') };
+    if( data.currentLabel === 'Home' ) { path = require('./Image/home.png') };
+    if( data.currentLabel === 'Office' ) { path = require('./Image/office.png') };
+    if( data.currentLabel === 'Bar' ) { path = require('./Image/bar.png') };
+    if( data.currentLabel === 'Gym' ) { path = require('./Image/gym.png') };
     return (
       <View style={styles.friendMapContainer}>
-        <Button title='Let me know when they get home' onPress={() => {this.subscribeTo(data)}} />
         <Text style={styles.friendMapText}>{data.first} checked in at:</Text> 
-        <Text style={styles.friendMapText}>{data.currentLabel}</Text>
-        <Text style={styles.friendMapText}>5 min ago</Text>
+        <Image
+          source={path}
+          style={styles.labelImage}
+        />
+        <Text style={styles.friendMapText}>{data.currentLabel} 5 min ago</Text>
       </View>
     );
   }
@@ -96,7 +105,6 @@ export default class FriendMap extends Component {
     const { region } = this.props;
     return (
       <View style={styles.friendMapContainer}>
-        <Button title='Let me know when they get home' onPress={() => {this.subscribeTo(data)}} />
         <Text style={styles.friendMapText}>Checked In At:</Text>
         {this.renderMapView(data)}
         <Text style={styles.friendMapText}>{data.currentLabel} 12 min Ago.</Text>

app/GroupMap.js

@@ -131,13 +131,13 @@ export default class GroupMap extends Component {
           onPress={() => !this.state.addAndDelete ? this.changeToEditGroup() : this.updateGroupMembers() }
           title={ !this.state.addAndDelete ? 'Add/Delete Friends' : 'Confirm'}
         />
-        <View style={styles.switchContainer}>
-          <Switch
-            onValueChange={this.switchChange}
-            value={this.state.showLabel}
-          />
-          <Text style={styles.switchText}>{this.state.showLabel ? 'Show Only Label' : 'Show GPS'}</Text>
-        </View>
+          <View style={styles.switchContainer}>
+            <Switch
+              onValueChange={this.switchChange}
+              value={this.state.showLabel}
+            />
+            <Text style={styles.switchText}>{this.state.showLabel ? 'Show Only Label' : 'Show GPS'}</Text>
+          </View>
         {this.state.addAndDelete ? <AddDeleteGroupMembers members={this.state.members} name={data.name} toAdd={this.addMember} toDelete={this.removeMember} /> : this.renderNoChangeList()}
       </View>
     );

app/Home.js

@@ -1,27 +1,60 @@
 import React, { Component } from 'react';
-import { View, StyleSheet } from 'react-native';
-import HomeFavorite from './HomeFavorite.js';
+import { Button, View, Text, StyleSheet, ListView, TouchableOpacity } from 'react-native';
+
 import PushController from './FCM/PushController.js';
 import AuthAxios from './AuthAxios.js';
 import styles from './styles.js';
 
 export default class HomeScreen extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      members: new ListView.DataSource({
+        rowHasChanged: (row1, row2) => row1 !== row2
+      })
+    };
   };
 
+  componentWillMount() {
+    AuthAxios({
+      url: `/api/groupUsers?name=FAVORITES`
+    })
+    .then(({data}) => {
+      let members = data;
+      this.setState({members: this.state.members.cloneWithRows(members)});
+    })
+    .catch(err => {
+      console.log('There was an error fetching members', err);
+    });
+  }
+
   static navigationOptions = {
     title: 'Favorites'
   };
-
   render() {
-    const { navigate } = this.props.navigation;    
     return (
-      <View>
+      <View style={styles.container}>
         <PushController />
-        <HomeFavorite />
+        <ListView
+          dataSource={this.state.members}
+          style={styles.listView}
+          renderRow={(rowData) => this.renderMembers(rowData) }
+        />
       </View>
-    )
+    );
+  }
+
+  renderMembers(memberData) {
+    const { navigate } = this.props.navigation;
+    return (
+      <TouchableOpacity
+        onPress={() => navigate('FriendMap', {data: memberData}) }
+      >
+        <View style={styles.nameContainer}>
+          <Text style={styles.name}>{memberData.first} {memberData.last}</Text>
+          <Text style={styles.label}>{memberData.currentLabel ? memberData.currentLabel : 'Pending'}</Text>
+        </View>
+      </TouchableOpacity>
+    );
   }
 }

app/Settings.js

@@ -98,10 +98,9 @@ export default class Settings extends Component {
         <Switch
           onValueChange={this.switchChange}
           value={this.state.incognito} />
-
-        <TouchableOpacity onPress={() => {this._signOut()} }>
-          <Text>Log Out</Text>
-        </TouchableOpacity>
+        <View style= {{flex: 1}}>
+          <Button onPress={() => {this._signOut()}} title='Log Out' />
+        </View>
 
         {this.state.error &&
           (<Text>There was an error updating your privacy settings. Please try again later.</Text>)}