import React, { Component } from 'react';
import { AppRegistry, Text, View, TouchableHighlight, StyleSheet, Image } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
        state = {
        Login: 'Login'
        SignUp: 'SignUp'


    }

    newState = () => {
        this.setState ({
            Login: 'Woohoo, you logged in'

        })
    }
    newState2 = () => {
        this.setState ({
            SignUp: 'Yay you signed up'

        })
    }
    render() {
        return (
            <View style={styles.container}>

                <View style={styles.yellowBox}>

                    <Image
                        source={{ uri: 'https://codehs.com/uploads/c799accde67e1fd3bbd699119b4e1c83' }}
                        style={{ height: 50, width: 50 }}
                    />
                </View>

                <View style={styles.redBox}>
                    <TouchableHighlight
                        onPress = {this.newState}


                    >
                    <Text style={styles.paragraph}>
                        {this.state.Login}
                    </Text>
                    </TouchableHighlight>



                </View>
                <View style={styles.blueBox}>
                    <TouchableHighlight
                        onPress = {this.newState2}


                    >
                    <Text style={styles.paragraph}>
                        {this.state.SignUp}
                    </Text>
                    </TouchableHighlight>


                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    yellowBox: {
        flex: 7,
        backgroundColor: 'yellow',
        justifyContent: 'center',
        alignItems: 'center',
    },
    redBox: {
        flex: 1,
        backgroundColor: 'red',
        justifyContent: 'center',
        alignItems: 'center',
        color: 'white',
    },
    blueBox: {
        flex: 1,
        backgroundColor: 'blue',
        justifyContent: 'center',
        alignItems: 'center',
        color: 'white',
    },
});