React Native (Calculator Version 2)

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, SafeAreaView, TouchableHighlight, TouchableOpacity, Button } from 'react-native';
import React, { useState, useContext } from 'react';

const calculatorEssentials =
{
  buttonValues: [["7", "8", "9", "-"], ["4", "5", "6", "+"], ["1", "2", "3", "="], ["0", "C", "x", "x"]],
  initialValue: true
}

var counter = 1;

Calculator = () =>
{
  const [firstNumber, setFirstNumber] = useState("");
  const [secondNumber, setSecondNumber] = useState("");
  const [result, setResult] = useState(null);
  const [operation, setOperation] = useState(null);
  const [resultCounter, setResultCounter] = useState(0);
  const [lastPressed, setLastPressed] = useState(null);
  const [textField, setTextField] = useState("");

  function handleNumberPress(buttonValue)
  {
    setFirstNumber(firstNumber + buttonValue);
    setTextField(firstNumber + buttonValue);
    setLastPressed("numberButton");
  }

  function handleOperationPress(operator)
  {
    console.log(operator);
    setOperation(operator);
    if(operator != "=")
    {

      if(operation == null)
      {
        setResult(parseInt(firstNumber));
        setFirstNumber("");
        setOperation(operator);
      }
      else if( (operation == "+") || (operation == "-"))
      {
        if(lastPressed != "operationButton")
        {
          switch(operation)
          {
            case "+":
              setResult(result + parseInt(firstNumber));
              setTextField(result + parseInt(firstNumber));
              setFirstNumber("");
              break;

            case "-":
              setResult(result - parseInt(firstNumber));
              setTextField(result - parseInt(firstNumber));
              setFirstNumber("");
              break;

            default:
              break;
          }
        }
      }
    }
    else if(operator == "=")
    {
      console.log("equal thing executed");
      if(operation == "+")
      {
        setResult(result + parseInt(firstNumber));
        setTextField(result + parseInt(firstNumber));
        setFirstNumber("");
      }
      else if(operation == "-")
      {
        setResult(result - parseInt(firstNumber));
        setTextField(result - parseInt(firstNumber));
        setFirstNumber("");
      }
    }

    setLastPressed("operationButton");
  }

  function handleEqualsPress()
  {
    setOperation(null);
    setFirstNumber("");
    setSecondNumber("");
  }

  function handleClearPress()
  {
    setTextField("");
  }

  // Need to be solved: make it so that after a calculation is performed with firstNumber with secondNumber update the result
  function calculateLogic(buttonValue)
  {
    switch(buttonValue)
    {
      case "+":
        handleOperationPress("+");
        break;

      case "-":
        handleOperationPress("-");
        break;

      case "=":
        handleOperationPress("=");

      case "C":
        handleClearPress();
        break;

      default:
        handleNumberPress(buttonValue);
        break;
    }
  }
  console.log(counter + " render");
  console.log("First Number: " + firstNumber);
  console.log("Second Number: " + secondNumber);
  console.log("Operation: " + operation);
  console.log("Result: " + result);
  console.log("ResultCounter: " + resultCounter);
  console.log("--------------------------------------");


  // Create the buttons UI
  var buttonRows = [];
  buttonRows = calculatorEssentials.buttonValues.map((buttonRow, buttonRowIndex) => {

    buttonRowItems = buttonRow.map((buttonItem, buttonRowItemsIndex) => {

      return(
        <TouchableHighlight onPress={() => calculateLogic(buttonItem)} style={{
          flex: 1,
          borderWidth: 5,
          backgroundColor: "red",
          padding: 7,
          justifyContent: "center",
          alignItems: "center",
          borderRadius: 50
        }}>

          <Text style={{
            color: "#fff",
            fontSize: 55,
            textAlign: "center",
            aspectRatio: 1, // This will make the child element a square
          }}>
            {buttonItem}
          </Text>

        </TouchableHighlight>
      );
    });

    return(
      <View style={{flexDirection: "row", width: "100%", justifyContent: "space-around",}}>
        {buttonRowItems}
      </View>
    );
  });

  counter++;
  // Return the whole calculator (unnecessary rerenders probably occurs (an issue you have to take a look at later))
  return(
    <View style={{
      flexDirection: "column",
      flex: 1,
      backgroundColor: "black"
    }}>

      <View style={{
        flex: 1,
        backgroundColor: "gray"
      }}>
        <Text style={{
          fontSize: 50,
          color: "black"
        }}>
          {textField}
        </Text>
      </View>

      <View style={{
        flexDirection: "column",
        flex: 1
      }}>
        {buttonRows}
      </View>

    </View>
  );
}

// IN APP WE EXECUTE THE APP (ABOVE IS THE LOGIC AND REST OF SOURCE CODE)------------------------------------

export default function App() {
  console.log("------------------------------------------");
  return (
    <SafeAreaView style={styles.container}>

      <Calculator></Calculator>

      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});