DEV Community


Posted on

Setting up your First React Native Application

React Native is a Javascript framework which uses the full power of react and Javascript to make amazing Native applications. React Native compiles Javascript code to Native code, so components like Text, Button, View e.t.c which are used in React Native will be compiled to the Native code of each platform (Android or IOS) .

There are two ways of building React Native applications, The easy way using Expo or the React Native CLI way. This article will concentrate on building React Native applications using Expo.

Expo is a framework or platform which assists us to build, deploy and view our application on android, IOS or Web from the same Javascript/Typescript codebase. it works for universal React applications.

Alright, enough chit-chat, let's get started with setting our React Native Application. You'll need the following Prerequisites to start.

  • [ ] Node.Js Installed (install it via here)
  • [ ] Code Editor (Preferably VS code)
  • [ ] Internet connection
  • [ ] A can-do attitude

After checking each of these off, let's get started.

Step 1

Open your project directory on VS Code and install the Expo CLI by typing in your terminal:

npm install --global expo-cli
Enter fullscreen mode Exit fullscreen mode

Step 2

Create a new expo project, let's call it first-rn

expo init first-rn
Enter fullscreen mode Exit fullscreen mode

Step 3

install Expo on your phone via the play store/ app store.

Step 4

Once the expo project has been created type in the following to launch the application

// Change directory
cd first-rn

// Start the application 
npm start
Enter fullscreen mode Exit fullscreen mode

Step 5

After installing the expo app on your phone and after the expo app has launched, you'll see a barcode, scan the barcode with your phone camera.

Note: On IOS you'll have to use the barcode scanner that comes with the expo app.

You should see something like this on your phone if you’ve followed each step successfully.

Expo Hello world Screenshot

Congratulations!! You are done, you’ve successfully set up your React Native application. Now, go on ahead and make the next big thing, I can’t wait to see what you build. 😊

Top comments (0)