Continuing with React Native the next app i am making is a simple iphone calculator. This post is inspired by this video by Carl Spencer.
Let’s head over to a terminal and type
expo init CalculatorReactNative
Press enter for
blank in the selection.
In the next screen, you can give the same name as the project. For my case it is
Then change into the directory and do a
The project will be started by expo on a web-browser.
Next, open the project in VSCode and create a new folder
App and a file
index.js inside it. Copy all content from
index.js and delete
Next, open the App on a physical device. I had mentioned the steps in my blog for Restaurant Search app.
You can also open the app in the lap by configuring Android emulator. I have mentioned the steps in my previous blog to Setup Android Emulator on Mac.
Let’s put some basic code to display a button and change the default styling. The
SafeAreaView are to avoid the notch in iphone X and other Android models with notch for camera.
It will show as below on the physical android device.
Next, create a folder
App and two files
Button.js inside it. In
Row.js put the below, which will show any children passed to it.
Next, let’s add some code in
Next, head over to
index.js and import these two by -
import Row from './components/Row';
import Button from './components/Button';
Next add the layout of calculator buttons in it. We have 5 rows here, each having 4 buttons. Only the last row have 3 buttons.
Next, we will add some styles to the button so that looks more like iphone calculator.
It will show rounded buttons like below now.
Our last row have three buttons. In iPhone the 0 button takes half of the space and . and = takes the rest. We will fix the style for it next.
button.js we will take an additional prop
size. If it is equal to
double, we are adding another style called
buttonDouble to the button.
So, now move to
index.js and add that prop to the
Button 0 as below.
It will now show our
Button 0 taking double space.
Next, we will update colors of some of the buttons as in iPhone calculator. First let’s add a new prop for the buttons whose color will be updated in
Next, we will update it in our
First let’s add the code for
theme. We are also going to update the color of our secondary buttons, so we are creating
Now, let’s add styles for the themes and text.
Now, our App styling is complete and it is looking like the iPhone calculator.
Now, we will write the logic for calculator. We are using React hook for state management. For details on hooks go through my earlier post on hooks here.
First let’s call a function
handleTap() for all buttons. It passes different parameters depending on the button.
Next, we will use the
useState hook. We will declare a variable
currVal and update it with
setCurrVal. So, whenever the type is number we are updating the
currVal with whatever the user input.
Next, we will add logic for
operator, clear, posneg, percentage. We have declared two additional state variables
Next, we will add the logic for
equal. It will do calculation depending on
This completes our App. So, go ahead and play with it. You can find the code for the same in the link here.