Fast Refresh is not working when I add the DeviceEventEmitter.addListener inside useEffect

[GabrielMobileQD]

Issue

I was using normally the Fast Refresh of the React Native. But when I installed the "react-native-settings" and added the code below:

useEffect(() => {
        DeviceEventEmitter.addListener(
            RNSettings.GPS_PROVIDER_EVENT,
            _handleGPSProviderEvent,
        );
        return () => {
            DeviceEventEmitter.removeAllListeners();
        };
    }, []);
  const _handleGPSProviderEvent = () => {
        if ([RNSettings.LOCATION_SETTING] === RNSettings.DISABLED) {
            console.log('Location was disabled');
        }
    };

To set the listener and check when the location is enabled or disabled by the user, the Fast Refresh, out of the blue, stopped working. But when I comment this code, the Fast Refresh works again. How could I use this code with the Fast Refresh working?

Project Files

iOS

Click To Expand

ios/Podfile:

• I'm not using Pods
• I'm using Pods and my Podfile looks like:

# N/A

AppDelegate.m:

// N/A

---

Android

Click To Expand

android/build.gradle:

// N/A

android/app/build.gradle:

// N/A

android/settings.gradle:

// N/A

MainApplication.java:

package com.querolog;
import io.rumors.reactnativesettings.RNSettingsPackage;
import io.rumors.reactnativesettings.receivers.GpsLocationReceiver;
import io.rumors.reactnativesettings.receivers.AirplaneModeReceiver;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
import android.content.IntentFilter;

import org.devio.rn.splashscreen.SplashScreen;
import android.os.Bundle;

public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */

  @Override
   protected void onCreate(Bundle savedInstanceState) {
       SplashScreen.show(this);
      registerReceiver(new GpsLocationReceiver(), new IntentFilter("android.location.PROVIDERS_CHANGED"));
      registerReceiver(new AirplaneModeReceiver(), new IntentFilter("android.intent.action.AIRPLANE_MODE"));
       super.onCreate(savedInstanceState);
  }

  @Override
  protected String getMainComponentName() {
    return "querolog";
  }
  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
        return new
          RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }
}

AndroidManifest.xml:

<!-- N/A -->

---

Environment

Click To Expand

react-native info output:

System:
    OS: macOS 11.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 47.24 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.7.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.3, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 23, 27, 28, 29
      Build Tools: 27.0.3, 28.0.3, 29.0.2, 30.0.0, 30.0.3
      System Images: android-19 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 12.3/12C33 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_252 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.4 => 0.63.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

• Platform that you're experiencing the issue on:
  • [ x] iOS
  • [ x] Android

[alanflpns]

Anyone found the solution for this problem? It's happening with me too

[guest2acute]

Please replace your code with this.

useEffect(() => {
       let listner = DeviceEventEmitter.addListener(
            RNSettings.GPS_PROVIDER_EVENT,
            _handleGPSProviderEvent,
        );
        return () => {
            listner.remove();
        };
    }, []);