React-native: Firebase doesn't work with RN 0.22.0

[milasevicius]

Hello, I am getting
Attempt to invoke virtual method 'java.lang.Object android.util.SparseArray.get(int)' on a null object reference.
Package.json: "firebase": "^2.4.1", "react": "^0.14.7", "react-native": "^0.22.0"

[holyxiaoxin]

I am getting the same error. I realise that I only get this error when I'm invoking:
this.ref = new Firebase("https://somevalidapp.firebaseio.com/");

This was working at v0.21 prior to v0.22 upgrade.

[holyxiaoxin]

I have checked that ~v0.21 does not cause this. ^v0.22 indeed causes this.

[asubota]

same here
"firebase": "^2.4.1", "react": "^0.14.7", "react-native": "^0.22.0"

[abeisgoat]

@jwngr - any thoughts on this?

[jwngr]

No, but @mikelehen is probably a better person to ask.

Could either of you provide a minimal repro? Or is calling new Firebase anywhere in your code literally all you need to do make this happen?

[holyxiaoxin]

Commening out new Firebase works alright. Adding it back in will throw the null object reference error.

[mikelehen]

Anybody have a stacktrace for the error handy by chance?

[phonghho]

Not sure if it's related, but this is what happens when I just import firebase into my react native project using 0.22

[mkonicek]

@mikelehen Would it be possible for you to set up CI that tests against every commit made to React Native master? That way you could ping us quickly when there's a commit that breaks the Firebase integration, and since we'd have a single commit it should be easy to fix.

Alternatively, do you test the React Native RC releases as soon as they come out?

[holyxiaoxin]

@mkonicek do you mean this?

[hiradyazdan]

I have exactly the same error on 0.22 like @phonghho. However, I setup a complete new project with 0.21 as well and the moment i import firebase, it throws the same error.

[hiradyazdan]

I have tested earlier versions of react-native. Surprisingly, the issue doesn't occur on 0.18 and 0.19, but since 0.20 I can repro the issue.

[jwngr]

Possibly related to this Google Groups thread on issues with Firebase not being strict mode compatible...

[keeth]

This is related to babel-preset-react-native 1.5.3 enabling strict mode.

My workaround is:

echo node_modules/firebase/lib/firebase-web.js > .babelignore

(restart packager, etc)

[satya164]

@keeth Can you create a new issue regarding a custom config not overriding the default one?

As mentioned in https://github.com/facebook/react-native/issues/6566#issuecomment-200485343 , the correct way to fix this is by adding node_modules/firebase/ to your .babelignore.

We should eventually ship a pre-built version of React Native and avoid transforming files under node_modules so that we don't break third party code. cc @martinbigio

[satya164]

@facebook-github-bot answered

[keeth]

@satya164 yep, just filed #6611

[facebook-github-bot]

Closing this issue as @satya164 says the question asked has been answered. Please help us by asking questions on StackOverflow. StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

[justinr1234]

@satya164 - @keeth workaround doesn't work for me. Still broken.

[satya164]

You need to run the packager with --reset-cache after that. Otherwise it won't work.

[justinr1234]

@satya164 I have done that, no dice. I've restarted the packager, deleted all xcode caches, tried putting the ignore in my babelrc under "ignore", tried just ignore of "firebase-web.js" ... running out of ideas

[jwngr]

The .babelignore file works very similar to the .gitignore file. You should make sure that the paths you put in the .babelignore file are relative paths from the .babelignore file. So, if your node_modules/ directory is in the same directory of your .babelignore file and node_modules/firebase exists, then adding node_modules/firebase should solve your problem. You also need to make sure the .babelignore file is actually getting picked up by Babel. Make sure you aren't overriding it anywhere and that it is at the directory where you are doing your build.

[justinr1234]

@jwngr verified all that, barring anything I'm missing. I double checked by putting nonsense in my file and it threw a compilation error in the react packager.

The only thing I might be confused by is what happens with doing "bundle" instead of the packager server? I'm bundling the file for embedding into my iOS app.

[satya164]

@justinr1234 Unfortunately, with the bundler you need to use --resetCache

[justinr1234]

@satya164 No luck modifying the react-native-xcode.sh

$NODE_BINARY "$REACT_NATIVE_DIR/local-cli/cli.js" bundle \
  --entry-file index.ios.js \
  --platform ios \
  --resetCache \
  --dev $DEV \
  --bundle-output "$DEST/main.jsbundle" \
  --assets-dest "$DEST"

$NODE_BINARY "$REACT_NATIVE_DIR/local-cli/cli.js" bundle \
  --entry-file index.ios.js \
  --platform ios \
  --reset-cache \
  --dev $DEV \
  --bundle-output "$DEST/main.jsbundle" \
  --assets-dest "$DEST"

[satya164]

@justinr1234 Pretty sure it's caching issue. @martinbigio Any idea here?

[justinr1234]

@satya164 Where would the "cache" be stored? I can manually go delete it.

Also searched my whole system for anything related to .jsbundle and removed it before building.

I'm also running this manually with gulp before trying to build in xcode:

