Setting up

For our React Native version of TaskFlow, we will create a new repository. There are different ways to setup a React Native project. The quickest way is to use Expo Go. You only need a recent version of Node.js and a phone or emulator to get started. Another way to build a React Native project, is by using the React Native CLI. This requires Xcode and Android Studio. As this installation is a little more complex and time-consuming, we'll choose Expo Go for now.

First go to the desired folder in your terminal and run:

npx create-expo-app TeamAwesomeMobile

Now open the created folder in your IDE.

In order to run your application on your mobile phone, you should install the Expo Go app. Make sure that your phone and MacBook are connected to the same Wi-Fi network. Sign up for an Expo Go account as well. Then run in your terminal:

npx expo start

Scan the QR code with your phone, and if everything went well, you will see the text written in you App.js rendered on your phone!

Rendering a React Native project on a simulator

It is also possible to run a React Native project on a simulator device. To do this, you need to follow the React Native CLI Quickstart guide. For target OS Android, follow the instructions for the following topics: Node & Watchman, Java Development Kit, Android development environment and Preparing the Android device. For target OS iOS, follow the instructions for the following topics: everything up until Creating a new application.

If everything went well, you can now run your project in both and iOS and an Android simulator. Look in your terminal where you scanned the QR code, and you will also see options to open Android or open iOS simulator. Test if everything went well!