Conflict between babel decorator plugin & react-navigation v5

Yoyo, it's me again, stumbled upon some issues that took away almost my whole day!

So what I did again? to ruin my day? 💀 Used up 3 computer just to test this weird stuff (1 M1 Macbook Air, 1 Windows PC, 1 Normal Macbook Pro)

My initial intention was to start a new RN project with newer Mobx library + minor API integration to test the loading speed vs old MobX + Mobx State Tree library. (because some issue was being found in our app that is causing extreme slowness on Android devices - and after I read this article: https://itnext.io/fairytale-about-performance-in-web-application-ed2bf12627fc, I suspect... yeah it might be the mobx-state-tree library 👿)

And soooo, I started by initiating new React Native project using my M1 Mac (okay things will behave badly because there is a lot incompatiblity issues for M1 mac - 1st)

(eg. yarn install will result in packager not starting properly - cannot find "base" in snapdragon.js - donno what is the root cause lols, so I resort to using npm install..😬)

Then, hand itchy and turn on Hermes (since they said hermes improve performance alot) 😅 - (2nd)

Everything went smoothly at the moment. App able to run in both iOS simulator and Android emulator ~ Hermes Engine is on ~ 😇

Then I proceed to install some libraries to achieve the goal.. and here's the libraries: 

- mobx, mobx-react

- axios (for API), 

- react-navigation v5 (for navigating to another screen, and to test the authentication flows.. but why v5? I was always using v4 up until now, so I decided to try out v5 since v6 is coming out soon..lols 😅) 

In the hope of using decorators again (which we already used in past projects & find it hard to get rid of the sugar coat codes 😆), I proceed to add these two lines into my babel.config.js: (as stated in mobx official documentation: https://mobx.js.org/enabling-decorators.html) 

but I also notice the documentation actually mentioned using decorator syntax is not recommended for newer mobx library... (3rd)

I also integrated reactotron v5 (https://github.com/infinitered/reactotron) into the project in order to: 

- inspect the API response

- use the benchmark tool provided by reactotron - which is basically a timer that count the time taken from Statement A to Statement B (https://github.com/infinitered/reactotron/blob/master/docs/plugin-benchmark.md)

- but why v5 again? Because it is latest version... (4th)

Then I started coding some simple UI to facilitate the whole flow... 

Everything works smooth on the iOS simulator.. as in:

- I can see home screen, 

- I can navigate to another screen

- I can call API using axios linking with mobx actions & displaying data on the screen

- I can see all the logs in Reactotron, I can see the benchmarking stuff also (5th)

- Up until this point, I haven't stop my packager.. (why? this is the key here, will explain soon xD)

Just when I thought this is perfect & I proceed to test on Android Emulator... The app can build normally, can run normally.. but it wont call API at all.. yes, it will not FIRE API, and there is no errors, and nothing happen!

Spent hours trying to figure out what went wrong & found nothing!!! Arghhhhhhhh.. cannot even google because there is NO ERROR.. 

what I did initially of course is to comment codes & shifting the api calls' code to unlink from mobx, and just try to fire the API directly from the screen instead... okay no luck ~ still not working..

And what worried me even it that it cannot even connect to Reactotron (as I need this to use the benchmarking tool and I am lazy to write one myself LOLs), so I can only use Logcat in Android studio to see the logs that I written.. 👀

---- Tada --- Brainstorming time ---

Okay, noticed the 1st, 2nd, 3rd, 4th, 5th standing beside my sentences above? Those are the things I suspect that causing the issues.. lols don't ask me why that's how my brain works

- 1st - will it because my M1 Mac having incompatibility issues? (okay I proceed to test on my Windows PC, of course involving committing to git and cloning down from my windows & run yarn install from fresh, okay not working, okay let's try back npm install, okay still not working, why not go to next point?)

- 2nd - Hermes - will it because I turned on hermes causing all these weird thing coming out? (okay I try to turn off hermes & run ./gradlew clean & rebuild the app, still same !!)

- 3rd - I skipped this to the last resort because I don't want to lose the sugar coat syntax xD which is also why my day is ruined 😡

- 4th - reactotron v5 - will it because I installed v5? and it is breaking? nooooo.. I try to downgrade to v3.6.0 and no luck still lols..

- 5th - okay I'm using PC right now, and it only has android.. and reactotron is not working at all.. going back to M1 mac it is still working in iOS but not Android. So my last resort is to use the normal Macbook Pro, repeat the same process in 1st step, clone and install and test... but this time another issue popped out on iOS simulator.. which is this: 

TypeError: undefiend is not an object (evaluating 'this._callListeners.bind')

It just feels like navigation stuff, and I have no idea why it happen.. lols.. I turned my head back to my M1 Mac, and run again it is still working fine on iOS.. alot of question marks popping out lolsss

Before I copy the error to google, I try to react native init new project again, copying over same codes & it works again.. in New Project? lols.. Just when I thought it is because my 1st point - M1 mac causing the issue... I try to install the app from the new project I just created into my actual iPhone, the issue pop up again !! omg.. How many project I need to init now? 

Okay, then I go google the error and found this:

https://stackoverflow.com/questions/60463057/react-navigation-v5-evaluating-this-calllisteners-bind-when-this-props-navi

In stackoverflow, there is always different suggestion & it is not all working everytime.. so have to try 1 by 1.. one of them say have to remove all the plugins from the babel.config.js.. Which I don want to.. because our old project is using and it is working fine...one of them say need to add in "@babel/plugin-transform-flow-strip-types" into the plugin list and I try as well, it seems not working also

And then I found this:

https://github.com/react-navigation/react-navigation/issues/6154#issuecomment-518606309

OMG this just strike me in my head & rewinding back to all the issues I face just now lols.. That explains why my M1 mac ios simulator is working fine but my normal macbook pro is not working at all.. 

And then new project just works, and not working again when I install to my physical device... It is because I did not kill my packager during the process of init new project until i finish copied over the codes and installing libraries..

Okay, so I decide not to init another new project again.. and try to just remove 1 line from the plugin which is "@babel/plugin-proposal-class-properties" and just remain this 2..

Now ofcourse I will do "yarn start --reset-cache", and the app is back to normal! It is connected to Reactotron, the API call is success on Android & everything is back ! 😵

So why is this not happening in old project? is it because v4 react navigation doesn't have this issue? I have no idea & i donno why.

Sooo.. after all.. where is the time spent?

- mostly running yarn install or npm install

- ios - pod install + clean and rebuild

. android - /gradlew clean & rebuild, 

- initiating new RN project again

- suspecting my hand and fingers ... 👿 (copying wrong stuff / typing wrong codes)

- checking npm version, checking yarn version, checking library version ~ 😆

Yes, this is programmer life 😝 It just works & it just not works everytime !