Create Your Calculator App in React Native in 2 hours – [Part 1]

React Native Calculator App [Part 1]

Hello friends, so after creating some common applications in React Native for myself today I am going to share with you how to develop a React Native Calculator Application (Android) in just 2 hours.

I know that we all have Calculator App on our phones but creating your own will help you in understanding React Native app development process better.

so I am going to provide the full lesson on how to develop Calculator App in React Native. for easy understanding, I have divided full lesson into 2 parts. as this application will consist of total 4 classes or we can say a total of 4 components.

so in the 1st part, I will provide information on 2 components and in 2nd part will provide information on rest 2 components so that you can better understand the whole concept behind this application.

Total Components and usage of each component –

  • Calculator Buttons Container (.js) – File where all buttons with internal UI and symbols are located. (wrapper for calculator buttons)
  • Calculator Button (.js) – File where buttons Container and onPress() event will be binded. this file will be passed to Calculator Buttons Container to create buttons with symbols on each button.
  • Calculator Response (.js) – File where Calculator Result and Clear button are located. (used to display results on screen).
  • App/index.android (.js) – File where all 3 components will be applied accordingly and calculations will be performed on basis of activity we will do on the calculator.

so without wasting time anymore let’s get started with developing this Calculator App in React Native. Here I consider you have already done with your basic React Native App and running demo app on your device or emulator. if you are new to React Native or want to check the initial part (how to get started with React Native) you can read our previous article by clicking on the link given below.

React Native Getting Started – by CodingIsEasy

so now as you are done with the basic setup of React Native and have a demo app running on emulator we can start developing our React Native Calculator App.

our end result will look like this image given below –

CodingIsEasy Calculator App React Native

CodingIsEasy Calculator App React Native

so here I am following a basic folder structure to create my App. so that it will be easily manageable and understandable by looking at folder structure.

I have created a folder named as components and will save all calculator components file in that folder only. if you prefer to read how to manage folder structure of a React Native app then must read our older post on React Native Folder Structure Click Here to Read.

now let’s move to our first component:-

  • CalculatorButtons.js – 

This file is the wrapper for all Calculator buttons. i.e UI of all buttons we will pick UI for all buttons from this file. we will just pass button text as a parameter from parent and this file will provide a button with complete UI and function for us to work with.

Just simply Wrapped the whole component in TouchableOpacity and a Text component to Hold the operator value to show on the button.

here is the code, below you can understand it better from code.

import React from 'react';
import {Text, StyleSheet, TouchableOpacity} from 'react-native';

class CalculatorButton extends React.Component {
    render() {
        const {operator, handleButtonPress} = this.props;

        return (
            <TouchableOpacity
                style={styles.container}
                onPress={() => handleButtonPress(operator)}>
                <Text style={styles.item}>
                    {operator}
                </Text>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(255, 255, 255, 0.1)',
        margin: 1
    },

    item: {
        color: '#fff',
        fontSize: 26
    }
});

export default CalculatorButton;

so now we are done with our first basic component let’s move to its wrapper/parent component.

  • CalculatorButtonsContainer.js –
    This file will use the CalculatorButtons.js file to create buttons with symbols for calculator UI. in this file I have created rows for calculator button. 4 buttons in a row to make UI for the calculator. 

The main container View with inner row Views which contains the CalculatorButtons.js component to create a button. and passed operator/number as a text for Button UI.

check code given below for CalculatorButtonsConatiner.js file.

import React from 'react';
import {View, StyleSheet} from 'react-native';
import CalculatorButton from './calculatorbutton';

class CalculatorButtonsContainer extends React.Component {
    render() {
        const {handleButtonPress} = this.props;

        return (
            <View style={styles.container}>
                <View style={styles.row}>
                    <CalculatorButton operator={'+'} handleButtonPress={handleButtonPress}/>
                    <CalculatorButton operator={'-'} handleButtonPress={handleButtonPress}/>
                    <CalculatorButton operator={'*'} handleButtonPress={handleButtonPress}/>
                    <CalculatorButton operator={'/'} handleButtonPress={handleButtonPress}/>
                </View>

                <View style={styles.row}>
                    <CalculatorButton operator={'7'} handleButtonPress={handleButtonPress}/>
                    <CalculatorButton operator={'8'} handleButtonPress={handleButtonPress}/>
                    <CalculatorButton operator={'9'} handleButtonPress={handleButtonPress}/>
                </View>

                <View style={styles.row}>
                    <CalculatorButton operator={'4'} handleButtonPress={handleButtonPress}/>
                    <CalculatorButton operator={'5'} handleButtonPress={handleButtonPress}/>
                    <CalculatorButton operator={'6'} handleButtonPress={handleButtonPress}/>
                </View>

                <View style={styles.row}>
                    <CalculatorButton operator={'1'} handleButtonPress={handleButtonPress}/>
                    <CalculatorButton operator={'2'} handleButtonPress={handleButtonPress}/>
                    <CalculatorButton operator={'3'} handleButtonPress={handleButtonPress}/>
                </View>

                <View style={styles.row}>
                    <CalculatorButton operator={'0'} handleButtonPress={handleButtonPress}/>
                    <CalculatorButton operator={'.'} handleButtonPress={handleButtonPress}/>
                    <CalculatorButton operator={'='} handleButtonPress={handleButtonPress}/>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },

    row: {
        flex: 1,
        flexDirection: 'row'
    }
});

export default CalculatorButtonsContainer;

so here we are done with 2 components of Calculator App in React Native. and for rest 2 components are covered in part 2 of this tutorial.

click below link to go to part 2

Create Your Calculator App in React Native in 2 hours – [Part 2] 

Try understanding code if any confusion you can comment down below I will try to clear your doubts. till next tutorial comes keep sharing our content and spread knowledge and love.


Happy Coding

You may also like...

3 Responses

  1. Babel says:

    Hello,
    Can you tell me, where can I found ” Create Your Calculator App in React Native Part 2″ ?
    I need to see the code for ” Calculator Response (.js)”
    Thank you very much

    • admin says:

      We will be posting it’s part 2 shortly.
      sorry for waiting time. you can subscribe to our newsletter to get notified whenever new posts added here.

  1. March 24, 2018

    […] if you missed the part 1 of this tutorial series then click on below link to read that first awesome article on How to Create Your Calculator App in React Native in 2 hours – [Part 1] […]

Leave a Reply

Your email address will not be published. Required fields are marked *