Can’t find variable: Symbol in React Native

I really like using React Native, I prefer it to native even though my background is mostly native apps(I’m definitely not a Web Developer). That being said, React Native isn’t without its flaws. One thing that most people encounter when working on projects is random cryptic errors…Below is an example of one and is probably why you are reading this article.

I first came across this red-screen error while working on a 0.42.0 project on Android. Everything ran fine on iOS, so I decided to add in some platform specific code for Android. For some reason this error only seems to appear on Android when you aren’t running in ‘Debug JS Remotely’ mode. Which is really annoying because if you’re like me sometimes you want to work on things without a Chrome tab always having to be in the foreground.

Anyway, this issue seems to be caused by iterating using a non-typical for loop. The catch is that if any of the modules you are using in your project do this, you’ll still see the error. I saw a few ways to fix this when researching online, but the simplest way by far was to first install es6-symbol:

npm install --save es6-symbol

And then just add the following to the top of your entry point(ie.

import 'es6-symbol/implement';

Now if you refresh your project you shouldn’t see the red-screen error anymore — and you can actually get back to work. I hope this short explanation was useful to somebody else. I also recently wrote an article last year about making a simple counter with MobX, feel free to check it out if you’re interested.