React Native (Calculator Version 1)

import React, { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button, Alert, TextInput, SafeAreaView, flexDirection, TouchableOpacity, borderCurve, Dimensions } from 'react-native';


export default function App() {

  console.log(Dimensions.get("window"));
  const onPressButton = (buttonItem) => // When user presses a number button
  {
    if(((buttonItem == "+") || (buttonItem == "-")))
    {

      if(buttonItem == "+")
      {
        setLastPressedButton("plus");
      }
      else if(buttonItem == "-")
      {
        setLastPressedButton("minus");
      }

      if(lastPressedButton == "plus")
      {
        setResult(result + parseInt(textField));
        setTextField(result + parseInt(textField));
      }
      else if(lastPressedButton == "minus")
      {
        if(result == 0)
        {
          setResult(parseInt(textField))
          setTextField(parseInt(textField));
        }
        else
        {
          setResult(result - parseInt(textField));
          setTextField(result - parseInt(textField));
        }
      }
      else
      {
        if(buttonItem == "+")
        {
          setLastPressedButton("plus");
        }
        else if(buttonItem == "-")
        {
          setLastPressedButton("minus");
        }

      }

      setClear(0);
    }
    else if(buttonItem == "=")
    {
      if(lastPressedButton == "plus")
      {
        setResult(result + parseInt(textField));
        setTextField(result + parseInt(textField));
      }
      else if(lastPressedButton == "minus")
      {
        if(result == 0)
        {
          setResult(parseInt(textField))
          setTextField(parseInt(textField));
        }
        else
        {
          setResult(result - parseInt(textField));
          setTextField(result - parseInt(textField));
        }
      }

      setClear(0);
      setResult(0);
    }
    else if(buttonItem == "c")
    {
      setTextField("");
      setResult(0);
    }
    else
    {
      clear ? setTextField(textField + buttonItem) : setTextField(buttonItem);
      setClear(1);
    }
  }

  const [result, setResult] = useState(0);
  const [textField, setTextField] = useState("");
  const [lastPressedButton, setLastPressedButton] = useState("plus")
  const [clear, setClear] = useState(1);

  console.log("result: " + result);
  console.log("operator: " + lastPressedButton);

  return (
    <SafeAreaView style = {styles.container}>

      <View style = {
        {
          backgroundColor: "lightgray",
          flex: 1
        }}>

        <Text style = {{fontSize: 70}}>{textField}</Text>

      </View>

      <View style = {styles.buttonViewDesign}>

        <TouchableOpacity
          style={styles.buttonDesign}
          onPress={() => onPressButton("1")}
        >

          <Text style = {styles.buttonTextDesign}>1</Text>

        </TouchableOpacity>

        <TouchableOpacity
          style={styles.buttonDesign}
          onPress={() => onPressButton("2")}
        >

          <Text style = {styles.buttonTextDesign}>2</Text>

        </TouchableOpacity>

        <TouchableOpacity
          style={styles.buttonDesign}
          onPress={() => onPressButton("3")}
        >

          <Text style = {styles.buttonTextDesign}>3</Text>

        </TouchableOpacity>

        <TouchableOpacity
          style={styles.buttonDesign}
          onPress={() => onPressButton("-")}
        >

          <Text style = {styles.buttonTextDesign}>-</Text>

        </TouchableOpacity>

        <TouchableOpacity
          style={styles.buttonDesign}
          onPress={() => onPressButton("4")}
        >

          <Text style = {styles.buttonTextDesign}>4</Text>

        </TouchableOpacity>

        <TouchableOpacity
          style={styles.buttonDesign}
          onPress={() => onPressButton("5")}
        >

          <Text style = {styles.buttonTextDesign}>5</Text>

        </TouchableOpacity>

        <TouchableOpacity
          style={styles.buttonDesign}
          onPress={() => onPressButton("6")}
        >

          <Text style = {styles.buttonTextDesign}>6</Text>

        </TouchableOpacity>

        <TouchableOpacity
          style={styles.buttonDesign}
          onPress={() => onPressButton("+")}
        >

          <Text style = {styles.buttonTextDesign}>+</Text>

        </TouchableOpacity>

        <TouchableOpacity
          style={styles.buttonDesign}
          onPress={() => onPressButton("7")}
        >

          <Text style = {styles.buttonTextDesign}>7</Text>

        </TouchableOpacity>

        <TouchableOpacity
          style={styles.buttonDesign}
          onPress={() => onPressButton("8")}
        >

          <Text style = {styles.buttonTextDesign}>8</Text>

        </TouchableOpacity>

        <TouchableOpacity
          style={styles.buttonDesign}
          onPress={() => onPressButton("9")}
        >

          <Text style = {styles.buttonTextDesign}>9</Text>

        </TouchableOpacity>

        <TouchableOpacity
          style={styles.buttonDesign}
          onPress={() => onPressButton("=")}
        >

          <Text style = {styles.buttonTextDesign}>=</Text>

        </TouchableOpacity>

        <TouchableOpacity
          style={styles.buttonDesign}
          onPress={() => onPressButton(0)}
        >

          <Text style = {styles.buttonTextDesign}>0</Text>

        </TouchableOpacity>

        <TouchableOpacity
          style={styles.buttonDesign}
          onPress={() => onPressButton("c")}
        >

          <Text style = {styles.buttonTextDesign}>C</Text>

        </TouchableOpacity>

        <StatusBar style="auto" />
      </View>

    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  buttonViewDesign: {
    backgroundColor: "black",
    flex: 1.5,
    flexDirection: "row", // main = horizontal axis, secondary = vertical axis
    flexWrap: "wrap",
    justifyContent: "flex-start", // main axis
    paddingHorizontal: "5%",
    paddingVertical: "5%"
  },
  buttonDesign: {
    backgroundColor: "yellow",
    justifyContent: "center",
    alignItems: "center",
    width: "25%",
    height: "25%",
  },
  buttonTextDesign: {
    fontSize: 40,
  },
  buttonZeroDesign: {
    backgroundColor: "tomato",
    width: "50%",
    height: "25%",
    justifyContent: "center",
    alignItems: "center",
  }
});