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.

--

--

Software Developing is my hobby and want to learn more things everyday just like you

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Akbar Sheikh

Software Developing is my hobby and want to learn more things everyday just like you