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

export default function App() {
  const [base, setBase] = React.useState('');
  const [height, setHeight] = React.useState('');
  const [area, setArea] = React.useState('');

  const handleSubmit = () => {    
    let result = base*height/2;
    setArea(result);
  }

  return (
    <View style={styles.container}>      
      
      <Text style={styles.head}>Háromszög területe</Text>
      <Text>Alap:</Text>      
      <TextInput 
      style={styles.input}
      placeholder='Alap'
      onChangeText={(base) => setBase(base)}      
      />

      <Text>Magasság:</Text>      
      <TextInput 
      style={styles.input}
      placeholder='Magasság'
      onChangeText={(height) => setHeight(height)}      
      />

      <Text style={styles.area}>Terület: {area}</Text>

      <Button 
        title='Számít' 
        onPress={handleSubmit}
        />
      
    </View>
  );
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: '#777',
    padding: 8,
    margin: 10, 
    width: 200,
  },
  area: {
    margin: 20,
  },
  head: {
    margin: 20,
    fontSize: 34,
  }
});