Witam, tworzę kalkulator w react native i napotkałem kilka trudności. Chciałbym aby w kalkulatorze nie było możliwości dodania więcej niż jednej kropki do liczby np. 20.5 + 20.1 - 5.3. Nie bardzo wiem też jak zrobić liczenie %.
Byłbym wdzięczny za sugestie :D

Mój kod:

import React, {useState} from "react";
import {View, Text, StyleSheet } from 'react-native';
import KeyPadItem from '../components/KeyPadItem';
import style from '../styles/CalcStyles';

const CalcScreen = () => {

const [operationText, setOperationText] = useState('');
const [resultText, setResultText] = useState('0');

const calculate = () => { 
    let checkResult = '';

    if (operationText.includes('--'))
    {
        checkResult = operationText.replace('--','+')
    }

    else {

    checkResult = operationText 

    }

    try {
        setResultText(eval(checkResult) || "" + "")
    } catch (e) {
        setOperationText('Wrong input!')
    }
}

const buttonPress = (buttonValue) => {

let operators = ['+','-','','/'];
//let pattern = "([-+
\/][0-9])^[.]$";

if (buttonValue === "D")
{
    backspace()
}
else if (buttonValue === "AC")
{
    reset()
} 
else if (buttonValue === "=")
{
    calculate()
}
else if ((validate() == false) && (operators.includes(buttonValue)))
{
  setOperationText(operationText.slice(0,-1) + buttonValue) 
}
else if (buttonValue === ".")

{
  // TODO: dot
}

else if (buttonValue === "%")
{
   // TODO: percentage 
}

else 

setOperationText(operationText + buttonValue);

}

const validate = () => {

const text = operationText

switch(text.substr(-1)){
  case '+':
  case '-':
  case '*':
  case '/':

  return false
}

}

const reset = () => {
setOperationText('');
setResultText('0');
}

const backspace = () => {
setOperationText(operationText.slice(0,-1));
}

return (
    <View style={style.title}>
        <Text style={style.textTitle}>Kalkulator</Text>

    <View style={style.operationArea}>
    <Text style={style.operationText}>
        {operationText}
        </Text>
    </View>

    <View style={style.resultArea}>
     <Text style={style.resultText}>
         = {resultText}
        </Text>

        </View>

    <View style={style.container}>
        <View style={style.row}>
            <KeyPadItem buttonValue={'AC'} onButtonPress={buttonPress} />
            <KeyPadItem buttonValue={'D'} onButtonPress={buttonPress} />
            <KeyPadItem buttonValue={'%'} onButtonPress={buttonPress} />
            <KeyPadItem buttonValue={'/'} onButtonPress={buttonPress} />
        </View>
        <View style={style.row}>
            <KeyPadItem buttonValue={'7'} onButtonPress={buttonPress} />
            <KeyPadItem buttonValue={'8'} onButtonPress={buttonPress} />
            <KeyPadItem buttonValue={'9'} onButtonPress={buttonPress} />
            <KeyPadItem buttonValue={'*'} onButtonPress={buttonPress} />
        </View>
        <View style={style.row}>
            <KeyPadItem buttonValue={'4'} onButtonPress={buttonPress} />
            <KeyPadItem buttonValue={'5'} onButtonPress={buttonPress} />
            <KeyPadItem buttonValue={'6'} onButtonPress={buttonPress} />
            <KeyPadItem buttonValue={'-'} onButtonPress={buttonPress} />
        </View>
        <View style={style.row}>
            <KeyPadItem buttonValue={'1'} onButtonPress={buttonPress} />
            <KeyPadItem buttonValue={'2'} onButtonPress={buttonPress} />
            <KeyPadItem buttonValue={'3'} onButtonPress={buttonPress} />
            <KeyPadItem buttonValue={'+'} onButtonPress={buttonPress} />
        </View>
        <View style={style.row}>
            <KeyPadItem buttonValue={'00'} onButtonPress={buttonPress} />
            <KeyPadItem buttonValue={'0'} onButtonPress={buttonPress} />
            <KeyPadItem buttonValue={'.'} onButtonPress={buttonPress} />
            <KeyPadItem buttonValue={'='} onButtonPress={buttonPress} />
        </View>

    </View>

    </View>

)

}
export default CalcScreen;