How to use react-native-zeroconf with expo

#zeroconf #reactnative #mobile

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!