Skip to content

Exercise 02 : Calculator / Expo

Purpose and learning process

In this exercise you will learn the basics of the React Native development:

  • using and rendering build-in components
  • understand state and props
  • event handling
  • using styles

You will create a small calculator with React Native and more specially with Expo CLI. In this tutorial you will learn the basics of the React Native development. Application UI will be created with build-in React Native components and styles. React Hooks will be used to handle application state. Created project is tested with a emulator and a real device. To test with emulators you will need to install Android Studio or Xcode.

Example screenshots and video

User can do a small calculations with this app.

Image 1 Image 2 Image 3

Example video: https://youtu.be/U1eIaBxWrpw

Install Node

You will need to install Node, because it will be used to create React Native applications. You can find Node here: https://nodejs.org/en/download/.

Create a new project

Go to your mobile-exercises folder and create a new Expo based React Native project called Calculator.

1
npx create-expo-app Calculator

.git repository

Go to your project folder and list all files inside it.

!Template2

You will notice that a .git folder/repository will be created automatically with Expo. You are now using git version control in your mobile-exercises repository and you don't need to use version control inside your own exercise projects right now. So, you should remove this created repository inside your Calculator folder.

Error

Remove .git folder from your Expo projects folders

Now you are using mobile-exercises folder (in your local computer) to store exercise projects like this exercise 2 (and other Expo based exercises).You will use Expo CLI to create a new Expo project, when you are following above tutorial. Expo CLI will also add Git version control inside exercise folder. You will need to remove .git folder from created project folder, because version control is already handled inside mobile-exercises folder.

Linux or macOS use below command in terminal
cd YourProject
rm -rf .git

Windows
Use File Expolorer and go to YourProject folder
Select View tab and select "Hidden items"
Now you should see .git folder and delete it

Look this video to get more help: https://youtu.be/-FlbF96uBOk

Run project

You can run your project many different ways. It depends do you want to run it direcly in some emulators or in development server.

Go to your Calculator folder and start your project with expo development server:

1
2
cd Calculator
npx expo start

Now your development server should be running and ready.

!Development

Run your app on Expo client in your mobile

Install Expo client app to your iOS or Android phone and connect it to same wireless network as your computer. On Android, use Expo app to scan the QR code to open your project. On iOS, use camera app to scan QR code to open Expo app.

Expo Go apps:

Your app should be running in mobile phone’s Expo application.

ToDo10 ToDo11 ToDo12

Run app on Android or iOS emulator

Use Android Studio or Xcode to launch emulator first and click Run on Android device/emulator or Run on iOS simulator buttons (above QR code) to launch application to emulator/simulator from your Metro Builder page at your browser.

ToDo13 ToDo14

You can download Android Studio here: Download Android Studio. Read more information about Xcode here: Xcode.

Note

Remember, you will need to install Expo client to your emulator/simulator.

Modify App.js

Open App.js in text editor and edit displayed text line to show “Hello React Native!” text.

Tip

One good editor is Visual Studio Code, download it from here: Visual Studio Code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello React Native!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Save your changes and application will reload automatically.

ToDo2

Add a UI components to your app

This application uses a few basic React Components to build app UI.

Calculator header

Add a style for the header text.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  calculator: {
    fontSize: 50,
    fontWeight: 'bold',
    marginBottom: 20
  },
});

Add Text component inside View component in rendering.

1
2
3
4
5
6
return (
    <View style={styles.container}>
      <Text style={styles.calculator}>Calculator</Text>
      <StatusBar style="auto" />
    </View>
  );

Number inputs

Numbers will be asked using TextInput components.

Calc05

Add styles for the number components. Components will use flexDirection : row, so they will be side by side.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
row: {
  flexDirection: 'row',
  marginTop: 5
},
text: {
  backgroundColor: 'lightgrey',
  justifyContent: 'center',
  padding: 5,
  width:100,
},
textInput: {
  justifyContent: 'center',
  padding: 5,
  borderBottomWidth: 1.0,
  width: 100,
  marginLeft: 5,
},

Add below components hierarcy after Text Calculator header component (inside a View root component). Text components will be used to display a normal text and TextInput components to ask a numbers from the user.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<View style={styles.row}>
  <View style={styles.text}>
    <Text>Number 1:</Text>
  </View>
  <View style={styles.textInput}>
    <TextInput placeholder="0" style={{textAlign:'right'}} ></TextInput>
  </View>
</View>
<View style={styles.row}>
  <View style={styles.text}>
    <Text>Number 2:</Text>
  </View>
  <View style={styles.textInput}>
    <TextInput placeholder="0" style={{textAlign:'right'}} ></TextInput>
  </View>
</View>

Tip

You will need to import TextInput element from react-native.

Calc buttons

User can select calculation by pressing one of the calc buttons.

Calc06

Add styles for the calc buttons. Buttons will take 200 px width and use justifyContent as space-around, so they will be nicely set side by side.

1
2
3
4
5
6
7
buttonRow: {
  flexDirection: 'row',
  marginTop: 20,
  marginBottom: 20,
  justifyContent: 'space-around',
  width: 220
}

Add below components hierarcy after above hierarcy set (inside a View root component).

1
2
3
4
5
6
<View style={styles.buttonRow}>
  <Button title="  +  "/>
  <Button title="  -  "/>
  <Button title="  *  "/>
  <Button title="  /  "/>
</View>

Result

Add below components hierarchy after above one (inside View root component). TextInput component’s editable attribute is set to false, so it only displays a result and it can’t be edited.

1
2
3
4
5
6
7
8
<View style={styles.row}>
  <View style={styles.text}>
    <Text>Result:</Text>
  </View>
  <View style={styles.textInput}>
    <TextInput placeholder="0" style={{textAlign:'right'}} editable={false}></TextInput>
  </View>
</View>

Test your app UI

UI should be now ready. Save your code and test.

Calc01

Calculation

Get numbers

You can use React Hooks to get numbers from TextInput components. Declare a new state variable for numbers and result.

1
2
3
4
5
6
export default function App() {
  // use hooks to change number values
  const [number1, setNumber1] = useState('0');
  const [number2, setNumber2] = useState('0');
  const [result, setResult] = useState('0');
  // ...

Tip

You will need to import useState from react. 

1
import React, {useState} from 'react';

Now you have setNumber1 function to change the state of number1 variable, default state is ‘0’. Edit TextInput component to listen onChangeText event to call above React Hook.

1
2
3
4
<TextInput value={number1} 
  onChangeText={text => setNumber1(text)} 
  style={{textAlign:'right'}} 
  keyboardType={'numeric'}></TextInput>

TextInput can display only numbers with numeric settings.

Note

Do the same for the number2.

Calculate a result

Add a onPress event handling for all the Button components.

1
<Button title="  +  " onPress={() => calcSum()}/>

Create calcSum function to calculate and display sum. Program all other buttons too.

Result

Remember edit result TextInput to show the calculation result.

1
2
3
4
5
6
7
8
<View style={styles.textInput}>
  <TextInput 
    placeholder="0" 
    value={result} 
    style={{textAlign:'right'}} 
    editable={false}>
  </TextInput>
</View>

Run and test your app

Test your application. It should work now.

Image 1 Image 2 Image 3

Success

Modify your application UI to look better.

Push to GitLab

Test your application in emulator, take screenshots (add those to your project folder) and commit/push your mobile-exercises repository back to JAMKIT/GitLab. Remember move your exercise/issue ticket from Doing to In Review in Issues Board and write your learning comments to issue comments.