Introduction
We know that iPhones have the advantage of sharing files and their screen to macOS. So what's a good alternative for Android?
In my opinion, as a developer, the best out-of-the-box choice is the open-source CLI tool called SCRPY β one of the sharpest tools in my shed for mobile app development.
This tutorial will show you how you can mirror your Android device screen to your macOS laptop. Don't like macOS? Not to worry. The tool supports Linux and Windows too.
Furthermore, to complement our newly installed handy dandy tool, I will create a React Native "Hello World" app, deploy it to an Android device, and see our new tool work its magic.
Okay, then. Let's get started!
Prerequisites
This tutorial assumes you are familiar and comfortable navigating, modifying, using the terminal, and executing CLI commands, and to follow along, please have the following software installed on your host machine before moving forward:
- Homebrew
- Node.js
- Android Studio
- Android Device
Note: Make sure Developer Mode is enabled on your Android device. It will allow you to connect to your laptop and much more. If you haven't prepared this step, visit the Android documentation here, then come back when you're ready.
Install scrcpy
First, open your preferred terminal and install the scrpy by typing the following command, like so:
$ brew install scrcpy
For React Native development, install Watchman. This utility keeps track of any changes you make to your files, builds, compiles your code, and immediately deploys those changes on your device without breaking a sweat!
$ brew install watchman
As of this writing, this utility does not run in detached mode, which means you have to open a new tab to continue multitasking.
Go ahead and open a new tab, and now you can launch the screen sharing utility by typing:
$ scrcpy
Explore more CLI combinations by visiting the scrpy Github main page.
If you're a pro with React Native then, you can skip the following steps and enjoy the rest of your day. If not, stick around and make some magic! :)
Create a React Native project
Return to your original project terminal window or tab. Next, type the following command to create a React Native app:
$ npx react-native init SampleProject && cd SampleProject/
Deploy to device
To install and launch your app on the device, type the following command:
$ npx react-native run-android
This command will open an extra tab or window for Metro. More information explaining what it is here, but not to worry, let it do its thing and see your newly created app get installed onto your device like magic!
AND THAT's ABOUT IT!
Not too bad for a hard day's work, ey!? Grabs some coffee, some libations, and bask in your success!
More tutorials on the way. Hang Tight!
Until next time!
Top comments (2)
Nice - thanks.
scrcpytook FOREVER to install. If you have multiple devices attached (e.g., an emulator device and your physical one), find your physical device's serial by runningadb devices, then runscrcpy -s YourDevice'sSerialGreat tip. Thanks!