Apple Calculator App using React Native

Hi Guys Today i am going you to share the code as well as i will let you know how we can create a simple calculator using React Native app.

Here is the function which i have used for my calculator and yes design is based on apple calculator ,it was amazing to build and it was fun to create something new

const [text, setText] = useState(“”);
const [result, setResult] = useState(0);

//This function is used to input numbers as well as for input the operator
const handleInput = (num) => {
if (
num === “+” ||
num === “-” ||
num === “*” ||
num === “%” ||
num === “/”
) {
const lastElement = text.slice(-1);
if (
text !== “” &&
lastElement !== “+” &&
lastElement !== “-” &&
lastElement !== “*” &&
lastElement !== “%” &&
lastElement !== “/”
) {
setText(text + num);
}
} else {
setText(text + num);
}
};

//This is used to calculate the result
const handleResult = () => {
const lastElement = text.slice(-1);
if (
lastElement !== “+” &&
lastElement !== “-” &&
lastElement !== “*” &&
lastElement !== “/” &&
lastElement !== “%”
) {
const res = eval(text);
setResult(res);
}
};

//Function used to clear the result as well as input text
const handleClear = () => {
const res = text.slice(0, -1);
setText(res);
setResult(0);
};

Now is the design part Hope so you like it

<View style={styles.container}>
<View
style={{
backgroundColor: “black”,
height: 300,
alignItems: “flex-end”,
justifyContent: “center”,
}}
>
<Text style={styles.text}>{text}</Text>
<Text style={styles.result}>{result}</Text>
</View>
<View style={{ backgroundColor: “#000”, height: 600 }}>
<View
style={{
flexDirection: “row”,
alignItems: “center”,
justifyContent: “space-between”,
marginTop: 20,
}}
>
<TouchableOpacity
style={[styles.button, { width: 150 }]}
onPress={() => {
handleClear();
}}
>
<Text style={{ fontSize: 40 }}>AC</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => {
handleInput(“%”);
}}
>
<Text style={{ fontSize: 40 }}>%</Text>
</TouchableOpacity>

<TouchableOpacity
onPress={() => {
handleInput(“/”);
}}
style={[styles.button, { backgroundColor: “orange” }]}
>
<Text style={{ fontSize: 40 }}>/</Text>
</TouchableOpacity>
</View>
<View
style={{
flexDirection: “row”,
alignItems: “center”,
justifyContent: “space-between”,
marginTop: 20,
}}
>
<TouchableOpacity
style={styles.button}
onPress={() => {
handleInput(“7”);
}}
>
<Text style={{ fontSize: 40 }}>7</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => {
handleInput(“8”);
}}
>
<Text style={{ fontSize: 40 }}>8</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => {
handleInput(“9”);
}}
>
<Text style={{ fontSize: 40 }}>9</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
handleInput(“*”);
}}
style={[styles.button, { backgroundColor: “orange” }]}
>
<Text style={{ fontSize: 40 }}>x</Text>
</TouchableOpacity>
</View>
<View
style={{
flexDirection: “row”,
alignItems: “center”,
justifyContent: “space-between”,
marginTop: 20,
}}
>
<TouchableOpacity
style={styles.button}
onPress={() => {
handleInput(“4”);
}}
>
<Text style={{ fontSize: 40 }}>4</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => {
handleInput(“5”);
}}
>
<Text style={{ fontSize: 40 }}>5</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => {
handleInput(“6”);
}}
>
<Text style={{ fontSize: 40 }}>6</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
handleInput(“-”);
}}
style={[styles.button, { backgroundColor: “orange” }]}
>
<Text style={{ fontSize: 40 }}>-</Text>
</TouchableOpacity>
</View>

<View
style={{
flexDirection: “row”,
alignItems: “center”,
justifyContent: “space-between”,
marginTop: 20,
}}
>
<TouchableOpacity
style={styles.button}
onPress={() => {
handleInput(“1”);
}}
>
<Text style={{ fontSize: 40 }}>1</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => {
handleInput(“2”);
}}
>
<Text style={{ fontSize: 40 }}>2</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => {
handleInput(“3”);
}}
>
<Text style={{ fontSize: 40 }}>3</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
handleInput(“+”);
}}
style={[styles.button, { backgroundColor: “orange” }]}
>
<Text style={{ fontSize: 40 }}>+</Text>
</TouchableOpacity>
</View>
<View
style={{
flexDirection: “row”,
alignItems: “center”,
justifyContent: “space-between”,
marginTop: 20,
}}
>
<TouchableOpacity
style={[styles.button, { width: 150 }]}
onPress={() => {
handleInput(“0”);
}}
>
<Text style={{ fontSize: 40 }}>0</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => {
handleInput(“.”);
}}
>
<Text style={{ fontSize: 40 }}>.</Text>
</TouchableOpacity>

<TouchableOpacity
onPress={() => {
handleResult();
}}
style={[styles.button, { backgroundColor: “orange” }]}
>
<Text style={{ fontSize: 40 }}>=</Text>
</TouchableOpacity>
</View>
</View>
</View>

Now is some design part

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: “#fff”,
marginTop: 40,
},
text: {
fontSize: 24,
color: “#fff”,
},
result: {
fontSize: 40,
color: “#fff”,
},
button: {
backgroundColor: “#fff”,
height: 80,
width: 80,
borderRadius: 40,
justifyContent: “center”,
alignItems: “center”,
},
});

Please let me know how was my work.