text: import React from 'react';
  import {
    AsyncStorage,
    Image,
    Platform,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    Button,
  } from 'react-native';
  import { WebBrowser } from 'expo';
  
  import { MonoText } from '../components/StyledText';
  
  export default class HomeScreen extends React.Component {
    static navigationOptions = {
      header: null,
    };
  
  
    render() {
      return (
        <View style={styles.container}>
          <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
            <View style={styles.welcomeContainer}>
  
            <View style={{margin:40}} />
  
              <Image
  
  
  
                source={
                  __DEV__
                    ? require('../assets/images/perritoo.png')
                    : require('../assets/images/robot-prod.png')
                }
                style={{width:200,height:200}}
              />
            </View>
  
            <View style={styles.getStartedContainer}>
              {this._maybeRenderDevelopmentModeWarning()}
  
            </View>
  
              <View style={{margin:60}} />
  
              <Button
                onPress={() => this.props.navigation.navigate('Play')}
                title="Jugar"
                color="#5bf1e1"
              />
  
              <View style={{margin:20}} />
              <Button
                onPress={() => this.props.navigation.navigate('Statistic')}
                title="Estadisticas"
                color="#a4f590"
              />
  
              <View style={{margin:20}} />
              <Button onPress={() => this.props.navigation.navigate('Auth')}
               title="Salir"
               color ="#d35400"
               />
  
  
  
  
          </ScrollView>
  
          <View style={styles.tabBarInfoContainer}>
            <Text style={styles.tabBarInfoText}>Bienvenido.</Text>
  
            <View style={[styles.codeHighlightContainer, styles.navigationFilename]}>
  
          </View>
          </View>
        </View>
      );
    }
  
    onPressCategoryButton = (category) => {
      alert(category);
    }
  
    _handleLogout = async () => {
      await AsyncStorage.clear();
      this.props.navigation.navigate('Auth');
    };
  
    _maybeRenderDevelopmentModeWarning() {
      if (__DEV__) {
        const learnMoreButton = (
          <Text onPress={this._handleLearnMorePress} style={styles.helpLinkText}>
            Learn more
          </Text>
        );
      } else {
        return (
          <Text style={styles.developmentModeText}>
            You are not in development mode, your app will run at full speed.
          </Text>
        );
      }
    }
  
    _handleLearnMorePress = () => {
      WebBrowser.openBrowserAsync('https://docs.expo.io/versions/latest/guides/development-mode');
    };
  
    _handleHelpPress = () => {
      WebBrowser.openBrowserAsync(
        'https://docs.expo.io/versions/latest/guides/up-and-running.html#can-t-see-your-changes'
      );
    };
  }
  
  const styles = StyleSheet.create({
  
    container: {
      flex: 1,
      backgroundColor: '#1b4f72',
    },
    developmentModeText: {
      marginBottom: 20,
      color: 'rgba(0,0,0,0.4)',
      fontSize: 14,
      lineHeight: 19,
      textAlign: 'center',
    },
  
    contentContainer: {
      paddingTop: 30,
    },
    welcomeContainer: {
      alignItems: 'center',
      marginTop: 10,
      marginBottom: 20,
    },
    welcomeImage: {
      width: 100,
      height: 80,
      resizeMode: 'contain',
      marginTop: 3,
      marginLeft: -10,
    },
    getStartedContainer: {
      alignItems: 'center',
      marginHorizontal: 50,
    },
    homeScreenFilename: {
      marginVertical: 7,
    },
    codeHighlightText: {
      color: 'rgba(96,100,109, 0.8)',
    },
    codeHighlightContainer: {
      backgroundColor: '#1b4f72',
      borderRadius: 3,
      paddingHorizontal: 4,
    },
    getStartedText: {
      fontSize: 17,
      color: 'rgba(96,100,109, 1)',
      lineHeight: 24,
      textAlign: 'center',
    },
    tabBarInfoContainer: {
      position: 'absolute',
  
      bottom: 0,
      left: 0,
      right: 0,
      ...Platform.select({
        ios: {
          shadowColor: 'black',
          shadowOffset: { height: -3 },
          shadowOpacity: 0.1,
          shadowRadius: 3,
        },
        android: {
          elevation: 20,
        },
      }),
      alignItems: 'center',
      backgroundColor: '#1b4f72',
      paddingVertical: 20,
    },
    tabBarInfoText: {
      fontSize: 17,
      color: '#FFFFFF',
      textAlign: 'center',
    },
    navigationFilename: {
      marginTop: 5,
    },
    helpContainer: {
      marginTop: 15,
      alignItems: 'center',
    },
    helpLink: {
      paddingVertical: 15,
    },
    helpLinkText: {
      fontSize: 14,
      color: '#2e78b7',
    },
    logout: {
      fontSize: 14,
      color: '#2e78b7',
      textAlign: 'center',
    },
  });
  