Latest Code Tutorials

How To Setup React Native Using Expo

How To Setup React Native Using Expo is the main topic, we will discuss today. React Native is quite a famous library to make cross mobile applications. Today, we install React Native using Expo client. Through Expo client, we can run our mobile app into our actual devices and not in Simulators or Emulators.

So we can test runtime our application into our real Android or iOS devices. For this to work, the first requirement is we do need a high-speed connection otherwise it won’t work or throw an error like Switched to a LAN URL because the tunnel appears to be down.

Only devices in the same network can access the app. You can restart the project to try reconnecting.

How To Setup React Native Using Expo

In this post, we will configure Expo XDE into the Mac as well as install Expo client on to the Android and iOS devices and then connect through our development server.

So when we change anything in our React Native code, it will reload our actual devices’ application, and we can see an instant output of our code into our actual devices and not in any emulators or simulators.

Although if you have not robust internet connectivity, then you can always go for emulators or simulators.

Okay, now our first step is to install Expo XDE on Mac. I am using Mac so I will show you how you can install it on a mac. There is already instruction about Windows installation on their documentation.

#Step 1: Install Expo XDE on Mac

Go to this link. Here you can find Expo XDE based on your PC Operating System. Mine is Mac so that I will install the DMG file. It will take some minutes to install it.

Okay, after downloading, we need to install it on our Mac and move the Expo XDE to our Applications.

Then launch the Expo XDE.

#Step 2: Register yourself to Expo XDE.

Now, we need to register our self to that application. So next time we need to log in to our account, and we can start playing around with our app on any Android or iOS devices.

You can register on this link. Also, do not forget to verify your email and you are good to go.

Now, you also need to sign in to your Expo XDE application already opened in your mac with the recently registered email and password.

#Step 3: Create a new Project.

After logged in, you need to create a new project. So the dialog box looks like this.

How To Setup React Native Using Expo

Here, you need to choose a blank view, and also you need to give you a project name and its path. So at that path original React Native project is created.

Okay, now you need to open your mobile expo app and also log in with the same credentials as we have applied on the desktop app and log in to our expo app.

Now, switch to the desktop expo xde and upper right corner there are three buttons.

  1. Publish
  2. Share
  3. Device

Click to share, and you can see like this.

React Native Expo Tutorial With Example

Now, we need to scan this barcode from our mobile app as there is already the option of scanning. You can also type your email or phone number to send a link. I am doing this using Barcode.

After scanning, we can see in the desktop expo client starts the development server and compile our javascript bundle. After the completion, you can see a Mac Expo XDE like this.

React Native Expo App Tutorial

Here, you might face a problem like below.

Switched to a LAN URL because the tunnel appears to be down. Only devices in the same network can access the app. You can restart the project to try reconnecting.

The problem is not with any configurations, but with the Slow Internet Connectivity. You can always restart the server to see if now everything works great.

If everything works great, then you can see on your mobile that we know the app is running. You can see on both Android or iOS devices. You can also open your project in your editor and modify some code and depend on your net speed, it will reflect on your mobile devices. Cool!!! Very Cool.

Now, when you exit all of the applications and go for the next day, just select the existing project and start the server, and you are good to go, of course, you need to select the project from the mobile device as well via expo client. So it is very easy.

This kind of development is convenient when we are dealing with a complex project which uses React Native animations. So we can test our progress instantly.

You can find the link for expo clients for both Android and iOS devices here.

For iOS:

For Android:

You can also run the Emulator or Simulator for React Native projects.

To use that, we need to hit the Device button at the upper right corner inside our Expo XDE mac application and in that you need to choose for Android or iOS devices.

You need to configure both the devices using XCode or Android Studio, and you can see all of your developments inside your virtual devices.

So that is it for How To Setup React Native Using Expo client.

Recommended Posts

React Native Swipe Components Example

React Native Drawer Navigator Example

React Native Tab View Example

React Native Redux Example

React Native Modal Example

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.