React Native (Calculator Version 4)

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

Calculator = () =>
{
  const [firstNumber, setFirstNumber] = useState("");
  const [operation, setOperation] = useState(null);
  const [result, setResult] = useState(0);
  const [initialState, setInitialState] = useState(true);
  const [textField, setTextField] = useState(0);

  function onNumberPress(buttonValue)
  {
    if( (operation == null) && (initialState == false))
    {
      setResult(0);
      setInitialState(true);
    }

    setFirstNumber(firstNumber + buttonValue);
    setTextField(firstNumber + buttonValue);
  }

  function onOperatorPress(buttonValue)
  {
    switch(buttonValue)
    {
      case "+":
        setOperation("+");
        break;

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

      default:
        break;
    }

    if(initialState == true)
    {
      if(firstNumber != "")
      {
        setInitialState(false);
        setResult(parseInt(firstNumber));
        setFirstNumber("");
      }
    }
    else if(initialState == false)
    {

      if( (firstNumber != "") )
      {
        switch(operation)
        {
          case "+":
            setResult(parseInt(result) + parseInt(firstNumber));
            setTextField(parseInt(result) + parseInt(firstNumber));
            break;

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

          default:
            break;
        }
        setFirstNumber("");
        console.log("Calculation performed!");
      }
    }
  }

  function onEqualsPress()
  {
    if( (initialState == false) && (firstNumber != "") )
    {

      switch(operation)
      {
        case "+":
          setResult(parseInt(result) + parseInt(firstNumber));
          setTextField(parseInt(result) + parseInt(firstNumber));
          break;

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

        default:
          break;
      }

      setFirstNumber("");
      setOperation(null);
    }
  }

  function onClearPress()
  {
    setFirstNumber("");
    setTextField(0);
    setResult(null);
    setOperation(null);
    setInitialState(true);
  }

  // Write status to console to keep track of values
  console.log("firstNumber: " + firstNumber);
  console.log("operation: " + operation);
  console.log("result: " + result);
  console.log("---------------------------")

  // Render all of the UI of Calculator ------------
  return(
    <View style={{
      flexDirection: "column",
      flex: 1,
      backgroundColor: "black"
    }}>

      <View style={{
        flexDirection: "row",
        flex: 1,
        height: "60%",
      }}>
        <Text style={{
          color: "#fff",
          fontSize: 50
        }}>{textField}</Text>
      </View>

      <View style={{
        flexDirection: "row",
        flex: 1,
        flexWrap: "wrap",
        height: "40%",
        backgroundColor: "orange"
      }}>

        <TouchableHighlight style={styles.button} onPress={() => onNumberPress("7")}>
          <Text style={{
            color: "#fff",
            fontSize: 50,
            textAlign: "center"
            }}>7</Text>
        </TouchableHighlight>

        <TouchableHighlight style={styles.button} onPress={() => onNumberPress("8")}>
          <Text style={{
            color: "#fff",
            fontSize: 50,
            textAlign: "center"
            }}>8</Text>
        </TouchableHighlight>

        <TouchableHighlight style={styles.button} onPress={() => onNumberPress("9")}>
          <Text style={{
            color: "#fff",
            fontSize: 50,
            textAlign: "center"
            }}>9</Text>
        </TouchableHighlight>

        <TouchableHighlight style={styles.button} onPress={() => onOperatorPress("-")}>
          <Text style={{
            color: "#fff",
            fontSize: 50,
            textAlign: "center"
            }}>-</Text>
        </TouchableHighlight>

        <TouchableHighlight style={styles.button} onPress={() => onNumberPress("4")}>
          <Text style={{
            color: "#fff",
            fontSize: 50,
            textAlign: "center"
            }}>4</Text>
        </TouchableHighlight>

        <TouchableHighlight style={styles.button} onPress={() => onNumberPress("5")}>
          <Text style={{
            color: "#fff",
            fontSize: 50,
            textAlign: "center"
            }}>5</Text>
        </TouchableHighlight>

        <TouchableHighlight style={styles.button} onPress={() => onNumberPress("6")}>
          <Text style={{
            color: "#fff",
            fontSize: 50,
            textAlign: "center"
            }}>6</Text>
        </TouchableHighlight>

        <TouchableHighlight style={styles.button} onPress={() => onOperatorPress("+")}>
          <Text style={{
            color: "#fff",
            fontSize: 50,
            textAlign: "center"
            }}>+</Text>
        </TouchableHighlight>

        <TouchableHighlight style={styles.button} onPress={() => onNumberPress("1")}>
          <Text style={{
            color: "#fff",
            fontSize: 50,
            textAlign: "center"
            }}>1</Text>
        </TouchableHighlight>

        <TouchableHighlight style={styles.button} onPress={() => onNumberPress("2")}>
          <Text style={{
            color: "#fff",
            fontSize: 50,
            textAlign: "center"
            }}>2</Text>
        </TouchableHighlight>

        <TouchableHighlight style={styles.button} onPress={() => onNumberPress("3")}>
          <Text style={{
            color: "#fff",
            fontSize: 50,
            textAlign: "center"
            }}>3</Text>
        </TouchableHighlight>

        <TouchableHighlight style={styles.button} onPress={() => onEqualsPress()}>
          <Text style={{
            color: "#fff",
            fontSize: 50,
            textAlign: "center"
            }}>=</Text>
        </TouchableHighlight>

        <TouchableHighlight style={styles.button} onPress={() => onNumberPress("0")}>
          <Text style={{
            color: "#fff",
            fontSize: 50,
            textAlign: "center"
            }}>0</Text>
        </TouchableHighlight>

        <TouchableHighlight style={styles.button} onPress={() => onClearPress()}>
          <Text style={{
            color: "#fff",
            fontSize: 50,
            textAlign: "center"
            }}>C</Text>
        </TouchableHighlight>

      </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',
  },
  button:  {
    width: "25%",
    backgroundColor: "green",
  }
});