React-Native - Zeroconf - cannot read property 'scan' of null

Issue

I am new to React-Native and currently trying to make a MQTT Client App, that uses MDNS to discover my MQTT Broker which is running on a ESP8266 D1 mini and uses the MDNS name "mqttbroker".

When I start the development server via npx expo start and click 'a' to Open Android via Android Emulator. The app builds successfully but then displaying:

Render Error 
cannot read property 'scan' of null

Call Stack

scan
...\MyApp\node_modules\react-native-zeroconf\dist\index.js

zeroconf.on$argument_1
...\MyApp\src\screens\HomeScreen.js

Here are the Android Studio logs:

2023-10-31 20:35:32.744 27551-27689 ReactNativeJS           host.exp.exponent                    E  TypeError: Cannot read property 'scan' of null
                                                                                                    
                                                                                                    This error is located at:
                                                                                                        in HomeScreen (created by App)
                                                                                                        in EnsureSingleNavigator
                                                                                                        in BaseNavigationContainer
                                                                                                        in ThemeProvider
                                                                                                        in NavigationContainerInner (created by App)
                                                                                                        in App (created by withDevTools(App))
                                                                                                        in withDevTools(App)
                                                                                                        in RCTView (created by View)
                                                                                                        in View (created by AppContainer)
                                                                                                        in RCTView (created by View)
                                                                                                        in View (created by AppContainer)
                                                                                                        in AppContainer
                                                                                                        in main(RootComponent), js engine: hermes

I couldn't find anything online.

this is my HomeScreen.js file

import React, { useState, useEffect } from "react";
import { View } from "react-native";
import init from "react_native_mqtt";
import AsyncStorage from "@react-native-async-storage/async-storage";
import Zeroconf from "react-native-zeroconf";

import TemperatureGauge from "../components/TemperatureGauge";
import AlertIndicator from "../components/AlertIndicator";

init({
  size: 10000,
  storageBackend: AsyncStorage,
  defaultExpires: 1000 * 3600 * 24,
  enableCache: true,
  reconnect: true, // Enable reconnection
  sync: {},
});

function HomeScreen() {
  // State for temperature and alert
  const [temperature, setTemperature] = useState(0);
  const [alert, setAlert] = useState("");
  
  const zeroconf = new Zeroconf();

  // Discover the MQTT broker using Zeroconf
  zeroconf.scan("mqttbroker._tcp", "local.");

  zeroconf.on("found", (service) => {
    const { addresses, port } = service;

    const options = {
      host: addresses[0], // Use the discovered MQTT broker address
      port: port,
      path: "/mqtt",
      clientId: "id_" + parseInt(Math.random() * 100000),
    };

    const client = new Paho.Client(
      options.host,
      options.port,
      options.path,
      options.clientId
    );

    function onConnect() {
      console.log("Connected to MQTT broker");
      client.subscribe("temperature", { qos: 0 });
      client.subscribe("alert", { qos: 0 });
    }

    function onConnectionLost(responseObject) {
      if (responseObject.errorCode !== 0) {
        console.log("onConnectionLost: " + responseObject.errorMessage);
      }
    }

    function onMessageArrived(message) {
      console.log("onMessageArrived: " + message.payloadString);

      if (message.destinationName === "temperature") {
        setTemperature(parseFloat(message.payloadString));
      } else if (message.destinationName === "alert") {
        setAlert(message.payloadString);
      }
    }

    useEffect(() => {
      client.onConnectionLost = onConnectionLost;
      client.onMessageArrived = onMessageArrived;
      client.connect({ onSuccess: onConnect, useSSL: false, timeout: 3 });

      // Clean up and disconnect from MQTT when the component unmounts
      return () => {
        if (client.isConnected()) {
          client.disconnect();
        }
      };
    }, []);
  });

  return (
    <View>
      <TemperatureGauge temperature={temperature} />
      <AlertIndicator alert={alert} />
    </View>
  );
}

export default HomeScreen;

Solution

The question was already answered here

I saw this before and tried the first way described but forgott to try the second way to solve.

first I tried npx expo prebuild but had some other errors. But creating the project using react-native init myapp installing all dependencies and copy/paste my src folder into the new project works!!!

Answered By - Louis Eiden