How to Build a Simple Calculator App Using React Native

Creating a simple calculator app with React Native is a fantastic way for beginners to get hands-on experience with this popular framework. This project will introduce you to essential concepts in mobile app development, from layout design to basic state management. React Native is known for its ability to build cross-platform apps that work seamlessly on both Android and iOS, making it a great choice for frontend development projects.

Whether you’re a beginner looking to solidify your React Native skills or an experienced developer interested in a fun, straightforward project, this tutorial will walk you through the steps needed to create a fully functioning calculator app.

Why Choose React Native?

React Native has quickly become one of the most popular frameworks for mobile app development due to its versatility, ease of use, and active community. Here are some benefits that make it a great choice for building a calculator app:

Cross-Platform Capability: React Native allows you to build an app that works on both iOS and Android with a single codebase.
Reusable Components: React Native’s component-based structure lets you reuse code, speeding up the development process.
Vibrant Community Support: If you encounter any challenges, there’s a vast community of developers ready to help.
Efficient Development: React Native’s hot-reload feature makes it easy to test changes instantly, leading to a faster, more efficient development process.

Building this calculator app will provide you with a foundational understanding of how to use React Native components and manage state, which are crucial skills in frontend development.

Setting Up Your React Native Environment

Before starting on the app, you need to set up your React Native environment:

Install Node.js and npm: React Native requires Node.js and npm, the Node package manager. Download them from the official Node.js website.
Install Expo CLI: Expo is an open-source platform that makes it easy to develop and test React Native apps. Run the following command in your terminal:bashCopy codenpm install -g expo-cli
Create a New Project: Initialize your project by running:bashCopy codeexpo init SimpleCalculator Choose the blank template option, and once the setup is complete, navigate into your project folder:bashCopy codecd SimpleCalculator
Start the Development Server: Launch the Expo development server using:bashCopy codeexpo start You can then view the app on your phone by downloading the Expo Go app or using an Android/iOS emulator.

Building the Calculator Interface

Let’s dive into building the interface. We’ll use simple components to create a layout with buttons for numbers and basic operations.

Step 1: Setting Up Basic Components

In your App.js file, start by importing essential React and React Native components:

javascriptCopy codeimport React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

Step 2: Designing the Layout

Create a Display Section: This will show the numbers entered and the result of calculations.
Add Number and Operator Buttons: We’ll use TouchableOpacity components for each button to handle user interaction.

Step 3: Adding State to Track Inputs

To manage the calculations, you’ll need to track user input and the result. Initialize state variables for the current input and the result:

javascriptCopy codeconst [input, setInput] = useState("");
const [result, setResult] = useState("");

Step 4: Creating the Number and Operator Buttons

Define an array of button values to keep things organized. You can include numbers 0-9 and operators like +, -, *, and /.

javascriptCopy codeconst buttons = [
   '1', '2', '3', '+',
   '4', '5', '6', '-',
   '7', '8', '9', '*',
   'C', '0', '=', '/'
];

Then, map over this array in your render method to create the buttons:

javascriptCopy code<View style={styles.buttonsContainer}>
   {buttons.map((button) => (
       <TouchableOpacity
           key={button}
           onPress={() => handlePress(button)}
           style={styles.button}
       >
           <Text style={styles.buttonText}>{button}</Text>
       </TouchableOpacity>
   ))}
</View>

Handling Button Presses

Define the handlePress function to handle each button’s functionality:

Numbers and Operators: Concatenate these to the input variable.
Clear (C): Reset both input and result.
Equal (=): Calculate the result.

javascriptCopy codeconst handlePress = (button) => {
   if (button === 'C') {
       setInput("");
       setResult("");
   } else if (button === '=') {
       calculateResult();
   } else {
       setInput(input + button);
   }
};

Calculating the Result

Use the eval function in JavaScript to evaluate the mathematical expression entered:

javascriptCopy codeconst calculateResult = () => {
   try {
       setResult(eval(input).toString());
   } catch (error) {
       setResult("Error");
   }
};

Note: Using eval can be risky if the input isn’t controlled, so for a more complex app, consider using a safer evaluation method.

Styling the Calculator

Add some basic styles for the calculator’s layout:

javascriptCopy codeconst styles = StyleSheet.create({
   container: {
       flex: 1,
       justifyContent: 'center',
       backgroundColor: '#fff',
   },
   displayContainer: {
       flex: 1,
       justifyContent: 'flex-end',
       alignItems: 'flex-end',
       padding: 20,
       backgroundColor: '#dfe4ea',
   },
   buttonsContainer: {
       flexDirection: 'row',
       flexWrap: 'wrap',
       justifyContent: 'center',
   },
   button: {
       width: '22%',
       height: 80,
       alignItems: 'center',
       justifyContent: 'center',
       margin: 5,
       backgroundColor: '#f1c40f',
       borderRadius: 5,
   },
   buttonText: {
       fontSize: 24,
       color: '#fff',
   }
});

Testing Your App

Once you’ve completed the code, test the app on your Expo emulator or physical device. Enter numbers, perform calculations, and verify the result display.

Conclusion

Building a simple calculator app with React Native is an excellent project to practice mobile app development. It introduces you to essential React Native components, state management, and the concept of layout structuring. Whether you’re planning to dive deeper into mobile development or just experimenting with a fun project, creating a calculator app helps solidify your foundational knowledge in React Native.

Feel free to customize this calculator further by adding more advanced features, like a history log or scientific functions, to make the app even more interactive and useful.

WEBSITE

BLOG HOME

DeaLea Photography