From b03f301aa5b067a1ce4b94e2f414b929dea39864 Mon Sep 17 00:00:00 2001 From: Arjun Patel Date: Sat, 21 Apr 2018 15:18:34 -0700 Subject: [PATCH] basic layout of main page - consists of the navbar, chat, and adspace components --- app/App.js | 6 ++-- app/screens/home.js | 12 +------- app/screens/loading.js | 10 +++---- app/screens/main.js | 60 +++++++++++++++++++++++++++++++++++++ app/screens/main/adspace.js | 29 ++++++++++++++++++ app/screens/main/chat.js | 29 ++++++++++++++++++ app/screens/main/navbar.js | 30 +++++++++++++++++++ 7 files changed, 156 insertions(+), 20 deletions(-) create mode 100644 app/screens/main.js create mode 100644 app/screens/main/adspace.js create mode 100644 app/screens/main/chat.js create mode 100644 app/screens/main/navbar.js diff --git a/app/App.js b/app/App.js index 3c38788..fc9e962 100644 --- a/app/App.js +++ b/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 { render() { @@ -26,9 +26,7 @@ export default class App extends Component { - {/* - - */} + ); diff --git a/app/screens/home.js b/app/screens/home.js index 54ba104..6b31191 100644 --- a/app/screens/home.js +++ b/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 { - componentDidMount() { - console.log('mounted'); - AsyncStorage.getItem('longitude').then((lon) => { - console.log(lon); - }); - AsyncStorage.getItem('latitude').then((lat) => { - console.log(lat); - }); - } - connect() { Actions.loading(); } diff --git a/app/screens/loading.js b/app/screens/loading.js index edc88ab..5685539 100644 --- a/app/screens/loading.js +++ b/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 { 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 { render() { return ( - + Please wait to be connected... © Nexto diff --git a/app/screens/main.js b/app/screens/main.js new file mode 100644 index 0000000..f4d92f6 --- /dev/null +++ b/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 { + render() { + console.log('in Main'); + + return ( + + + + + + + + + + + + ); + } +} + +const styles = { + container: { + flex: 18, + flexDirection: 'column', + justifyContent: 'space-between' + }, + navbar: { + flex: 2 + }, + chat: { + flex: 15, + backgroundColor: 'white' + }, + adspace: { + flex: 1 + } +} diff --git a/app/screens/main/adspace.js b/app/screens/main/adspace.js new file mode 100644 index 0000000..1a0d2b9 --- /dev/null +++ b/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 { + render() { + return ( + + adspace + + ); + } +} + +const styles = { +} diff --git a/app/screens/main/chat.js b/app/screens/main/chat.js new file mode 100644 index 0000000..b388636 --- /dev/null +++ b/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 { + render() { + return ( + + chat + + ); + } +} + +const styles = { +} diff --git a/app/screens/main/navbar.js b/app/screens/main/navbar.js new file mode 100644 index 0000000..2529e44 --- /dev/null +++ b/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 { + render() { + return ( + + navbar + + ); + } +} + +const styles = { + +}