commit

components/Home.js

@@ -1,10 +1,17 @@
 import React from 'react';
-import { Text, View, ScrollView, Button, AsyncStorage, RefreshControl } from 'react-native';
+import { Text, View, ScrollView, Button, AsyncStorage, RefreshControl, StyleSheet } from 'react-native';
 import { List, ListItem } from 'react-native-elements';
 import { connect } from 'react-redux';
+import Icon from 'react-native-vector-icons/FontAwesome'
 import { getOrganizationsFromServer, getUserFromToken } from '../store';
 
 class Home extends React.Component {
+  static navigationOptions = {
+    headerTitleStyle: { color: 'black' },
+    title: 'My Places',
+    tabBarIcon: () => <Icon size={20} name='map-pin' color="#02a4ff" />
+  }
+
   constructor() {
     super();
     this.state = { refreshing: false }
@@ -30,22 +37,26 @@ class Home extends React.Component {
     const { navigate } = this.props.navigation;
     return (
       <ScrollView
+        style={ styles.container }
         refreshControl={
           <RefreshControl
             refreshing={this.state.refreshing}
             onRefresh={() => this.onRefresh()}
           />
         }
       >
-        <List>
+        <List
+          containerStyle={ styles.list }
+        >
           {
-            myOrgs.map((organization, index) => (
+            myOrgs.map((organization) => (
               <ListItem
                 roundAvatar
                 avatar={{uri: 'https://thesocietypages.org/socimages/files/2009/05/vimeo.jpg'}}
+                containerStyle={ styles.listItem }
                 title={organization.name}
                 subtitle={organization.organization_type}
-                key={index}
+                key={ organization.id }
                 onPress={() => navigate('Details', { organization })}
               />
             ))
@@ -73,3 +84,18 @@ const mapDispatch = dispatch => ({
 });
 
 export default connect(mapState, mapDispatch)(Home);
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#02a4ff'
+  },
+  list: {
+    marginLeft: 10,
+    marginRight: 10,
+    backgroundColor: '#02a4ff'
+  },
+  listItem: {
+    backgroundColor: '#f9f9f9',
+    marginBottom: 5
+  }
+});

components/MainStack.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { AsyncStorage, View } from 'react-native';
 import { connect } from 'react-redux';
-import { createStackNavigator, createMaterialTopTabNavigator } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation';
+import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
 import { Asset, AppLoading } from 'expo';
 import { getOrganizationsFromServer, getUserFromToken, getUserOrganizationsFromServer, getUsersFromServer, getUserRequestsFromServer, getOrganizationRequestsFromServer, getFormsFromServer, getDescriptionsFromServer } from '../store';
 
@@ -13,7 +14,7 @@ import UserDescriptions from './UserDescriptions';
 import Chat from './Chat';
 import SearchMap from './SearchMap';
 
-const TabNavigator = createMaterialTopTabNavigator({
+const TabNavigator = createMaterialBottomTabNavigator({
   'My Orgs': {
     screen: Home,
   },
@@ -24,17 +25,13 @@ const TabNavigator = createMaterialTopTabNavigator({
     screen: SearchMap,
   }
 }, {
-    headerMode: 'none',
-    tabBarOptions: {
-      activeTintColor: '#02A4FF',
-      inactiveTintColor: 'grey',
-      labelStyle: {
-        fontSize: 16,
-      },
-      style: {
-        backgroundColor: '#fff',
-      }
-    },
+  initialRouteName: 'My Orgs',
+  activeTintColor: '#02a4ff',
+  inactiveTintColor: '#005d91',
+  barStyle: {
+    backgroundColor: '#fff',
+    paddingBottom: 20,
+  }
 });
 
 const NavStack = createStackNavigator({
@@ -44,7 +41,12 @@ const NavStack = createStackNavigator({
   Chat: Chat,
 }, {
   headerMode: 'screen',
-  initialRouteName: 'Home'
+  initialRouteName: 'Home',
+  navigationOptions: {
+    headerStyle: {
+      backgroundColor: '#fff',
+    }
+  }
 });
 
 const RootStack = createStackNavigator({

components/SearchMap.js

@@ -2,8 +2,13 @@ import React from 'react';
 import { Text, View, StyleSheet, TextInput, FlatList, TouchableOpacity } from 'react-native';
 import { connect } from 'react-redux';
 import MapView, { Marker, Callout } from 'react-native-maps';
+import Icon from 'react-native-vector-icons/FontAwesome'
 
 class SearchMap extends React.Component {
+  static navigationOptions = {
+    tabBarLabel: 'Search',
+    tabBarIcon: () => <Icon size={20} name='search' color="#02a4ff" />
+  }
 
   constructor() {
     super();

components/UserRequests.js

@@ -2,9 +2,15 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { View } from 'react-native';
 import { Text, Button } from 'react-native-elements'
+import Icon from 'react-native-vector-icons/FontAwesome'
 import { updateUserRequestOnServer, deleteUserRequestFromServer } from '../store';
 
 class UserRequests extends Component {
+  static navigationOptions = {
+    tabBarLabel: 'Requests',
+    tabBarIcon: () => <Icon size={20} name='users' color="#02a4ff" />
+  }
+
   render() {
     const { user, users, receivedRequests, updateUserRequest, deleteUserRequest } = this.props;
     return (

package.json

@@ -26,7 +26,9 @@
     "react-native-elements": "^0.19.1",
     "react-native-gifted-chat": "^0.4.3",
     "react-native-maps": "^0.21.0",
+    "react-native-vector-icons": "^4.6.0",
     "react-navigation": "^2.0.2",
+    "react-navigation-material-bottom-tabs": "^0.3.0",
     "react-redux": "^5.0.7",
     "redux": "^4.0.0",
     "redux-thunk": "^2.2.0",

store/productionUrl.js

@@ -1,5 +1,5 @@
 let localHost;
-localHost = 'http://10.13.78.114:3000';
+localHost = 'http://192.168.0.104:3000';
 // localHost = 'http://localhost:3000';
 const url = localHost || 'http://immense-escarpment-58025.herokuapp.com';
 export default url;