This page will help you install and build your first native app using Vue Native.
System Requirements
I have followed all of the steps here and I can successfully run adb on my terminal. When I do expo start, the cli gives me the following messages: But when I click on run on Androidd I get the. GameLoop is truly dedicated to Android gaming, hence the lack of support for other Android apps. But the silver lining is GameLoop is one of the best Android emulators for Android gaming.
- Globally installed node >= 6.0
- Globally installed npm >= 4.0
- Globally installed Expo CLIORReact Native CLI
Setup with Vue Native CLI
Vue Native CLI is the easiest way to start building an application using Vue Native.
Installing Vue Native CLI
Install Vue Native CLI globally with the following command
It allows you to setup a fresh Vue Native app with either Expo or React Native CLI. Each come with their own pros and cons.
For Expo users
Expo was designed to allow developrs to quickly set up and develop React Native apps, without having to configure Xcode or Android Studio. It is most suitable for you if you come from a Web background.
Step 0: Install Expo CLI globally
Step 1: Create a new project using the CLI’s init command
Follow the prompts to create a new directory with the specified name.
NOTE
At this point you will need to manually change the app.json that has been generated inside the new project directory. To make the packager recognize .vue files, a sourceExts field under packagerOpts.
Step 2: Run the app
Now cd into the newly created directory and start the development server.
The above command will run your app in development mode with an interactive prompt. To run it without a prompt, use the –no-interactive flag. Open it in the Expo app on your phone to view it. It will reload if you save edits to your files, and you will see build errors and logs in the terminal.
Alternatively, you can start the app directly on platform simulators.
This works just like npm start, but also attempts to open your app in the iOS Simulator if you’re on a Mac and have it installed.
This works just like npm start, but also attempts to open your app on a connected Android device or emulator. It requires an installation of Android build tools (see the React Native docs for detailed setup).
For React Native CLI users
Using Expo to develop your app comes with the disadvantage that you can’t work with custom native modules beyond React Native’s API, since Expo doesn’t build native code. So if you ever need to work with custom Java or Swift modules, you’ll need to eject the app with expo eject. On the other hand, you can set up your project with React Native CLI, which will allow you to work with such modules from the start.
Step 0: Install React Native CLI globally
Step 1: Create a new project using the CLI’s init command with the --no-expo option
Follow the prompts to create a new directory with the specified name.
Step 2: Run the app
Now cd into the newly created directory and start the development server.
You can also use react-native-cli to start the app with platform specific options. For example
would start the development server and the app on a running Android emulator, while
would start the development server and the app on an iPhone 8 simulator.
Configuring a React Native project for Vue Native
NOTE: React Native <0.59 is no longer supported. If you wish to use Vue Native in a React Native project, you will need to upgrade to at least react-native v0.59.
If you already have a React Native project (either pre-existing or freshly set up) and would like to use Vue Native with it, you can do so with the following steps:
Step 1: Install Vue Native
vue-native-core and vue-native-helper contain code that allow Vue Native components to be instantiated and used at run-time. vue-native-scripts is a library that transpiles .vue single file components and Vue component templates into React components. It is only required as a dev dependency.
Step 2: Configure the React Native Packager
Create vueTransformerPlugin.js in your project’s root directory and specify supported extensions (vue):
Add the following to metro.config.js (make one in your project’s root directory if you don’t have one already):
Step 2.5: (Only for Expo users)
Change the contents of app.json in the root of your project as described here
At this point you’ve successfully set up Vue Native with your React Native app! You can now build truly native apps which are ready to run on iOS and Android devices.
Check out the KitchenSink Vue Native App for an example which demonstrates different usages of Vue Native and NativeBase.
Step 3: Create A Vue File
Remove the Content of the App.js file and rename App.js file with App.vue.
Now copy and paste the below code:
Step 4: Running The App
You can now start the development server as usual. If you use Expo, you can simply run
If you use just React Native, you can also use react-native CLI commands. For example,
the above command will open your app in the Android Emulator if you have properly setup android studio and emulator.
For more details on getting started with React Native, please refer to Getting Started With React Native Docs
Introduction
Mobile first! It became true in the end of 2016 when a mobile web-browsing eventually overtook a desktop one. This brings new challenges for web designers and engineers. Besides the adapted for mobile devices user interface, we also should ensure it works perfectly on a great variety of devices, screens, operation systems and web-browser engines. Several years ago, in a 'desktop era' it was enough to install all the web-browsers on the developer's machine and review a website in them. Nowadays we also need mobile browsers which don't exist on desktop machines. Google Chrome web-browser has an emulation mode, however, it basically resizes the viewport and emulates touch events. It works on the same Chrome's engine even if you 'emulate' iPhone. So it might be enough just to see how a website looks on small screens, but it's never a real emulation.
Fortunately, we don't need to build large farms of mobile devices in our offices. The major mobile platform manufacturers, Apple and Google, provide great developer tools which include the real simulators and emulators of the mobile devices with great configuration possibilities.
In this blog post I'm going to describe step-by-step how to install and configure iOS simulators and Android emulators.
Prerequirements
Since iOS developer tools are only available on macOS, this is the main pre-requirement: you need a Mac to test your website in iOS Simulator. Android developer tools are cross-platform and it's possible to install them on Mac, Windows and Linux.
Install iOS Simulator
iOS Simulator is a part of Xcode. As a Mac user you can download and install it for free from App Store.
It downloads around 5.5 GB, so the installation takes some time depending on your network connection.
After the installation is completed, launch Xcode from the Launchpad, accept license and wait for some additional installations. Finally, you'll see the Xcode welcome window.
Since we are not iOS app developers, we don't need to create any projects there. As web developers all we need is just to run the iOS simulator. Click Xcode in menu bar, Open Developer Tool and Simulator then.
Great news! You've got the new iPhone X for free! Machine learning platform. This is a fully-featured simulation of iOS device. Check Hardware menu for all the capabilities.
Adding more versions and devices in iOS Simulator
You can change both the version of iOS and the device 'hardware' which is running it. Open Device menu item under Hardware in menu bar. There is a list of currently available operating systems. The submenu of the selected operation system is the device to run.
If you need more versions of simulated iOS, return to Xcode, select Preferences.. in the Xcode menu bar item, switch to the Components tab and you'll see a list of all the available iOS versions. Click a small arrow down icon near the simulator name to download the version you need. The simulator images are pretty large, so it will take some time to download and space in your Mac storage.
Is the simulator accurate? Can you trust it? Does it simulates the real device? Once upon a time I debugged a very specific issue. A user reported our webapp crashed the web-browser on just released iPhone 6 Plus. It worked good on any other device except for this iPhone. We didn't have this device in the team, so the issue was really hard to reproduce and fix. We updated Xcode to get the latest versions of the simulators and finally we reproduced the issue on the simulator. So yes, I am convinced that it's pretty accurate since it emulates even crashes and iOS bugs.
Install Android Emulator
As in case with iOS, Android Emulator is a part of Android developer tools. As the first step you need to download Android Studio.
Run Android Studio once it's downloaded and installed. It will ask your a few configuration questions and install some additional components. I suggest to select Custom installation type and check Android Virtual Device. Then continue the installation leaving the default settings and wait for downloading of components.
After it's completed, you'll see the Android Studio welcome window.
Despite the fact we need the emulator only, it's required to start a new Android project there. I just entered Emulator as a project name, add no activity and left the other settings default. Need to wait a few more downloads and installs and get the Android Studio workspace.
No, it's not a finish yet. It might be just early release issues, but just after install from scratch, Android Studio still required to install some missing components: android-26 platform first and Build Tools 26.0.2 later. Just click the Install links and follow the installer screens.
After all activity is done, there is a clean Android Studio workspace. You can find Android emulator under Tools ->Android ->AVD Manager menu.
Android -> AVD Manager menu item' />
It opens Android Virtual Devices (AVD) Manager window. You can notice a warning there: HAXM is not installed. This is Intel Hardware Accelerated Execution Manager, and it's required to run the emulator. However, at the moment it doesn't support automatic installation on macOS High Sierra (10.13), so you need to install it manually. Hopefully, they'll fix it in the future versions.
Open Finder and navigate to ~/Library/Android/sdk/extras/intel/Hardware_Accelerated_Execution_Manager/. There is a file IntelHAXM_6.2.1.dmg. Run it and follow the installer instructions.
During the installation, macOS might show a warning that the kernel extension is blocked by security reasons. Then you need to open Security & Privacy window in the System Preferences and click Allow button. Return back to AVD Manager and click Refresh button in the bottom right corner. The warning message should disappear.
We are good to go! AVD Manager already has a preconfigured Android emulator of the latest Android version. Just double click it.
Here we go! The emulator has control buttons at the right side of the screen. It has a complete set of emulations just like iOS simulator.
Adding more versions and devices in Android Emulator
To get more device configurations and Android versions, click Create Virtual Device button.
There you can select either a ready-to-use device hardware preset or to create your own hardware profile. On the next step you should select the version of Android which you'd like to run on the selected hardware. You'll need to download the older versions of Android before usage. Check out the x86 images to get more versions to use.
Click Next and Finish on the next screen and you'll get the new configured virtual device which is ready to run on the Android Emulator.
Debugging in iOS Simulator
Debugging capabilities are essentials for the engineers. Before we just ran the simulators and emulators and could see and interact with UI. Now we need to get the console, to inspect and to debug.
For iOS simulator it's possible using Safari web-browser. Firstly, ensure that you have Developer menu activated: in Safari menu open Preferences.. and switch to Advanced tab. At the very bottom of the window check Show Develop menu in menu bar. That's it.
Now run the simulator, open a required website in the iOS Safari, then open Safari on your macOS. In the Simulator menu under Develop menu there is an item related to the opened in iOS Safari website.
It opens a fully-featured Safari Web Inspector with the loaded in the simulator website.
Debugging in Android Emulator
Debugging websites in Android emulator web-browser is possible in desktop version of Google Chrome web-browser. However, this feature works starting with Android 4.4. Sad but true.
Run the emulator (Android version 4.4 or above) and open a website in the system web-browser. Then open your desktop Google Chrome and open the Developer Tools. In 'three dots' menu of the developer tools, find More tools and ensure you have Remote devices enabled. It opens the related tab.
If your emulator is up and running, you'll see Android SDK built for x86 - connected in the device list. Click it, find the page you want to debug and then click Inspect.
Finally, it opens a separate window with the fully-featured developer tools with the required page loaded.
Please note that if you’d like to open a website which is running on your local machine server (its address is usually localhost or 127.0.0.1), in the Android emulator this address won’t be valid. The right address you should enter to access the local webserver on your machine is 10.0.2.2.