How can I use firebase emulators with my react-native app?

Question

I setup my react-native app and connected to firebase using the following article: https://firebase.googleblog.com/2016/01/the-beginners-guide-to-react-native-and_84.html .

I wanted to test my changes by running firebase services in emulator. Can anyone guide me how can I do it ?

--Edit--

I followed the steps listed in https://firebase.google.com/docs/emulator-suite/connect_and_prototype and added the following snippet in config.js file:

var db = firebase.firestore();

if (location.hostname === "localhost") {
  db.useEmulator("localhost", 8080);
}

After executing the app, I. got the following errors:

ReferenceError: Can't find variable: location
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

Answer 1

Using location is not going to work in React Native as there's no global window variable to read that from. You'll need some other way to determine whether you want to access the emulators, or the cloud hosted project.

If you have no better condition, you can simply toggle it in your code manually:

if (true) {
  db.useEmulator("localhost", 8080);
}