React Native is quite a famous library for making cross-mobile applications. Today, we installed React Native using the Expo client. Through the Expo client, we can run our mobile app into our actual devices, not in Simulators or Emulators.
So we can test the runtime of our application on our real Android or iOS devices. For this to work, the first requirement is 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
To set up react native using expo, configure Expo XDE on the Mac, install the Expo client on 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 do not have robust internet connectivity, 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 in 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 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 for Expo XDE.
Now, we need to register ourselves for 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 device.
You can register at this link. Also, do not forget to verify your email; you are good to go. You must also sign in to your Expo XDE application, already opened on your Mac, with the recently registered email and password.
Step 3: Create a new Project.
After logging in, you need to create a new project. So the dialog box looks like this.
Here, you need to choose a blank view, and also you need to give 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.
- Publish
- Share
- Device
Click to share, and you can see this.
We need to scan this Barcode from our mobile app, as scanning is already available. You can also type your email or phone number to send a link. I am doing this using Barcode.
After scanning, we see that the desktop expo client starts the development server and compiles our javascript bundle. After the completion, you can see a Mac Expo XDE like this.
Here, you might face a problem like the one below.
I 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, you can see on your mobile that we know the app is running.
You can see it on both Android and iOS devices. You can also open your project in your editor and modify some code; depending on your net speed, it will reflect on your mobile devices. Cool!!! Very Cool.
Now, when you exit all the applications and go for the next day, select the existing project and start the server, and you are good to go. First, of course, you need to choose the mobile device project via the expo client. So it is straightforward.
This kind of development is convenient when dealing with a complex project using React Native animations. So we can test our progress instantly.
You can find the link for expo clients for Android and iOS devices here.
For iOS: https://itunes.apple.com/app/apple-store/id982107779
For Android: https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www
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 Android or iOS devices.
You need to configure both devices using XCode or Android Studio, and you can see all of your developments inside your virtual machines.
So that is it for Setup React Native Using Expo client.