gulp.task('clear-react-packager-cache', () => {
  // Clear react-packager cache
  const tempDir = os.tmpdir();

  const cacheFiles = fs.readdirSync(tempDir).filter(
    fileName => fileName.indexOf('react-packager-cache') === 0
  );

  cacheFiles.forEach(cacheFile => {
    const cacheFilePath = path.join(tempDir, cacheFile);
    fs.unlinkSync(cacheFilePath);
    console.log('Deleted cache: ', cacheFilePath);
  });

  if (!cacheFiles.length) {
    console.log('No cache files found!');
  }
});

[satya164]

@justinr1234 It used to be in $TMPDIR/react*, but not sure if it's still the case.

[justinr1234]

Tried the aforementioned xcode bundler change, and the following:

watchman watch-del-all
node_modules/react-native/packager/packager.sh --reset-cache
rm -fr $TMPDIR/react-*

[lneves12]

I tried everything said in this issue and still having the same problem. It runs well on IOS but fails on Android.

[mikelehen]

Thanks for the callstack @lneves12! Very helpful. It looks to me like that was a bug in react native fixed by this commit.

Can you try updating your react-native dependency to 0.23.0-rc1 which I think has the fix? Thanks!

[lneves12]

This issue seems to be fixed with the version 0.23.0-rc1 :+1: Thanks :)

[mikelehen]

Great to hear! Thanks for confirming.

[dcflow]

Hey @mikelehen,
So I changed the source code directly on node_modules/react-native but the error still persist.
Maybe because of this #4698.

[mikelehen]

Hey @rsflow, this issue has two different problems being discussed. I'm guessing you're hitting the property 'navigator' of undefined one? Can you try keeth's fix above? https://github.com/facebook/react-native/issues/6566#issuecomment-200485343

[giacomorebonato]

For me the error is still present in 0.23.0-rc1

[mikelehen]

@giacomorebonato Which error? This issue has conflated two separate problems.

[dcflow]

Hey @mikelehen, no I'm getting the Timing error the one that @lneves12 had.

[giacomorebonato]

This is the error and my dependencies

"firebase": "^2.4.1",  
"react": "^0.14.7",  
"react-native": "^0.23.0-rc1",  
"react-native-router-flux": "^3.2.3",  
"realm": "^0.11.0",  
"tcomb-form-native": "^0.4.0"`  

[mikelehen]

@rsflow Did you run "npm install" after updating the dependency in your package.json?

@giacomorebonato Did you try keeth's fix above? https://github.com/facebook/react-native/issues/6566#issuecomment-200485343

[dcflow]

@mikelehen I changed the file directly on the node_modules/react-native directory, I didn't change the RN version.

[giacomorebonato]

@mikelehen same error after creating babelignore. I am available for more test

[hmm29]

does firebase still not work with RN 0.22.2?

[dlidstrom]

Works fine with 0.23.0-rc1.

[gojohnnygo]

@rsflow / @giacomorebonato - Not sure if you guys are still having issues, but this did the trick for me.

1. react-native init MyProject
2. cd MyProject
3. npm uninstall react-native --save
4. npm install [email protected] --save
5. npm install firebase --save
6. Add const Firebase = require('firebase'); to index.ios.js
7. Run project from Xcode

[dcflow]

Hey @gojohnnygo thanks for your help. I did change my node_modules/react-native files manually but the error is the same .. I will update it to 23 now and probably it will work.

[justinr1234]

@gojohnnygo Worked for me, but now my SideMenu component won't work :cry: ... but that's another issue to solve :smile: thanks for your help!

[grabbou]

@facebook-github-bot answered

Looks like most of the issues has been resolved. If you encounter similar problem, please try the steps above outlined by the community and in case none of them works for you - let us know to reopen :)

[mkonicek]

Ah, it indeed looks like the bot is not working!

[mkonicek]

@facebook-github-bot answered

[steida]

Should be closed imho.

[jean9696]

Hi, sorry to reopen an old issue but I have the exact same problem.. I tried everything said above but still the same issue... I'm on windows for android, I'm using redux... Here are my dependencies :

 "dependencies": {
    "eslint": "^3.19.0",
    "firebase": "^4.1.1",
    "lodash": "^4.17.4",
    "react": "16.0.0-alpha.6",
    "react-native": "^0.44.2",
    "react-native-android-back-button": "^0.3.0",
    "react-native-barcodescanner": "^3.1.1",
    "react-native-material-ui": "^1.11.1",
    "react-native-vector-icons": "^4.1.1",
    "react-navigation": "^1.0.0-beta.11",
    "react-redux": "^5.0.5",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-eslint": "^6.1.2",
    "babel-jest": "20.0.3",
    "babel-preset-react-native": "1.9.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^15.0.1",
    "eslint-plugin-import": "^2.3.0",
    "eslint-plugin-jsx-a11y": "^5.0.3",
    "eslint-plugin-react": "^7.0.1",
    "eslint-plugin-react-native": "^2.3.2",
    "jest": "20.0.4",
    "react-test-renderer": "16.0.0-alpha.6",
    "remote-redux-devtools": "0.5.0"
  },

[mikelehen]

FYI- This issue is a year old, has some 40+ comments on it, and was used to discuss at least 2 completely separate issues. You'll have much better luck opening a new issue with specific repro steps and error details. Feel free to cc me on it so I see it.