React Native Tutorial - Calculator

Turbo 360

In this 3-hour intro course to React Native, we build a simple calculator app that will get students familiar with react and react native using some of the more basic components which are the building block of most applications. By the end of the course, we will use various React Native Components and follow React best practices to handle user input and perform various calculations on the input. Topics include:

  • React Native Basics
  • TextInput ComponentTouchableOpacity Component
  • React Native StyleSheets and FlexBox
  • React State and Hoisting State in React


Calculator App

Getting Started - 2:13
We begin by navigating to the directory where we want to do our programming and create a React Native application. We open two terminal tabs in our project directory. In the first, we start the project and leave it running. In the second, we run the app for either iOS or Android. This takes a while the first time we run the command, but it will be shorter after subsequent time.

Setting up our Source Code - 11:55
Now, we have our app open and running. We open our App.js file and remove some unnecessary code and make a few other changes.

Creating Directories - 15:20
We create a component directory and a config directory. Then we create two subdirectories within the component directory, called “presentation” and “screens”. This style of organizing components is based on preference, and some developers might do this differently. Within our “screens” directory, we create an index file and our Calc component.

Creating the Calc Component - 19:28
First, we import the Calc component in our App.js. Then, we add code to render our view and make sure our component is connected properly. We want our Calc component to contain the code for the visual aspect of our calculator. We add a TextInput field and some styling.

Handling Text Input - 31:55
We want our calculator to do something when a user inputs text, so we create a function to handle input. We set our local state so that it stores the input. We log the state every time it updates to ensure this is working. Then, we set the value of our TextInput field to equal the text value in our state. Finally, we create a constructor method to give our text an initial value when the app starts.

Creating Buttons - 46:53
We create a class variable that contains the valid keys, or input values, for our calculator. This will eventually be used to ensure that we don’t have letters, invalid symbols, etc. as input. Then, we see how flex box layouts work, which will allow us to style the calculator buttons. We map each of the valid keys to create a button, adding styling to separate the buttons into rows of two buttons each.

Adding Text to the Buttons - 1:11:30
We start off by adding a test string to each button and ensuring it renders properly. Then, we replace the test string with the values of our valid keys. Next, we add styling to center the text within each button and increase its size.

Making our Buttons Functional - 1:16:55
There’s no pure “button” in React Native like there is in HTML, so instead we use TouchableOpacity for each of our buttons. This allows us to click or tap our buttons to trigger an event. We create another function to handle input from a button. Each time a button is pressed, we pass it the value of that button and append it to our text value.

- - Recap & 5 Minute Break - 1:27:09 - -

Performing Calculations - 1:35:45
We add a check to to see whether the input is an operational symbol. If it is, we save our firstOperand and pendingOperation text. This ensures that we don’t lose anything when we perform operations. Next, we check for an equals sign. If we get an equals sign, we call our calculate function. The calculate function contains a switch statement containing a case for each operation, and set our inputText in the state equal to include the resulting value.

Creating a Button Component - 2:08:48
Up to this point, we have been rendering the same thing twice to display each row of buttons. We create a new presentation component called CalcButton to solve this problem. We cut our button code and styling from the Calc component and paste it into this new file. Then, we render the CalcButton component within the Calc component. We also show how you can pass data to the CalcButton component using props. This demonstrates the difference between “smart” and “dumb” components.

Adding a “Clear” Button - 2:28:06
We add a “C” to our list of valid keys and further sanitize our input to handle clearing the calculator. All we need to do when the clear button is pressed is set our input text equal to the empty string.

Setting the Initial State - 2:32:36
Finally, we demonstrate how to set the initial state of the component when the app is started.

Membership Options