import React, { Component } from 'react'
import {
  StyleSheet,
  TouchableOpacity,
  Text,
  View,
  TouchableWithoutFeedback,
} from 'react-native'

class App extends Component {
  state = {
    count: 0,
    count2: 0,
    count3:0
  }
  onPressup = () => {
    this.setState({
      count: this.state.count + 1,
      count3:this.state.count3 +1
    })
  }
  onPressupdown = () => {
    this.setState({
      count2: this.state.count2 + 1,
      count3:this.state.count3-1
    })
  }

 render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={styles.button3}
        >
          <Text style={styles.skor}>{this.state.count3}</Text>
        </TouchableOpacity>
      <TouchableOpacity
        style={styles.button}
        onPress={this.onPressup}
      >
          <Text style={styles.texts}>Arttır</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.button2}
          onPress={this.onPressupdown}
        >
          <Text style={styles.texts}>Azalt</Text>
        </TouchableOpacity>
        <View>
          <Text style={styles.texts}>
            Arttırma Butonuna  {this.state.count} kez tıkladın.
          </Text>
          <Text style={styles.texts}>
            Azaltma Butonuna {this.state.count2} kez tıkladın.
          </Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 15,
    marginBottom: 10
  },
  button2: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 15,
    marginBottom: 10
  },
  button3: {
    alignItems: 'center',
    backgroundColor: '#A020f0',
    padding: 50,
    marginBottom: 10
  },
  skor:{
fontWeight:'bold',
fontSize:30,
color:'#FFFFFF'
  },
  texts:{
    fontWeight:'bold',
fontSize:15,
  }
})

export default App;