Develop A Cross-Platform Mobile App With React Native!

3 min readNov 18, 2021

Build Your First Mobile Application for IOS and Android at the same time!

What is React Native?

React Native is an open-source mobile application framework created by Facebook, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use React’s framework along with native platform capabilities. What makes React Native so special is being able to develop in one programming language compatible with various devices.

React Native allows you to develop applications compatible with both IOS and Android

Step 1 : Install Node.js on your computer

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
Node.js lets developers use JavaScript to write command line tools and for server-side scripting — running scripts server-side to produce dynamic web page content before the page is sent to the user’s web browser.

Go to the official Node.js website, download the appropriate installation file based on your system and install it.

With the installation of Node.js, you can add npm packages to your projects and use various components/features.

npm is a package manager for the JavaScript programming language.
It is also the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry. The registry is accessed via the client, and the available packages can be browsed and searched via the npm website.

Step 2 : Install Expo

Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.

Expo is an app that allows you to develop and deploy quickly to see the results of your code

Search for Expo (Expo Go for Ios devices) in the application marketplace on your phone. Once you find it, download and install it.

You can also reach it from Expo’s offical website and find the right application depending on your phone’s operating system.

Step 3 : Getting Off The Ground!

Open your command window on your computer and run the commands below respectively.

First Command: Install the Expo package to your environment with npm package manager

npm install --global expo-cli

Second Command: Create a template project

expo init my-project

After the second command, you should choose a template type. You can select blank or other options like TypeScript. Use the arrow keys and Enter for your choice:

Third Command: Go to the folder of your brand-new project

cd my-app

Last Command: Start your project

npm start

After the last command, a Qr code will appear on a new browser window and on your command window.

Open Expo/Expo Go on your phone and scan that Qr code.

You will see that Expo/Expo Go is deploying your code to your phone.

Edit the template code on your project directory, the changes will also update the app running on your phone immediately. You can use any IDE(For example: Visual Studio Code) to change the code.

Everything is ready now, enjoy coding your ideas!