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

export default class App extends Component {
  constructor(props) {
    super(props);
  
    this.state = { roars: [] };
  }
  
  onPress = () => {
    let roars = [ ...this.state.roars ];
    roars.push(`${this.state.roars.length + 1} times dude!`)
    this.setState({ roars });
  }
  
  render() {
    return (
      <View style={styles.container}>
        <Image 
          source={{uri: "https://kentcdodds.com/photo.png"}}
          style={{width: 150, height: 150}}
        />
        <Button title="Dude man this is so cool!" onPress={this.onPress} />
        {this.state.roars.map(r => <Text style={styles.paragraph}>{r}</Text>)}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: 'purple',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: 'white',
  },
});