Build a Calculator using React Native

Building a simple calculator app in React Native is a great beginner-friendly project that helps you understand mobile UI development and JavaScript logic. It allows you to combine interactive components with functional programming to perform real-time calculations.

• Design a user interface with buttons for numbers (0–9), operations (+, −, ×, ÷), and a display screen.
• Implement functions to handle button presses and perform accurate calculations.
• Learn core React Native concepts like components, state management, and event handling.

Here, We start implementing the React Native Calculator App step by step, from setup to task management features.

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

1. For the Android users,

• For the Android Emulator, press "a" as mentioned in the image below.
• For the Physical Device, download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.

2. For iOS users, simply scan the QR code using the Camera app.

3. If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding

Import libraries: Import required libraries at the top of the file.

StyleSheet: Create a StyleSheet to style components like container, resultContainer, inputText, resultText, buttonsContainer, row, button, equalsButton, and buttonText.

buttons: Define a list of buttons for the calculator.

buttons UI: Use the code below to show a list of buttons. Organize the buttons with a map function and display the text for each button using a Text component. Make the buttons interactive by wrapping the Text inside a TouchableOpacity. This way, when the user taps on any button, it will call the handlePress function.

Input Text & Result Text: Display Input Text (Text user typing) and Result Text ( Answer to user input) using Text component wrapped with View component.

handlePress: Function to make every button functional.

- useState: Used to manage the state of input and result.

useEffect: Used to calculate the result whenever the input changes.

Now, wrap the buttons UI, input Text & result Text components with a SafeAreaView component and return from the App component. Also, ensure to export the App.

Complete Source Code

App.js:

Output: