Login select screen

App.js

@@ -1,268 +1,99 @@
-// import React from "react";
-// import { StyleSheet, Text, View } from "react-native";
-// import { GiftedChat } from "react-native-gifted-chat";
-// export default class App extends React.Component {
-//   state = {
-//     messages: [
-//       {
-//         _id: 1,
-//         text: "heyo team puddin",
-//         createdAt: new Date()
-//       }
-//     ]
-//   };
-// render() {
-//     return (
-//       <View style={styles.container}>
-//         <GiftedChat messages={this.state.messages} />
-//       </View>
-//     );
-//   }
-// }
-// const styles = StyleSheet.create({
-//   container: {
-//     flex: 1
-//   }
-// });
-
-
 import React from 'react';
-import {
-  Platform,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-
+import ReactNative from "react-native";
+import { Platform, StatusBar, StyleSheet, View } from 'react-native';
+import { AppLoading, Asset, Font, Icon } from 'expo';
+import AppNavigator from './navigation/AppNavigator';
+import Login from './screens/Login';
+import ChooseTutor from './screens/ChooseTutor';
 import {GiftedChat, Actions, Bubble, SystemMessage} from 'react-native-gifted-chat';
 import CustomActions from './CustomActions';
 import CustomView from './CustomView';
 
-export default class Example extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      messages: [],
-      loadEarlier: true,
-      typingText: null,
-      isLoadingEarlier: false,
-    };
-
-    this._isMounted = false;
-    this.onSend = this.onSend.bind(this);
-    this.onReceive = this.onReceive.bind(this);
-    this.renderCustomActions = this.renderCustomActions.bind(this);
-    this.renderBubble = this.renderBubble.bind(this);
-    this.renderSystemMessage = this.renderSystemMessage.bind(this);
-    this.renderFooter = this.renderFooter.bind(this);
-    this.onLoadEarlier = this.onLoadEarlier.bind(this);
-
-    this._isAlright = null;
-  }
-
-  componentWillMount() {
-    this._isMounted = true;
-    this.setState(() => {
-      return {
-        messages: require('./data/messages.js'),
-      };
-    });
-  }
-
-  componentWillUnmount() {
-    this._isMounted = false;
-  }
-
-  onLoadEarlier() {
-    this.setState((previousState) => {
-      return {
-        isLoadingEarlier: true,
-      };
-    });
-
-    setTimeout(() => {
-      if (this._isMounted === true) {
-        this.setState((previousState) => {
-          return {
-            messages: GiftedChat.prepend(previousState.messages, require('./data/old_messages.js')),
-            loadEarlier: false,
-            isLoadingEarlier: false,
-          };
-        });
-      }
-    }, 1000); // simulating network
-  }
-
-  onSend(messages = []) {
-    this.setState((previousState) => {
-      return {
-        messages: GiftedChat.append(previousState.messages, messages),
-      };
-    });
-
-    // for demo purpose
-    this.answerDemo(messages);
-  }
-
-  answerDemo(messages) {
-    if (messages.length > 0) {
-      if ((messages[0].image || messages[0].location) || !this._isAlright) {
-        this.setState((previousState) => {
-          return {
-            typingText: 'Tutor is typing...'
-          };
-        });
-      }
+export default class App extends React.Component {
+
+  constructor(props){
+    super(props)
+    this.state={
+      isLoadingComplete: false,
+      hasChosen: false,
+      isMentor:false
     }
-
-    setTimeout(() => {
-      if (this._isMounted === true) {
-        if (messages.length > 0) {
-          if (messages[0].image) {
-            this.onReceive('Nice picture!');
-          } else if (messages[0].location) {
-            this.onReceive('My favorite place');
-          } else {
-            if (!this._isAlright) {
-              this.onReceive('¿Hola, como estás?');
-              this._isAlright = true;
-            }
-          }
-        }
-      }
-
-      this.setState((previousState) => {
-        return {
-          typingText: null,
-        };
-      });
-    }, 1000);
+    this.hasChosenChange = this.hasChosenChange.bind(this);
+    this.goBack = this.goBack.bind(this);
   }
-
-  onReceive(text) {
-    this.setState((previousState) => {
-      return {
-        messages: GiftedChat.append(previousState.messages, {
-          _id: Math.round(Math.random() * 1000000),
-          text: text,
-          createdAt: new Date(),
-          user: {
-            _id: 2,
-            name: 'React Native',
-            // avatar: 'https://facebook.github.io/react/img/logo_og.png',
-          },
-        }),
-      };
+
+  hasChosenChange = (isMentor)=>{
+    this.setState({
+      hasChosen:true,
+      isMentor:isMentor
     });
   }
+  goBack = ()=>{
+    this.setState({
+      hasChosen:false
+    })
+  }
 
-  renderCustomActions(props) {
-    if (Platform.OS === 'ios') {
+  render() {
+    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
       return (
-        <CustomActions
-          {...props}
+        <AppLoading
+          startAsync={this._loadResourcesAsync}
+          onError={this._handleLoadingError}
+          onFinish={this._handleFinishLoading}
         />
       );
+    } else {
+      if(!this.state.hasChosen){
+        return (
+          <View style={styles.container}>
+            {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
+            <Login hasChosenChange={this.hasChosenChange } />
+          </View>
+        );
+      }else{
+        return(
+          <ChooseTutor isMentor={this.state.isMentor} goBack={this.goBack}/>
+        )
+      }
     }
-    const options = {
-      'Action 1': (props) => {
-        alert('option 1');
-      },
-      'Action 2': (props) => {
-        alert('option 2');
-      },
-      'Cancel': () => {},
-    };
-    return (
-      <Actions
-        {...props}
-        options={options}
-      />
-    );
   }
 
-  //other person messages 
-    renderBubble(props) {
-    return (
-      <Bubble
-        {...props}
-        wrapperStyle={{
-          left: {
-            backgroundColor: '#f0f0f0',
-          }
-        }}
-      />
-    );
-  }
 
-  renderSystemMessage(props) {
-    return (
-      <SystemMessage
-        {...props}
-        containerStyle={{
-          marginBottom: 15,
-        }}
-        textStyle={{
-          fontSize: 14,
-        }}
-      />
-    );
-  }
 
-  renderCustomView(props) {
-    return (
-      <CustomView
-        {...props}
-      />
-    );
-  }
 
-  renderFooter(props) {
-    if (this.state.typingText) {
-      return (
-        <View style={styles.footerContainer}>
-          <Text style={styles.footerText}>
-            {this.state.typingText}
-          </Text>
-        </View>
-      );
-    }
-    return null;
-  }
-
-  render() {
-    return (
-      <GiftedChat
-        messages={this.state.messages}
-        onSend={this.onSend}
-        loadEarlier={this.state.loadEarlier}
-        onLoadEarlier={this.onLoadEarlier}
-        isLoadingEarlier={this.state.isLoadingEarlier}
-
-        user={{
-          _id: 1, // sent messages should have same user._id
-        }}
-
-        renderActions={this.renderCustomActions}
-        renderBubble={this.renderBubble}
-        renderSystemMessage={this.renderSystemMessage}
-        renderCustomView={this.renderCustomView}
-        renderFooter={this.renderFooter}
-      />
-    );
-  }
+  _loadResourcesAsync = async () => {
+    return Promise.all([
+      Asset.loadAsync([
+        require('./assets/images/robot-dev.png'),
+        require('./assets/images/robot-prod.png'),
+      ]),
+      Font.loadAsync({
+        // This is the font that we are using for our tab bar
+        ...Icon.Ionicons.font,
+        // We include SpaceMono because we use it in HomeScreen.js. Feel free
+        // to remove this if you are not using it in your app
+        'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
+      }),
+    ]);
+  };
+
+  _handleLoadingError = error => {
+    // In this case, you might want to report the error to your error
+    // reporting service, for example Sentry
+    console.warn(error);
+  };
+
+  _handleFinishLoading = () => {
+    this.setState({ isLoadingComplete: true });
+  };
 }
 
 const styles = StyleSheet.create({
-  footerContainer: {
-    marginTop: 5,
-    marginLeft: 10,
-    marginRight: 10,
-    marginBottom: 10,
-  },
-  footerText: {
-    fontSize: 14,
-    color: '#aaa',
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
   },
 });
 
+

app.json

@@ -8,9 +8,9 @@
       "ios",
       "android"
     ],
-    "version": "1.0.0",
+    "version": "1.1.0",
     "orientation": "portrait",
-    "icon": "./assets/images/icon.png",
+    "icon": "./assets/images/english-aide-icon.png",
     "splash": {
       "image": "./assets/images/splash.png",
       "resizeMode": "contain",

components/TabBarIcon.js

@@ -10,7 +10,7 @@ export default class TabBarIcon extends React.Component {
         name={this.props.name}
         size={26}
         style={{ marginBottom: -3 }}
-        color={this.props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
+        color={"#ffff"}
       />
     );
   }

constants/Colors.js

@@ -4,7 +4,7 @@ export default {
   tintColor,
   tabIconDefault: '#ccc',
   tabIconSelected: tintColor,
-  tabBar: '#fefefe',
+  tabBar: '#0076be',
   errorBackground: 'red',
   errorText: '#fff',
   warningBackground: '#EAEB5E',