UPS0-Main Navigators (pull request #6)

.eslintrc.js

@@ -2,7 +2,8 @@ module.exports = {
   "extends": "rallycoding",
   "rules": {
     "max-len": 0,
-    "react/require-extension": "off"
+    "react/require-extension": "off",
+    "react/jsx-tag-spacing": ["error", { "beforeSelfClosing": "always" }]
   },
   "globals": {
     "fetch": true

App.js

@@ -2,13 +2,13 @@ import React from 'react';
 import { View } from 'react-native';
 import FlashMessage from 'react-native-flash-message';
 
-import AppNavigator from './src/config/router';
+import RootNavigator from './src/components/navigators/RootNavigator';
 
 export default class App extends React.Component {
   render() {
     return (
       <View style={{ flex: 1 }}>
-        <AppNavigator />
+        <RootNavigator />
         <FlashMessage position="top" /> 
       </View>
     );

ios/Tagfer.xcodeproj/xcshareddata/xcschemes/Tagfer.xcscheme

@@ -80,7 +80,7 @@
       </AdditionalOptions>
    </TestAction>
    <LaunchAction
-      buildConfiguration = "Release"
+      buildConfiguration = "Debug"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       launchStyle = "0"

package.json

@@ -21,7 +21,6 @@
     "react-native-image-picker": "^0.28.0",
     "react-native-masked-text": "^1.9.2",
     "react-native-permissions": "^1.1.1",
-    "react-native-sms": "^1.8.0",
     "react-native-vector-icons": "^4.6.0",
     "react-native-webview": "^2.14.3",
     "react-navigation": "^3.0.9",

src/components/navigators/AppNavigator.js

@@ -0,0 +1,24 @@
+import EventsScreen from '../../screens/events/EventsScreen';
+import ConnectScreen from '../../screens/connections/ConnectScreen';
+import MessagesScreen from '../../screens/messages/MessagesScreen';
+import ProfileScreen from '../../screens/profile/ProfileScreen';
+
+import BottomTabNavigator from './BottomTabNavigator';
+import TopStackNavigator from './TopStackNavigator';
+import ContactsTabNavigator from './ContactsTabNavigator';
+
+const ConnectionsStack = TopStackNavigator({
+  connect: ConnectScreen
+});
+
+const ContactsStack = TopStackNavigator({
+  contcats: ContactsTabNavigator
+});
+
+export default BottomTabNavigator({
+  Events: EventsScreen,
+  Contacts: ContactsStack,
+  Connections: ConnectionsStack,
+  Messages: MessagesScreen,
+  Profile: ProfileScreen
+});

src/components/navigators/AuthNavigator.js

@@ -0,0 +1,40 @@
+import { createStackNavigator } from 'react-navigation';
+
+import WelcomeScreen from '../../screens/onboaring/WelcomeScreen';
+import LoginScreen from '../../screens/auth/LoginScreen';
+import SignupScreenOne from '../../screens/auth/SignupScreen1';
+import SignupScreenTwo from '../../screens/auth/SignupScreen2';
+import SignupScreenThreeA from '../../screens/auth/SignupScreen3a';
+import SignupScreenThreeB from '../../screens/auth/SignupScreen3b';
+import SignupScreenFour from '../../screens/auth/SignupScreen4';
+import SignupScreenFive from '../../screens/auth/SignupScreen5';
+import SignupScreenSix from '../../screens/auth/SignupScreen6';
+import TwitterWebView from '../../screens/auth/TwitterWebView';
+import ForgotPasswordScreen from '../../screens/auth/ForgotPasswordScreen';
+
+const AuthNavigator = createStackNavigator({
+  welcome: WelcomeScreen,
+  login: LoginScreen,
+  forgotPassword: ForgotPasswordScreen,
+  signup1: SignupScreenOne,
+  signup2: SignupScreenTwo,
+  signup3a: SignupScreenThreeA,
+  signup3b: SignupScreenThreeB,
+  signup4: SignupScreenFour,
+  signup5: SignupScreenFive,
+  signup6: SignupScreenSix
+});
+
+const AuthStack = createStackNavigator(
+{
+  auth: {
+    screen: AuthNavigator,
+    navigationOptions: { header: null }
+  },
+  twitterWebView: TwitterWebView
+},
+{ 
+  mode: 'modal' 
+});
+
+export default AuthStack;

src/components/navigators/BottomTabNavigator.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Icon, Avatar } from 'react-native-elements'; 
+import { createBottomTabNavigator } from 'react-navigation';
+
+import ProfileIcon from '../new/TagferAvatar.js';
+
+const ConnectionsIcon = ({ color }) => (
+  <Avatar
+    medium
+    rounded
+    icon={{ name: 'handshake-o', type: 'font-awesome' }}
+    activeOpacity={0.7}
+    overlayContainerStyle={{ backgroundColor: color }}
+    containerStyle={{
+      width: 45,
+      height: 45
+    }}
+  />
+);
+
+const EventsIcon = ({ size, color }) => (
+  <Icon name='calendar-today' type='material-community' size={size} color={color} />
+);
+const ContactsIcon = ({ size, color }) => (
+  <Icon name='group' type='material' size={size} color={color} />
+);
+
+const MessagesIcon = ({ size, color }) => (
+  <Icon name='message-reply-text' type='material-community' size={size} color={color} />
+);
+
+function tabIconSelector(routeName, tintColor) {
+  switch (routeName) {
+    case 'Events':
+      return <EventsIcon size={30} color={tintColor} />;
+    case 'Contacts':
+      return <ContactsIcon size={30} color={tintColor} />;
+    case 'Connections':
+      return <ConnectionsIcon size={30} color={tintColor} />;
+    case 'Messages':
+      return <MessagesIcon size={30} color={tintColor} />;
+    case 'Profile':
+      return <ProfileIcon size='small' color={tintColor} />;
+    default:
+      return null;
+  }
+}
+
+export default function BottomTabNavigator({ Events, Contacts, Connections, Messages, Profile }) {
+  if (!Events || !Contacts || !Connections || !Messages || !Profile) {
+    console.log('Empty Navigator Supplied to BottomTabNavigator');
+  }
+
+  return createBottomTabNavigator({
+    Events,
+    Contacts,
+    Connections,
+    Messages,
+    Profile
+  }, {
+    initialRouteName: 'Profile',
+    defaultNavigationOptions: ({ navigation }) => ({
+      tabBarIcon: ({ tintColor }) => {
+        const { routeName } = navigation.state;
+        return tabIconSelector(routeName, tintColor);
+      },
+      tabBarOptions: {
+        inactiveTintColor: '#8699A7',
+        activeTintColor: '#53ACF0',
+        style: {
+          height: 60
+        }
+      }
+    })
+  });
+}

src/components/navigators/ContactsTabNavigator.js

@@ -0,0 +1,38 @@
+import { createMaterialTopTabNavigator } from 'react-navigation';
+
+import SuggestedContactsScreen from '../../screens/contacts/SuggestedContactsScreen';
+import RequestsScreen from '../../screens/contacts/RequestsScreen';
+import AllContactsScreen from '../../screens/contacts/AllContactsScreen';
+
+const contactsTabBarOptions = {
+  upperCaseLabel: false,
+  activeTintColor: 'white',
+  inactiveTintColor: '#53ACF0',
+  labelStyle: {
+    margin: 1,
+    fontSize: 13,
+  },
+  tabStyle: {
+    borderColor: '#53ACF0',
+    borderWidth: 1,
+    padding: 5
+  },
+  indicatorStyle: {
+    backgroundColor: '#53ACF0',
+    bottom: 0,
+    height: 50,
+  },
+  style: {
+    backgroundColor: 'transparent',
+  }
+};
+
+export default createMaterialTopTabNavigator(
+  {
+    Suggested: SuggestedContactsScreen,
+    Unconfirmed: RequestsScreen,
+    All: AllContactsScreen
+  },
+  {
+    tabBarOptions: contactsTabBarOptions
+  });

src/components/navigators/RootNavigator.js

@@ -0,0 +1,18 @@
+import { createAppContainer, createSwitchNavigator } from 'react-navigation';
+
+import TransitionScreen from '../../screens/auth/TransitionScreen';
+import AuthStack from './AuthNavigator';
+import AppStack from './AppNavigator';
+
+const RootNavigator = createSwitchNavigator(
+  {
+    Loading: TransitionScreen,
+    App: AppStack,
+    Auth: AuthStack,
+  },
+  {
+    initialRouteName: 'Loading',
+  }
+);
+
+export default createAppContainer(RootNavigator);

src/components/navigators/TopStackNavigator.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { createStackNavigator } from 'react-navigation';
+
+import { Icon } from 'react-native-elements';
+
+const headerLeft = (
+  <View style={{ flexDirection: 'row' }}>
+    <TouchableOpacity style={{ marginLeft: 10 }}>
+      <Icon name='settings' type='simple-line-icon' size={28} color='#253C50' />
+    </TouchableOpacity>
+
+    <TouchableOpacity style={{ marginLeft: 15 }}>
+      <Icon name='globe' type='simple-line-icon' size={28} color='#253C50' />
+    </TouchableOpacity>
+  </View>
+);
+
+const headerRight = (
+  <View style={{ flexDirection: 'row' }}>
+    <TouchableOpacity style={{ marginRight: 15 }}>
+      <Icon name='wallet' type='entypo' size={32} color='#253C50' />
+    </TouchableOpacity>
+
+    <TouchableOpacity style={{ marginRight: 10 }}>
+      <Icon name='bell-outline' size={32} type='material-community' color='#253C50' />
+    </TouchableOpacity>
+  </View>
+);
+
+
+export default function TopStackNavigator(routes) {
+  return createStackNavigator(
+    routes,
+    {
+      defaultNavigationOptions: {
+        title: 'PUBLIC PROFILE',
+        headerRight,
+        headerLeft
+      }
+    });
+}

src/realm/schemas/AuthSchema.js

@@ -54,7 +54,7 @@ export const SessionSchema = {
     key: 'int',
     sessionId: 'string'
   }
-}
+};
 
 export const SignupConfig = {
   path: 'Signup.realm',

src/screens/auth/LoginScreen.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image, KeyboardAvoidingView, Platform, Dimensions, View, Text, Keyboard, ScrollView, Alert } from 'react-native';
+import { Image, KeyboardAvoidingView, Platform, Dimensions, View, Text, Keyboard, ScrollView } from 'react-native';
 import { Button, FormInput } from 'react-native-elements';
 
 import { FormLabel, Spacer, TextButton } from '../../components/common';
@@ -32,7 +32,7 @@ export default class LoginScreen extends React.Component {
     Keyboard.dismiss();
     this.setState({ loading: true });
     const body = this.getLoginRequestBody();
-    const resp = await fetchAuth(endpoints.login, body)
+    const resp = await fetchAuth(endpoints.login, body);
     this.setState({ loading: false });
 
     if (resp.error) {
@@ -40,7 +40,7 @@ export default class LoginScreen extends React.Component {
       showFlashErrorMessage(resp.error);
     } else {
       saveAuthState(resp.sessionId);
-      Alert.alert('Signup Success 🎉', "Check back in a couple of weeks for more features.");
+      this.props.navigation.navigate('App');
     }
   }
 

src/screens/auth/SignupScreen6.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Dimensions, Text, View, FlatList, TouchableOpacity } from 'react-native';
+import { Dimensions, Text, View, FlatList, TouchableOpacity } from 'react-native';
 import { Button } from 'react-native-elements';
 
 import { strings } from '../../locales/i18n';
@@ -71,7 +71,7 @@ export default class SignupScreenSix extends React.Component {
       showFlashErrorMessage(resp.error);
     } else {
       saveAuthState(resp.sessionId);
-      Alert.alert('Signup Success 🎉', 'Check back next week for more features.');
+      this.props.navigation.navigate('App');
     } 
   }
 

src/screens/auth/TransitionScreen.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ActivityIndicator, View } from 'react-native';
+
+import { getAuthState } from '../../realm/actions/AuthActions';
+
+export default class TransitionScreen extends React.Component {
+  constructor(props) {
+    super(props);
+    this.bootstrapAsync();
+  }
+
+  // Fetch the token from storage then navigate to our appropriate stack
+  async bootstrapAsync() {
+    const userToken = await getAuthState();
+    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
+  }
+
+  render() {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <ActivityIndicator size='large' />
+      </View>
+    );
+  }
+}

