Calculator Application in React Native

So Today we are going to make a simple Calculator application for the beginner

It is a simple app for the beginner to understand the working in react native

import { StatusBar } from “expo-status-bar”;
import {
StyleSheet,
Text,
View,
TextInput,
Button,
TouchableOpacity,
} from “react-native”;
import { useState } from “react”;
export default function App() {
const [numberInput, setNumberInput] = useState(“”);
const [results, setResults] = useState(0);
let stringNumber = “”;

const handleInput = (input) => {
if (
input === “+” &&
input === “-” &&
input === “*” &&
input === “/” &&
input === “%”
) {
const lastElement = numberInput.slice(-1);
if (
lastElement !== “+” &&
lastElement !== “-” &&
lastElement !== “*” &&
lastElement !== “/” &&
lastElement !== “%”
) {
setNumberInput(numberInput + input);
}
} else {
setNumberInput(numberInput + input);
}
};

const clear = (e) => {
e.preventDefault();
setNumberInput(“”);
};
const result = (e) => {
e.preventDefault();
if (
lastElement !== “+” &&
lastElement !== “-” &&
lastElement !== “*” &&
lastElement !== “/”
) {
try {
setNumberInput(eval(numberInput).toString());
} catch (e) {
alert(e.message);
}
}
};

//Application Design Layer

return (
<View styles={styles.container}>
<TextInput style={styles.inputContainer} value={numberInput} />

<View style={styles.buttonGroup}>
<TouchableOpacity style={styles.button} onPress={clear}>
<Text style={styles.text}>AC</Text>
</TouchableOpacity>
<View style={styles.button}>
<Text style={styles.text}>+/-</Text>
</View>
<View style={styles.button}>
<Text style={styles.text}>%</Text>
</View>
<View style={styles.button}>
<Text style={styles.text}>/</Text>
</View>
</View>
<View style={styles.buttonGroup}>
<TouchableOpacity
style={styles.button}
onPress={() => handleInput(“7”)}
>
<Text style={styles.text}>7</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleInput(“8”)}
>
<Text style={styles.text}>8</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleInput(“9”)}
>
<Text style={styles.text}>9</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleInput(“*”)}
>
<Text style={styles.text}>x</Text>
</TouchableOpacity>
</View>
<View style={styles.buttonGroup}>
<TouchableOpacity
style={styles.button}
onPress={() => handleInput(“4”)}
>
<Text style={styles.text}>4</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleInput(“5”)}
>
<Text style={styles.text}>5</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleInput(“6”)}
>
<Text style={styles.text}>6</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleInput(“-”)}
>
<Text style={styles.text}>-</Text>
</TouchableOpacity>
</View>
<View style={styles.buttonGroup}>
<TouchableOpacity
style={styles.button}
onPress={() => handleInput(“1”)}
>
<Text style={styles.text}>1</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleInput(“2”)}
>
<Text style={styles.text}>2</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleInput(“3”)}
>
<Text style={styles.text}>3</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleInput(“+”)}
>
<Text style={styles.text}>+</Text>
</TouchableOpacity>
</View>
<View style={styles.buttonGroup}>
<TouchableOpacity
style={styles.buttonZero}
onPress={() => handleInput(“0”)}
>
<Text style={styles.text}>0</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleInput(“.”)}
>
<Text style={styles.text}>.</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={result}>
<Text style={styles.text}>=</Text>
</TouchableOpacity>
</View>
</View>
);
}

For the styling of the app

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: “#000”,
},
inputContainer: {
marginTop: 50,
backgroundColor: “#000”,
height: 300,
flexWrap: “wrap”,
color: “#fff”,
fontSize: 50,
fontWeight: “bold”,
paddingLeft: 10,
borderBottomWidth: 1,
textAlignVertical: “bottom”,
paddingTop: 0,
paddingBottom: 0,
},
buttonGroup: {
flexDirection: “row”,
alignItems: “center”,
justifyContent: “space-between”,
},
button: {
height: 80,
width: 80,
borderRadius: 40,
backgroundColor: “#000”,
alignItems: “center”,
justifyContent: “center”,
margin: 5,
},
text: {
color: “#fff”,
fontSize: 35,
fontWeight: “bold”,
},
buttonZero: {
height: 80,
width: 160,
borderRadius: 40,
backgroundColor: “#000”,
alignItems: “center”,
justifyContent: “center”,
marginLeft: 10,
},
});