Add Android version, modify stylesheet and favorite feature

android/app/build.gradle

@@ -66,6 +66,7 @@ import com.android.build.OutputFile
  */
 
 apply from: "../../node_modules/react-native/react.gradle"
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
 
 /**
  * Set this to true to create two separate APKs instead of one:

android/app/src/main/AndroidManifest.xml

@@ -5,6 +5,7 @@
 
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 
     <uses-sdk
         android:minSdkVersion="16"
@@ -19,6 +20,7 @@
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"
+        android:screenOrientation="portrait"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />

app/GLOBAL.js

@@ -0,0 +1,8 @@
+module.exports = ({
+    primaryColor: '#3498db',
+    primaryDark: '#0f2d41',
+    smallIcon: 25,
+    mediumIcon: 30,
+    largeIcon: 40,
+    udfav: "urbandict_favorite",
+});

app/components/header/header.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import {  View, TouchableHighlight} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import styles from './styles';
+
+export default class header extends Component {  
+
+    state = {
+        iconColor:'#9B9B9B',
+        iconSize:30, 
+        outerIconColor:'white',
+    };
+    render() {
+        return (
+            <View style={styles.container}> 
+                <TouchableHighlight underlayColor={this.state.outerIconColor} style={styles.outerIcon} onPress={this.props.onMenuPress}>
+                    <View style={styles.Icon}>
+                        <Icon name="menu" color={this.state.iconColor} size={this.state.iconSize}/>
+                    </View>
+                </TouchableHighlight>  
+                <TouchableHighlight underlayColor='white' style={styles.outerIcon} onPress={this.props.onMenuPress}>
+                    <View style={styles.Icon}>
+                        <Icon name="search" color={this.state.iconColor} size={this.state.iconSize}/>
+                    </View>
+                </TouchableHighlight>  
+            </View>
+         );
+    }
+}

app/components/header/styles.js

@@ -0,0 +1,25 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+    container: {
+        flex: 1,
+        marginHorizontal:10,
+        marginTop:20,
+        flexDirection:'row',
+        justifyContent:'space-between',
+        backgroundColor:'white',
+        height: 64,
+
+    },
+   outerIcon: {
+      padding:10, 
+      backgroundColor:'white', 
+      height:40
+   },
+
+   icon: {
+      flexDirection:'row', 
+      alignItems:'center', 
+      justifyContent:'center'
+   }
+});

app/components/mainscene/mainScene.js

@@ -0,0 +1,142 @@
+import React, { Component } from 'react';
+import { StyleSheet, View, TouchableOpacity, Dimensions, StatusBar, Image, Text, Button, Modal } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import Feed from './../words/words'
+import Header from'./../header/header';
+import Search from './../search/search';
+import Menu from './../menu/menu';
+import NoConnection from './../noInternet';
+import styles from './styles';
+import GLOBAL from '../../../app/GLOBAL';
+
+const {width, height} = Dimensions.get('window')
+
+export default class mainScene extends Component { 
+
+    state = {
+        modalVisible: false,
+        isNetworkConnected: false,
+        underlayColor:'white',
+    }
+
+    componentDidMount(){
+        this.setState({
+            menuIsVisible:false,
+        })
+    }
+
+    setMenuVisible(visible) {
+        this.setState({menuIsVisible: visible})
+    }
+
+    onMenuPress() {
+        this.setMenuVisible(!this.state.menuIsVisible)
+    }
+
+    onSearchPress(){
+        this.setMenuVisible(false)
+        this.props.navigator.push({
+            title: 'Search'
+        })
+
+    }
+    onButtonPress(){
+        this.props.navigator.push({
+            title: 'Search'
+        })
+    }
+    onRandomPress() {
+        this.setMenuVisible(false)
+            this.props.navigator.push({
+                title:'Random'
+            })
+    }
+    onTrendingPressed(word){
+        this.props.navigator.push({
+            title: 'WoTD',
+            search: word
+        })
+    }
+    onFavoritePressed(){
+        this.setMenuVisible(false)
+        this.props.navigator.push({
+            title: 'Favorites'
+        })
+    }
+    onMenuWoTDPressed(){
+        this.setMenuVisible(false)
+        this.props.navigator.push({
+            title:'WoTD_2'
+        })
+    }
+
+    header(){
+        return(
+            <View style={styles.header}> 
+                <TouchableOpacity underlayColor={this.state.underlayColor} 
+                                  style={styles.outerIcon} onPress={() => this.onMenuPress()}>
+                    <View style={styles.iconView}>
+                        <Icon name="menu" color={GLOBAL.primaryColor} size={GLOBAL.mediumIcon}/>
+                    </View>
+                </TouchableOpacity>  
+                <TouchableOpacity underlayColor={this.state.underlayColor} 
+                                  style={styles.outerIcon} onPress={() => this.onSearchPress()}>
+                    <View style={styles.iconView}>
+                        <Icon name="search" color={GLOBAL.primaryColor} size={GLOBAL.mediumIcon}/>
+                    </View>
+                </TouchableOpacity>  
+            </View>
+        );
+    }
+
+    logo() {
+        return(
+            <View style={styles.logoContainer}> 
+                <Image style={styles.logo} source={require('../../resources/IconLarge.png')} resizeMode='cover'/>
+            </View>
+        );
+    }
+
+    buttonGroup(){
+        return(
+            <View style={styles.buttonGroups}>
+                <TouchableOpacity  activeOpacity={0.6} underlayColor='rgba(0,0,0,0.001)' 
+                                   style={styles.feelingLucky} 
+                                   onPress={() => this.onRandomPress()}>
+                    <View style={styles.iconView}>
+                        <Icon name="shuffle" color='rgba(149, 165, 166,1.0)' size={GLOBAL.largeIcon}/>
+                        <Text style={styles.buttonTitle}> I'm Feeling Lucky </Text>
+                    </View>
+                </TouchableOpacity> 
+            </View>
+        );
+    }
+
+    onRequestClose() {
+
+    }
+    render() {
+        return (
+            <View style={ styles.container }>  
+                <StatusBar backgroundColor={GLOBAL.primaryDark} barStyle="default" />
+                <Modal 
+                    animationType={'fade'}
+                    transparent={true}
+                    visible={this.state.menuIsVisible}
+                    onRequestClose={this.onRequestClose}
+                > 
+                <Menu toggleMenu={() => this.setMenuVisible(!this.state.menuIsVisible)}
+                    wordOfTheDay={() => this.onMenuWoTDPressed()}
+                    onFavorite={()=> this.onFavoritePressed()}
+                    onSearch={() => this.onSearchPress()}
+                    onFeelingLucky={() => this.onRandomPress()}
+                        />
+                </Modal>
+                {this.header()}
+                {this.logo()}
+                {this.buttonGroup()}
+            </View>
+        ); 
+    }
+}
+

app/components/mainscene/styles.js

@@ -0,0 +1,66 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+   container: {
+      flex: 1,
+      flexDirection: 'column',
+   },
+   header: {
+      marginHorizontal: 10,
+      marginTop: 20,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      backgroundColor: 'white',
+   },
+   logo: {
+      width: 200,
+      height:100,
+      alignItems: 'center'
+   },
+   logoContainer: {
+      alignItems: 'center',
+      marginTop: 100,
+   },
+   feelingLucky: {
+      padding: 10,
+      margin: 20,
+      alignItems: 'center',
+      backgroundColor: 'rgba(0,0,0,0.04)',
+      height: 50,
+      borderRadius: 4,
+      marginTop: 44,
+   },
+   buttonTitle: {
+      fontSize: 21,
+      fontWeight: '200',
+      fontFamily: 'Arial Rounded MT Bold',
+      textAlign: 'center',
+      color: 'rgba(149, 165, 166,1.0)',
+   },
+   latestTitle: {
+      fontSize: 21,
+      fontWeight: '300',
+      textAlign: 'center',
+      color: '#34495E',
+      marginTop: 50,
+      marginBottom: 20
+   },
+   latestRowItems: {
+      fontSize: 21,
+      fontWeight: '300',
+      textAlign: 'center',
+      color: '#3498db',
+      margin: 10,
+
+   },
+   outerIcon: {
+      padding: 10,
+      backgroundColor: 'white',
+      height: 40
+   },
+   iconView: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+   }
+});

app/components/menu/menu.js

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import { StyleSheet, View , TouchableOpacity, Text} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import styles from './styles';
+
+export default class menu extends Component { 
+    state = {
+        activeOpacity: 0.6,
+        underlayColor:'rgba(0,0,0,0.001)',
+    }
+    render() {
+        return (
+             <View style={styles.container}>
+                <TouchableOpacity  activeOpacity={this.state.activeOpacity} underlayColor={this.state.underlayColor} style={styles.closeButton} onPress={this.props.toggleMenu}>
+                    <View style={styles.iconView}>
+                        <Icon name="close" color='white' size={44}/>
+                    </View>
+                </TouchableOpacity> 
+
+                <View style={styles.innerContainer}>
+
+                <TouchableOpacity  activeOpacity={this.state.activeOpacity} underlayColor={this.state.underlayColor} style={styles.menuButton} onPress={this.props.wordOfTheDay}>
+                    <View style={styles.iconView}>
+                        <Icon name="trending-up" color='white' size={30}/>
+                        <Text style={styles.buttonTitle}> Word of the Day </Text>
+                    </View>
+                </TouchableOpacity> 
+                <TouchableOpacity  activeOpacity={this.state.activeOpacity} underlayColor={this.state.underlayColor} style={styles.menuButton} onPress={this.props.onFeelingLucky}>
+                    <View style={styles.iconView}>
+                        <Icon name="shuffle" color='white' size={30}/>
+                        <Text style={styles.buttonTitle}> I'm Feeling Lucky </Text>
+                    </View>
+                </TouchableOpacity> 
+                 <TouchableOpacity  activeOpacity={this.state.activeOpacity} underlayColor={this.state.underlayColor} style={styles.menuButton} onPress={this.props.onFavorite}>
+                    <View style={styles.iconView}>
+                        <Icon name="favorite" color='white' size={30}/>
+                        <Text style={styles.buttonTitle}> Favorites</Text>
+                    </View>
+                </TouchableOpacity> 
+                <TouchableOpacity  activeOpacity={this.state.activeOpacity} underlayColor={this.state.underlayColor} style={styles.menuButton} onPress={this.props.onSearch}>
+                    <View style={styles.iconView}>
+                        <Icon name="search" color='white' size={30}/>
+                        <Text style={styles.buttonTitle}> Search </Text>
+                    </View>
+                </TouchableOpacity> 
+
+                <View style={styles.iconView}>
+                    <View style={styles.separator}></View>
+                </View>
+                <TouchableOpacity  activeOpacity={this.state.activeOpacity} underlayColor={this.state.underlayColor} style={styles.menuButton} onPress={this.props.onTrending}>
+                    <View style={styles.iconView}>
+                        <Icon name="star" color='white' size={25}/>
+                        <Text style={styles.secondaryButtonTitle}> Rate Us </Text>
+                    </View>
+                </TouchableOpacity> 
+                <TouchableOpacity  activeOpacity={this.state.activeOpacity} underlayColor={this.state.underlayColor} style={styles.secondaryMenuButton} onPress={this.props.onTrending}>
+                    <View style={styles.iconView}>
+                        <Icon name="question-answer" color='white' size={25}/>
+                        <Text style={styles.secondaryButtonTitle}> Feedback </Text>
+                    </View>
+                </TouchableOpacity> 
+
+                </View>
+
+            </View>
+
+         );
+    }
+}
+