firebase / firebase/firebase-js-sdk

FR: Firebase Analytics support in Expo

Open
#2,244 33 comments 31 reactions 0 assignees View on GitHub
api: analytics feature request
Dominant language
TypeScript
Stars
5.1k
Forks
1k
Avg merge
2d 21h
Merged PRs (30d)
37

Description

# Update April 2020
Go read this: https://blog.expo.io/using-firebase-analytics-with-expo-222ca84e4d33
# Original Post:

### [REQUIRED] Describe your environment

* Expo version: 33
* Firebase SDK version: 7.1.0
* Firebase Product: analytics

### [REQUIRED] Describe the problem

#### Steps to reproduce:

expo.io

Adding the JS code below to add firebase analytics does not work in expo
```javascript
import * as firebase from "firebase";
import "firebase/analytics";
export const firebaseApp = firebase.initializeApp({
// config here
});
export const firebaseAnalytics = firebaseApp.analytics();
```

Adding some hacks allows it to work a bit better. (The browser polyfill because it tries to add a script tag to head, and the IndexedDB stuff because it assumes that IDBIndex exists. Some of this stuff works in debug mode in expo because the JS runs in Chrome on the host, which makes this particularly annoying to reproduce)

```javascript
import "@expo/browser-polyfill";
import { Platform } from "react-native";
import { SQLite } from "expo-sqlite";
import * as firebase from "firebase";

if (Platform.OS !== "web") {
document.head = document.body;
Object.getPrototypeOf(document.head).setAttribute = document.head.setAttributeNS;
document.head.setAttribute = document.head.setAttributeNS;

// IndexedDB hackery begins
Object.setPrototypeOf =
Object.setPrototypeOf ||
function(obj, proto) {
obj.__proto__ = proto;
return obj;
};
if (global.window.navigator.userAgent === undefined) {
global.window.navigator = { ...global.window.navigator, userAgent: "" };
}
global.window.openDatabase = SQLite.openDatabase;
require("indexeddbshim");
global.shimIndexedDB.__setConfig({ checkOrigin: false });
}

require("firebase/analytics");
export const firebaseApp = firebase.initializeApp({
// config
});
export const firebaseAnalytics = firebaseApp.analytics();
```

But when I log an analytics event I get the following error:
```
[TransactionInactiveError: A request was placed against a transaction which is currently not active, or which is finished]
```

This is as far as I got before giving up.

This would be incredibly useful to have working. Expo is hugely popular, and https://github.com/react-community/create-react-native-app is archived and now points to expo. Right now the only way to use Firebase Analytics with react-native is to eject, which is orders of magnitude more development effort to work with that the expo managed workflow for small teams / startups.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.