import { 
  StyleSheet, 
  Text, 
  View, 
  TextInput, 
  Button
} from 'react-native';
import {useState} from 'react';

export default function App() {
  
  const [counter, setCounter] = useState(0);

  function increment() {
    setCounter(counter + 1)
  }
  return (
    <View style={styles.container}>
      <Text style={styles.elso}>Számláló</Text>
      
      <TextInput 
      style={styles.input}      
      value={counter}
      />

      <Button title='Számol' 
      onPress={increment} 
      />
      
      <Text style={styles.elso}>
        {counter}
      </Text>

      <Button title="Nulla" onPress={ () => setCounter(0)} />
    </View>

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#008',
    alignItems: 'center',
    justifyContent: 'center',    
  },
  elso: {
    color: '#fff',
    fontSize: 30,
  },
  input: {
    backgroundColor: 'lightblue',
    width: '90%',
    fontSize: 30,
  },
});