DEV Community: Big Foot Forward

How to use react-native-zeroconf with expo

Tanner Satchwell — Thu, 19 Sep 2024 04:47:08 +0000

The Problem

The react-native-zeroconf npm package is great! Just a few small caveats, there's no documentation on how to get it up and running on expo. Even if you know how to modify the Android manifest and the iOS info.plist, there's a few crucial steps missing for both platforms. Lets walk through it.

TLDR;

Modify the Android manifest and the iOS info.plist as instructed in the react-native-zeroconf README.md
For iOS, request the Multicast Networking Entitlement, and enable it in your "AppID Configuration."
For Android, make sure usesCleartextTraffic is set to true in the manifest.

Expo Setup

Fairly simple, after install react-native-zeroconf into your project, you'll need to modify your app.json file as follows:

{
  "expo": {
    ...
    "ios": {
      ...
      "infoPlist": {
        "NSBonjourServices": ["[YOUR_SERVICE]"],
        "NSLocalNetworkUsageDescription": "Allow [YOUR APP] to discover devices on the local network."
      }
    },
    "android": {
      ...
      "permissions": [
        "android.permission.ACCESS_WIFI_STATE",
        "android.permission.ACCESS_NETWORK_STATE",
        "android.permission.CHANGE_WIFI_MULTICAST_STATE",
        "android.permission.INTERNET"
      ]
    }
  }
}

Need some help knowing what YOUR_SERVICE is? Run this command in your terminal: dns-sd -B _services._dns-sd._udp and find what you want to scan for. YOUR_SERVICE = Instance Name.Service Type (trim .local. off the end)

For example, I wanted to scan for wled controllers on my network. The instance name was _wled and the service type was _tcp.local. so my final service that I added to app.json was: _wled._tcp

iOS Additional Setup

For iOS to scan the local network, you need the "Multicast Networking Entitlement." You can request it from apple here: Multicast Networking Entitlement Request

It took about a week for me to get approved, but once it's approved, you'll need to do the following:

Add the entitlement to your app. Go to Certificates, Identifiers & Profiles and choose which identifier needs the entitlement. Go to "Additional Capabilities" and check the box next to "Multicast Networking." Hit save.
Add the entitlement to your app.json like this:

{
  "expo": {
    ...
    "ios": {
      ...
      "entitlements": {
        "com.apple.developer.networking.multicast": true
      }
    }
  }
}

Android Additional Setup

Android needs usesCleartextTraffic set to true in the manifest. You can't edit this part of the manifest in app.json unless you install the expo-build-properties package. Once you've installed it (npm), just add it as a plugin like this:

{
  "expo": {
    ...
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "usesCleartextTraffic": true
          }
        }
      ]
    ]
  }
}

Conclusion

That's it! You'll still need to implement your actual usage of react-native-zeroconf based on your situation, but these were the "paperwork" hurdles I ran into. Happy coding!

References

https://www.npmjs.com/package/react-native-zeroconf
https://www.npmjs.com/package/expo-build-properties

How to create a custom VSCode theme

Tanner Satchwell — Fri, 26 Apr 2024 16:16:29 +0000

The Plan

Okay, here's the deal. You're a coder, and you LIVE in your IDE. With so much time spent there, you want your colors to be exactly what you want! I hope to walk you step by step through the process of creating and publishing your own theme to the VSCode marketplace. Who cares if you're the only one who installs it!

Prerequisites

You'll need a few things to get started. A few of these are obvious...bear with me.

The internet
Visual Studio Code
Node.js
NPM (if you have node installed, you probably have this)
A browser
A Microsoft account
An Azure DevOps account (I'll walk you through how to set this up below)

Software

Install the needed software

npm install -g yo generator-code vsce

Create The Theme

Navigate to where you want your theme directory to live run yo code and choose the "New Color Theme" option, followed by "No, start fresh" then follow the remaining prompts to name and create your new theme. You can now open the project and edit the themes/your-theme-name.json file.

Theme Tips

If you have an existing theme you use that is "almost" right, you can generate a json file to work with by going to the command pallete in VSCode CMD + SHIFT + P and choosing "Developer: Generate Color Theme From Current Settings"
You can find what certain color scopes are by going to the command pallete in VSCode CMD + SHIFT + P and choosing "Developer: Inspect Editor Tokens and Scopes" and selecting the text you want to change.

Accounts

We'll need to set up a couple accounts to prep for publishing your theme.

Azure DevOps

Go to dev.azure.com
Click "Start free" and login with your microsoft account.
Name your DevOps organization
Click on the user settings icon in the top right, and choose "Personal access tokens" from the dropdown.
Create a new access token

Name - Name the token whatever you want
Organization - Choose "All accessible organizations" from the dropdown
Expiration - Choose "Custom defined" and choose a date, I chose a date as far in the future as I could (a year).
At the bottom of the popup click "Show all scopes" and check the "Manage" box in the "Marketplace" section
Create the access token
Copy the token and save it somewhere safe
Note: You may not see the token listed after you create it. This is because the filter at the top is likely set to your organization. Click the access scope dropdown and choose "All accessible organizations" and your token should show up.

Visual Studio Marketplace

Go to marketplace.visualstudio.com/manage
Create a publisher

Fill out the name field (id should automatically be generated based on the name)
Name and id are the only required fields, but fill out the others as desired.
Hit "Create" and prove you aren't a robot with the popup image challenge.

Final Prep

We're almost there, we just need to tweak a few things in the project to match the accounts you created above.

Open package.json in your theme project and add the following

"package": "YourVSMarketplaceID",
"keywords": [
  "some",
  "descriptive",
  "keywords",
],

Publishing

At this point all the hard stuff is done. You can now publish you theme. First login to vsce with the publisher id from Visual Studio Marketplace, and the personal access token from Azure DevOps. Then you can package and publish your extension!

vsce login your_publisher_id
vsce package
vsce publish

References / Examples

vscode-material-icon-theme
monospace-theme
codercoder video tutorial