src/screens/connections/ConnectScreen.js

@@ -6,15 +6,11 @@ import colors from '../../config/colors.json';
 
 
 export default class ProfileSearchScreen extends React.Component {
-  static navigationOptions = {
-    title: 'Make Connections via',
-    headerStyle: { borderBottomWidth: 0, backgroundColor: colors.offWhite },
-    headerLeft: null
-  };
 
   render() {
     return (
       <View style={styles.container}>
+        <Text style={{ color: '#416788', fontSize: 18, textAlign: 'center', marginTop: 10 }}>Make Connections via</Text>
         <HorizontalCard 
           flex={0.2} 
           text='Scan QR Code'
@@ -94,7 +90,7 @@ const styles = StyleSheet.create({
         shadowColor: 'rgba(0,0,0, .2)',
         shadowOffset: { height: 0, width: 0 },
         shadowOpacity: 1,
-        shadowRadius: 4,
+        shadowRadius: 2,
       },
       android: {
         elevation: 1,

src/screens/contacts/AllContactsScreen.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+export default class AllConnectionsScreen extends React.Component {
+  
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>All Contacts</Text>
+      </View>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+};

src/screens/contacts/RequestsScreen.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+export default class UnconfirmedConnetcionsScreen extends React.Component {
+  
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>Unconfirmed Connections</Text>
+      </View>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+};

src/screens/contacts/SuggestedContactsScreen.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+export default class SuggestedConnectionsScreen extends React.Component {
+  
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>Suggested Connections</Text>
+      </View>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+};

src/screens/events/EventsScreen.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+export default class AllConnectionsScreen extends React.Component {
+  
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>Events</Text>
+      </View>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+};

src/screens/messages/MessagesScreen.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+export default class AllConnectionsScreen extends React.Component {
+  
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>Messages</Text>
+      </View>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+};

src/screens/profile/ProfileScreen.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+export default class AllConnectionsScreen extends React.Component {
+  
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>Profile</Text>
+      </View>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+};