basic layout of main page

- consists of the navbar, chat, and adspace components

app/App.js

@@ -17,7 +17,7 @@ import {
 // Imported screens to route through
 import Home from './screens/home.js';
 import Loading from './screens/loading.js';
-
+import Main from './screens/main.js'
 type Props = {};
 export default class App extends Component<Props> {
   render() {
@@ -26,9 +26,7 @@ export default class App extends Component<Props> {
         <Stack key='root' style={{paddingTop: 54}}>
           <Scene key='home' component={Home} title="Home" hideNavBar={true} />
           <Scene key='loading' component={Loading} title='Loading' />
-          {/*
-          <Scene key='chat' component={Chat} title='Chat' hideNavBar={false} />
-          */}
+          <Scene key='main' component={Main} title='Main' hideNavBar={true} />
         </Stack>
       </Router>
     );

app/screens/home.js

@@ -3,9 +3,9 @@
  */
 import React, { Component } from 'react';
 import {
+  Dimensions,
   View,
   ImageBackground,
-  Dimensions,
   Text,
   TouchableOpacity,
   Permissions,
@@ -21,16 +21,6 @@ const backgroundLink = 'https://cdn.shopify.com/s/files/1/2567/6484/products/Pol
 
 type Props = {};
 export default class Home extends Component<Props> {
-  componentDidMount() {
-    console.log('mounted');
-    AsyncStorage.getItem('longitude').then((lon) => {
-      console.log(lon);
-    });
-    AsyncStorage.getItem('latitude').then((lat) => {
-      console.log(lat);
-    });
-  }
-
   connect() {
     Actions.loading();
   }

app/screens/loading.js

@@ -3,8 +3,8 @@
  */
 import React, { Component } from 'react';
 import {
-  View,
   Dimensions,
+  View,
   Image,
   Text,
   AsyncStorage
@@ -26,9 +26,9 @@ export default class Loading extends Component<Props> {
       this.latitude = parseFloat(position.coords.latitude);
       this.longitude = parseFloat(position.coords.longitude);
       console.log(String(this.latitude) + ' ' + String(this.longitude));
-      AsyncStorage.setItem('longitude', this.longitude);
-      AsyncStorage.setItem('latitude', this.latitude);
-      Actions.home();
+      //AsyncStorage.setItem('longitude', this.longitude);
+      //AsyncStorage.setItem('latitude', this.latitude);
+      Actions.main();
       },
       (error) => console.log(error),
       // high accuracy might need slight adjusting with its values
@@ -41,7 +41,7 @@ export default class Loading extends Component<Props> {
   render() {
     return (
       <View style={loadingStyles.container}>
-        <Image style={loadingStyles.gif} source={{ uri: 'http://www.playrosy.com/ourgames/vampiregirlmakeover/images/_preloader.gif' }} />
+        <Image style={loadingStyles.gif} source={{ uri: null }} />
         <Text style={loadingStyles.waitTxt}>Please wait to be connected...</Text>
         <View style={loadingStyles.copyright}>
           <Text style={loadingStyles.copyTxt}>&copy; Nexto</Text>

app/screens/main.js

@@ -0,0 +1,60 @@
+/*
+ * Main screen with top Navbar, chat scroll view,
+ * and Ad space components
+ */
+import React, { Component } from 'react';
+import {
+  Dimensions,
+  View,
+  Text
+} from 'react-native';
+import {
+  Actions
+} from 'react-native-router-flux';
+
+// imported components for different sections in main component
+import Navbar from './main/navbar.js';
+import Chat from './main/chat.js';
+import AdSpace from './main/adspace.js';
+
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+
+type Props = {};
+export default class Main extends Component<Props> {
+  render() {
+    console.log('in Main');
+
+    return (
+      <View style={styles.container}>
+        <View style={styles.navbar}>
+          <Navbar />
+        </View>
+        <View style={styles.chat}>
+          <Chat />
+        </View>
+        <View style={styles.adspace}>
+          <AdSpace />
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    flex: 18,
+    flexDirection: 'column',
+    justifyContent: 'space-between'
+  },
+  navbar: {
+    flex: 2
+  },
+  chat: {
+    flex: 15,
+    backgroundColor: 'white'
+  },
+  adspace: {
+    flex: 1
+  }
+}

app/screens/main/adspace.js

@@ -0,0 +1,29 @@
+/*
+ * AdSpace component within Main
+ */
+import React, { Component } from 'react';
+import {
+  Dimensions,
+  View,
+  Text,
+} from 'react-native';
+import {
+  Actions
+} from 'react-native-router-flux';
+
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+
+type Props = {};
+export default class AdSpace extends Component<Props> {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>adspace</Text>
+      </View>
+    );
+  }
+}
+
+const styles = {
+}

app/screens/main/chat.js

@@ -0,0 +1,29 @@
+/*
+ * Chat component within Main
+ */
+import React, { Component } from 'react';
+import {
+  Dimensions,
+  View,
+  Text,
+} from 'react-native';
+import {
+  Actions
+} from 'react-native-router-flux';
+
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+
+type Props = {};
+export default class Chat extends Component<Props> {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>chat</Text>
+      </View>
+    );
+  }
+}
+
+const styles = {
+}

app/screens/main/navbar.js

@@ -0,0 +1,30 @@
+/*
+ * Navbar component within Main
+ */
+import React, { Component } from 'react';
+import {
+  Dimensions,
+  View,
+  Text,
+} from 'react-native';
+import {
+  Actions
+} from 'react-native-router-flux';
+
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+
+type Props = {};
+export default class Navbar extends Component<Props> {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>navbar</Text>
+      </View>
+    );
+  }
+}
+
+const styles = {
+
+}