Screen Sharing Android Devices on macOS + React Native Demo

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!