App.js

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

export default function App() {
  const [numA, setNumA] = useState(0);
  const [numB, setNumB] = useState(0);
  const [result, setResult] = useState(0);
  const [history, setHistory] = useState([]);

  const calcSum = () => {
    const sum = parseFloat(numA) + parseFloat(numB); 
    const historyCalc = "" + numA + " + " + numB + " = " + sum;
    setResult(sum);
    setHistory([...history, {key: historyCalc}]);
  }
  
  const calcSub = () => {
    const sub = parseFloat(numA) - parseFloat(numB);
    const historyCalc = "" + numA + " - " + numB + " = " + sub;
    setResult(sub);
    setHistory([...history, {key: historyCalc}]);
  }

  return (
    <View style={styles.container}>
    <View style={styles.container}>
      <Text style={{fontSize: 20}}>Result: {result.toFixed(2)}</Text>
      <TextInput 
        keyboardType="numeric" 
        style={{fontSize:18, width: 200, borderColor: 'gray', borderWidth: 1}}
        onChangeText={numA => setNumA(numA)}
        value={String(numA)}
      />
      <TextInput 
        keyboardType="numeric" 
        style={{fontSize: 18, width: 200, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(numB) => setNumB(numB)}
        value={String(numB)}
      />        
    </View>
    <View style={styles.buttoncontainer}>
      <Button onPress={calcSum} title=" + " />
      <Button onPress={calcSub} title=" - " />
    </View>
    <View style={styles.listcontainer}>
      <Text style={{fontSize: 18}}>History</Text>
      <FlatList 
        data={history} 
        renderItem={({item}) => <Text style={{fontSize: 18}}>{item.key}</Text>}
      />
    </View>  
  </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  buttoncontainer: {
    flex: 1,
    width: 150,
    flexDirection: 'row',
    backgroundColor: '#fff',
    alignItems: 'flex-start',
    justifyContent: 'space-around',
    padding: 20,
  },  
  listcontainer: {
    flex: 4,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 30,
  },    
});