Open In App

Build a Calculator using React Native

Last Updated : 04 Aug, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

React Native is a well-known technology for developing mobile apps that can run across many platforms. It enables the creation of native mobile apps for iOS and Android from a single codebase. React Native makes it simple to construct vibrant, engaging, and high-performing mobile apps. In this tutorial, we will guide you through the process of building a simple calculator using React Native, enabling you to apply the fundamentals of React Native development.

To begin, you must configure your development environment. This requires the installation of Node.js, which acts as a runtime environment for executing JavaScript code outside of the limitations of a web browser.

  • Installation: In this article, we’ll use the Expo CLI edition, which provides a more seamless experience for running React Native apps. To create your React native environment, follow the tasks in the order listed.
  • Expo is a JavaScript and React-based platform that allows developers to use a unified codebase to construct cross-platform mobile applications for iOS, Android, and the web. This free and open-source framework provides a variety of tools and services that simplify the mobile app development process, allowing developers to create high-quality applications.

Prerequisites

Steps to Create React Native Application

Step 1: Create a react native application by using this command

npx create-expo-app calculator-app-in-native

Step 2: After creating your project folder, i.e. calculator-app-in-native, use the following command to navigate to it:

cd calculator-app-in-native

Project Structure

Screenshot-(196).png

Basic Approach: The fundamental method entails developing a calculator featuring conventional mathematical operations like addition, subtraction, multiplication, and division. It is necessary to devise a user interface (UI) comprising buttons for every digit and operation, alongside a display region for presenting the input and outcome. JavaScript functions can be employed to execute button interactions and carry out the required computations, thereby implementing the calculator’s logic.

Step 3: Open the App.js file. Simply paste the source code into the App.js file.

Javascript




import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } 
    from 'react-native';
  
export default function App() {
  
    // State variables
    const [displayValue, setDisplayValue] = useState('0');
    const [operator, setOperator] = useState(null);
    const [firstValue, setFirstValue] = useState('');
  
    // Function to handle number inputs
    const handleNumberInput = (num) => {
        if (displayValue === '0') {
            setDisplayValue(num.toString());
        } else {
            setDisplayValue(displayValue + num);
        }
    };
  
    // Function to handle operator inputs
    const handleOperatorInput = (operator) => {
        setOperator(operator);
        setFirstValue(displayValue);
        setDisplayValue('0');
    };
  
    // Function to handle equal button press
    const handleEqual = () => {
        const num1 = parseFloat(firstValue);
        const num2 = parseFloat(displayValue);
  
        if (operator === '+') {
            setDisplayValue((num1 + num2).toString());
        } else if (operator === '-') {
            setDisplayValue((num1 - num2).toString());
        } else if (operator === '*') {
            setDisplayValue((num1 * num2).toString());
        } else if (operator === '/') {
            setDisplayValue((num1 / num2).toString());
        }
  
        setOperator(null);
        setFirstValue('');
    };
  
    // Function to handle clear button press
    const handleClear = () => {
        setDisplayValue('0');
        setOperator(null);
        setFirstValue('');
    };
  
    return (
        <View style={styles.container}>
            <View style={styles.displayContainer}>
                <Text style={styles.displayText}>
                    {displayValue}
                </Text>
            </View>
            <View style={styles.buttonContainer}>
                <View style={styles.row}>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => handleNumberInput(7)}
                    >
                        <Text style={styles.buttonText}>7</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => handleNumberInput(8)}
                    >
                        <Text style={styles.buttonText}>8</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => handleNumberInput(9)}
                    >
                        <Text style={styles.buttonText}>9</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={[styles.button, styles.operatorButton]}
                        onPress={() => handleOperatorInput('/')}
                    >
                        <Text style={[
                            styles.buttonText, 
                            styles.operatorButtonText
                        ]}>
                            ÷
                        </Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.row}>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => handleNumberInput(4)}
                    >
                        <Text style={styles.buttonText}>4</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => handleNumberInput(5)}
                    >
                        <Text style={styles.buttonText}>5</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => handleNumberInput(6)}
                    >
                        <Text style={styles.buttonText}>6</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={[styles.button, styles.operatorButton]}
                        onPress={() => handleOperatorInput('*')}
                    >
                        <Text style={[
                            styles.buttonText, 
                            styles.operatorButtonText
                        ]}>
                            ×
                        </Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.row}>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => handleNumberInput(1)}
                    >
                        <Text style={styles.buttonText}>1</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => handleNumberInput(2)}
                    >
                        <Text style={styles.buttonText}>2</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => handleNumberInput(3)}
                    >
                        <Text style={styles.buttonText}>3</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={[styles.button, styles.operatorButton]}
                        onPress={() => handleOperatorInput('-')}
                    >
                        <Text style={[
                            styles.buttonText, 
                            styles.operatorButtonText
                        ]}>
                            
                        </Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.row}>
                    <TouchableOpacity
                        style={[styles.button, styles.zeroButton]}
                        onPress={() => handleNumberInput(0)}
                    >
                        <Text style={[
                            styles.buttonText, 
                            styles.zeroButtonText
                        ]}>
                            0
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={[styles.button, styles.operatorButton]}
                        onPress={() => handleOperatorInput('+')}
                    >
                        <Text style={[
                            styles.buttonText, 
                            styles.operatorButtonText
                        ]}>
                            +
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.equalButton}
                        onPress={handleEqual}
                    >
                        <Text style={styles.equalButtonText}>=</Text>
                    </TouchableOpacity>
                </View>
                <TouchableOpacity 
                    style={styles.clearButton} 
                    onPress={handleClear}>
                    <Text style={styles.clearButtonText}>C</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}
  
// Styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
        alignItems: 'center',
        justifyContent: 'center',
    },
    displayContainer: {
        flex: 2,
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
        padding: 20,
    },
    displayText: {
        fontSize: 48,
        color: '#333',
    },
    buttonContainer: {
        flex: 3,
        width: '80%',
    },
    row: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 10,
    },
    button: {
        flex: 1,
        borderRadius: 50,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
        elevation: 3,
        margin: 2,
        padding: 15,
    },
    buttonText: {
        fontSize: 34,
        color: '#333',
    },
    zeroButton: {
        flex: 2,
        paddingLeft: 35,
        paddingRight: 35,
    },
    zeroButtonText: {
        marginLeft: 10,
    },
    operatorButton: {
        backgroundColor: '#f0f0f0',
    },
    operatorButtonText: {
        color: '#ff9500',
    },
    equalButton: {
        flex: 1,
        borderRadius: 50,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ff9500',
        elevation: 3,
    },
    equalButtonText: {
        fontSize: 32,
        color: '#fff',
    },
    clearButton: {
        borderRadius: 50,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#f0f0f0',
        marginTop: 10,
        elevation: 3,
        padding: 10,
    },
    clearButtonText: {
        fontSize: 24,
        color: '#333',
    },
});


Explanation

  • This code imports required components from react-native and set up the functional component “App”. It initializes state variables for managing the calculator’s display value, selected operator, and first value.
  • The handleNumberInput function updates the display value when a number button is pressed, checking and adjusting if the current value is ‘0’.
  • The handleOperatorInput function is triggered by an operator button press. It assigns the selected operator, saves the current display value as the first value, and resets the display to ‘0’.
  • The handleEqual function calculates the result based on the operator, first value, and current display. It updates the display value, and resets the operator and first value.
  • The handleClear function resets the display value, operator, and first value when the clear button (C) is pressed.
  • The return statement constructs the calculator UI using View, Text, and TouchableOpacity components. The display value is in a separate container, while the number and operator buttons, equal button, and clear button are in the button container. The code includes a styles object that defines the styles for calculator components and elements. These styles are applied in the JSX code for the desired visual appearance.

Step 4: To run the react native application, open the Terminal and enter the command listed below. 

npx expo start

To run on Android

npx react-native run-android

To run on Ios

npx react-native run-ios

Output:

calculator-in-react-native.gif



Previous Article
Next Article

Similar Reads

Create a Card View in React native using react-native-paper
React Native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms. Approach: In this ar
2 min read
Create an Activity Indicator in react-native using react-native-paper library
React Native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms. Prerequisites: Basic
2 min read
How to add a Progress Bar in react-native using react-native-paper library ?
React native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Approach: In this a
3 min read
How to add a divider in react-native using react-native-paper library ?
React native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Prerequisites: Basi
2 min read
How to create a button in react-native using react-native-paper library ?
React-native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Prerequisites: Basi
2 min read
How to create Chip in react-native using react-native-paper ?
React native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Prerequisites: Basi
2 min read
Create a GPA Calculator using React Native
A GPA calculator proves to be a useful tool for students who want to monitor their academic progress. In this article, we will build a GPA calculator using React Native, a popular framework for building mobile applications. Preview Image PrerequisitesIntroduction to React NativeReact Native ComponentsReact HooksNode.js and Npm Steps to Create React
5 min read
Create a BMI Calculator App using React-Native
In this article, we will create a BMI (Body Mass Index) calculator using React Native. A BMI calculator serves as a valuable and straightforward tool for estimating body fat by considering height and weight measurements.A BMI Calculator App built with React Native allows users to input their age, height, weight, and gender. It computes their Body M
4 min read
Create a Tip Calculator using React-Native
A Tip Calculator proves to be a convenient tool for effortlessly calculating tips and dividing bills among friends at restaurants. The app enables users to input the bill amount, select their desired tip perce­ntage, specify the numbe­r of people sharing the bill, and promptly obtain calculate­d values for both the tip and total amounts Preview of
5 min read
Create an Age Calculator App using React-Native
In this article we are going to implement a Age calculator using React Native. An age calculator app in React Native is a simple application that calculates a person's age based on their birth date and the current date. It's a simple utility designed to determine how many years, months, and days have passed since a person was born. Preview of Final
3 min read