How We Built a Cross-Platform IoT App for Seamless WiFi Device Pairing

WiFi powers over 30% of all IoT connections, making it the top choice for connected devices. But with users pairing devices from different platforms, you must optimize IoT WiFi connectivity for a consistent and reliable experience. If you skip that part, you risk frustrating onboarding and costly support.

That was precisely a thing in our recent project, a smart A/C drain line cleaner. The client needed a pairing app with identical functionality across web, iOS, and Android. Building three separate apps would’ve meant three front-end developers and more time, complexity, and cost than the client could justify.

Instead, we suggested a better solution: a unified React codebase. We developed a single web application and embedded it into a React Native wrapper via WebView for iOS and Android. The result was shared logic, lower costs, and a seamless cross-platform experience.

Our cross-platform approach to pairing app development lets the client launch faster, reduce dev costs, and deliver a consistent UX across iOS, Android, and web.

Kostiantyn Oliynyk

Head of IoT at Webbylab

In this post, we’ll discuss how we approached the project — and how you can optimize IoT WiFi connectivity in your own apps.

Connecting A/C cleaners to WiFi on a desktop

Highlights:

• A unified codebase doesn’t mean compromise on native performance. Using React Native + WebView, you can deliver native-like functionality and a consistent UX on all platforms.
• The right architecture simplifies everything: development, maintenance, and onboarding.
• Account for limitations. WiFi connection, camera access, and local permissions require native APIs. Plan this early.

What Do IoT Device Users Expect from WiFi Pairing Apps?

When someone opens your IoT device WiFi pairing app, they’re looking for a simple means to get their device online. Whether it’s a homeowner setting up different sensor types or a technician installing a fleet of devices, users expect pairing to be fast and work on the first try.

As you may have already figured out, the most common pairing app users are:

• Smart home users. These often aren’t tech-savvy. They want the pairing process to guide them clearly, without heavy jargon.
• Technicians/installers. These install multiple devices at once, often in commercial settings. They prioritize speed, reliability, and scalability to work efficiently and minimize return visits.

What unites all of them? The need for fast IoT device onboarding, along with simple, secure, and predictable WiFi pairing.

How to Overcome Native Feature Access Limitations?

When building a cross-platform IoT device management app, ensuring access to native device features is one of the biggest difficulties. It’s especially true for browsers that simply can’t handle such functionality out of the box.

Here are some of the key features your app has to support:

• Camera for scanning QR codes
• Flashlight to help with low-light scanning
• WiFi APIs to connect to local device hotspots
• File system for config uploads or logs
• Local permissions to access these features securely

The catch? Most browsers, especially Safari on iOS, don’t give you access to many of these features. For example, there’s no way to control the flashlight directly from the browser.

So what are your options? You can either:

• Build fully separate native apps for each platform with full feature access, or
• Use a hybrid approach in cross-platform IoT apps with native fallbacks

We chose the second route.

Let’s now look at how different platforms handle key features:

Here’s how we tackled the limitations in the A/C cleaner pairing app:

• WiFi connection. In the mobile app, we used native React Native modules to connect directly to the IoT device’s hotspot. In the browser, this isn’t possible, so we create a guide instructing the user how to connect via system settings manually.
• Camera. On mobile, the app uses the native camera via React Native for QR scanning. In the browser, we fallback to the browser’s camera API, which works well for simple QR scanning.
• WiFi credentials transfer. The mobile app sends WiFi and cloud credentials directly to the device over a local network. On the web, the device hosts a simple admin panel that users can access from the browser to input the same info manually.

Connecting the A/C drain line cleaner to WiFi

This hybrid strategy let us reuse most of the code while still giving users the native power they needed on mobile.

Close

×

Email*

Which Architecture Balances Cost, UX & Native Access Best?

Spoiler alert: we found that React Native + WebView + a unified web app delivered the best balance. But to understand why, let’s look at the bigger picture.

Here are the five most common architectures for end-to-end IoT application development:

Clearly, you can make your IoT device connect anywhere, in different ways. But for our project, a combination of React Native, WebView, and a single web app hit the sweet spot. It allowed us to:

• Adapt to each platform effortlessly, whether mobile or web
• Reuse nearly all of the UI and business logic across platforms
• Deliver a working MVP faster, without compromising on core functionality
• Leverage native features via React Native modules, offering a convenient UX

What Does the Final WiFi Pairing Experience Look Like?

The final WiFi IoT device connectivity flow? Three simple steps: setup and WiFi connection, device installation, and validation. Here’s a more detailed breakdown:

Step 1: Set Up and Connect to WiFi

Our app first tells users to locate their air handler, create a name for it, and install the batteries. It also illustrates the indicators the A/C cleaner may have depending on its pairing status:

Device pairing status

Next, the app provides step-by-step instructions for pairing and WiFi connection.

Device pairing instructions

Pro tip! Build in retry logic for failed connections or platform-specific instructions for iOS/Android WiFi settings in your app.

Step 2: Install Device on Air Handler

Once the initial connection is made, the app gets the A/C cleaner online. A clean progress indicator and loading animation show that the device is connecting.

Progress indicators in WebbyLab’s pairing app

Pro tip! Use progress indicators where relevant, so users know exactly what’s happening at each step.

Step 3: Validate and Install Cartridge

The final step asks the user to validate the device by taking a picture of it. This closes the loop with commercial offers and additional instructions on the A/C cleaner.

Commercial offers in our pairing app

Pro tip! Implement camera fallback logic to make sure users can proceed, even if the photo fails to upload the first time.

How to Avoid Common Pitfalls in IoT Pairing Projects

We’ve seen IoT M2M device connectivity projects go sideways due to missing pieces in planning, testing, and user experience. Here are the tips from WebbyLab to avoid those pitfalls:

• Don’t start with the tech stack — start with UX flows. Mapping the user journey before choosing the stack helps you avoid dead ends (for example, integrating artificial intelligence into IoT systems or other features that won’t work in browsers).
• Validate WebView on real devices early. Simulators won’t catch subtle issues with permissions, navigation, or native module performance. Test on physical iOS and Android phones instead.
• Never hardcode model IDs, tokens, or credentials. It might work for a demo version, but it’ll block scalability, security, and maintenance later. Keep configurations dynamic.
• Design for poor network conditions and offline states. Spotty WiFi is a real problem during device pairing. Build for intermittent connectivity or, even better, include offline modes to ensure users can resume setup if things go wrong.

To tackle connection issues we’ve just discussed like a pro, check out our guide on how to choose IoT connectivity standards.

Ask Yourself: A Quick PM Checklist

Use this to check your pairing flow before shipping:

• Have you tested UX on real iOS and Android devices?
• Can your app fall back gracefully when native access isn’t available?
• Are your error flows just as polished as your happy path?
• Do users get clear progress indicators at every step?
• What happens if WiFi pairing fails midway?
• Can users recover without restarting the entire flow?

Conclusion

To deliver the best IoT access over WiFi, you need a pairing experience that works on different platforms. For the A/C cleaner project, our sweet spot was a React Native + WebView + a unified web app. And it paid off.

Here’s what this approach gave us:

• Faster time-to-market with fewer development resources — 12 months, 12 professionals
• Lower costs by avoiding duplicate builds for iOS, Android, and web
• Consistent, intuitive UX across all user touchpoints

The result? A flexible, scalable foundation that’s easy to maintain. Just imagine: we’ve already rolled out over 200 features and continue to improve the product following B2C and B2B customer needs.