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 thereact-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
Top comments (0)