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 ! 

Yarn install stucked 😡

Yooooooo I'm back!!!

Okay it has been a long time since I wrote about stuffs ~ I decided to record not only reactjs/react-native anymore but instead those issues that I faced & how I resolved it. So that in future if I stumbled upon the same issues I can refer back to here!

Everyday in developer life there is weird issues keep coming out. Sometimes it can be solved by stackoverflow / github issues. Sometimes it just can't! How frustrating ✌

My project "yarn install" was always working fine in Windows until today. It just stucked for no reason. I try yarn --verbose & it stucked at "GET" request for some random libraries. 

Search on google & people just recommend to "yarn cahce clean" "rimraf node_modules" "yarn install" again... 

I tried all the stuff including restart PC (yes that's what people do when things cannot be solved LOL)

And it still same! keep stuck at random library "GET" request.

Then I thought it was my SSH isssues. So I open "services" in windows, and my OpenSSH was indeed disabled (by who? god knows lols) Then I re-enabled it and run "ssh-add" it was working..

Then I try yarn install again... and it still stuckeddddddd

Not until I found this: https://github.com/DivanteLtd/open-loyalty/issues/85

Someone pointed out we can disable ipv6 for our adapter... and I tried.. and it worksssssss 😤

It turn out that actually the project has private repositories that hosted on Bitbucket & it uses SSH. Then I google relationship between ipv6 and yarn install & I got this: https://stackoverflow.com/questions/37860219/npm-gets-stuck-on-fetchmetadata-network

Someone explain that SSH by default prefers ipv6 connection...

But why my ipv6 isn't working suddenly? Is it because I moved my pc to another room yesterday and my PC is connected to a Mesh Node & the Mesh Node is now further away from the living room modem? 👀

Anyways, it works & i donno why ~

After my first attempt for yarn install is succeed, I enabled ipv6 back, and it continue to work.... lols.. what is happening?

There are just too many factors that can ruin and waste your daily developer life & you just donno why 😀

Time to get back to work (after spending few hours just to debug why I cannot yarn install 😟)

Intro to React Hooks

Hmmm.. recently React intro a new feature called 'Hooks'

Seems like a great feature..

So I have decided to share this new feature with my colleagues in our Lunch & Learn session :p

And so I created a simple ReactJS website as my presentation and included Hooks feature into it.

Check out this website to learn the basic concept of React Hooks:
http://reacthooks.kyaroru.com/

Lesson learnt from app submission

After 2 weeks of trial and error, I found out some fun facts for app submission to different app stores.. so...here you go :p

For App Store:

Reject reason: Testing Instructions

Prior to submitting this app, I have past exprience on how to submit iOS app in iTunes Connect. I thought it will be really smooth but guess what..I forgot to include the Testing Instructions and my app was rejected 😣

For Google Play Store:

Reject Reason: Your app's short description mentioned other brand

Example: I used "A mini game similar to Minesweeper" in my description and my app was rejected T___T But why there's so many Minesweeper game on Google Play Store? Anyways, inside the app I still put Minesweeper word but Google didnt found out because that was just a bot who rejected my app 😛

For Mac App Store:

Reject reason: We have found that when the user closes the main application window there is no menu item to re-open it.

- If your electron app is Single Window app, you have to Kill the app when "X" button is clicked (not minimize 😮) else it will be rejected and the reason for rejection will be as above. How would I know it is related to menu bar 🤔 ofcourse stack overflow taught me.. 😌

For Microsoft Store:

Reject Reason: The app promotes acquiring software through methods other than the Store

Since the electron version is built after RN.. That's why I have included a link to download on App Store and Google Play in "About" screen. But got rejected. T__T

---

Anyways, besides all these lessons learnt, I also found out that in order to ship an app, that is - from development to production.. it takes a lot more than just coding itself.

I often find myself spending time on

- Designing logo (Something that's totally alien to developer)

- Generating correct logo size & shape (especially the rounded logo on iOS 🤔)

- Reading documentation back and forth on configuration for N times (even the page present the same text)

- Endless trial-and-error to build and sign the app (cert and provisioning issue especially you are not using xcode 😏)

- Submitting multiple builds and still failing (For Microsoft store)

- Writing a proper ReadMe.md 😛 (With credits and demo)

- Generating privacy policy..

- Regenerating screenshots for all platform after you have made changes to the user interface 😮

- and etc.

Coding time itself I would say: just 2 days? 🤔 out of the total of 13 days 🤐

---

Why on earth would I take the suffering path? 😌

Conquer the world with React + ReactNative + Electron

Hi Everyone, I am the Model of the Day - Brownie :p

Recently, I've been so actively researching & trying out new stuff. That is - Publishing my first app (game) to Google Play Store, then Apple's App Store, Mac App Store & lastly Microsoft Store for Windows App.

I knew, my passion is coming back :p The last time I did this (staying up late just to create something totally useless but still feeling accomplished - opps) was like 2 years ago 🤪I even subscribed to the Apple Developer Program for 99 USD just to be able to publish my useless app :o

So what I did was.. (Just descriptions, no tutorial yet ">__<")

For the Mobile platform:
- Created a new empty ReactNative project using `react-native init [ProjectName]`
- Integrate Minesweeper game into the RN project (the code is based on this repo)
- Improved the game logic, restructured some of the redux/redux-saga codes
- Added react-navigation for screen navigation
- Prettified the User Interface & of course included Bear into the game :p
- Gives the game a new name: BearSweeper (ofcourse related to Bear 🤪)
- Integrated Fastlane - App automation tool that allows you to deploy your app to Google Play/App Store directly with just simple scripts
- Integrated CodePush - Allows you to deploy your JavaScript codes on the fly bypassing App Store/Play Store
- Downloaded free trial of Sketch app to design my first logo ever (yes I can be designer as well xD)
- Deploy both Android & iOS apps to respective app stores
- Complete all the necessary metadata info & Submit for review
- Open sourced on Github - BearSweeper :p
- Live on App Store & Google Play 😍

After finished the mobile app version, I thought it might be a good idea to build for desktop version as well. In the meantime, I can get to learn something new too xD.. so here I go ~

For the Desktop platform:
- Create a new empty React app using create-react-app
- Integrate ElectronJS into the React project by referring to this & this & other stackoverflow guides because following just 1 guide usually don't works 🤪
- Managed to get the electron+react app up and running & start to migrate the minesweeper game logic from the RN version to React version
- Rebuilt the User Interface using HTML elements & CSS & Styling
- Integrated react-router to replace react-navigation for navigating between pages
- Reuse the redux part (actions, reducers, sagas) from the RN version - Yes!! that's the beauty of React+Redux..xD
- Login to Microsoft account & guess what, my Publisher account still active!! Got the free Publisher account in college time when I joined a hackathon named "Wowzapp" :p
- Play around with electron-builder & `package.json` for day(s) just to configure stuff to build, bundle & deploy apps on Mac App Store & Microsoft Store.
- Uploaded to both App store & completed the metadata & Submitted for review
- Open sourced on Github as well - bear-sweeper
- Live on Mac App Store & Microsoft Store 😍

And so.. human always greed for more.. Since I've been using React+Electron for the Desktop app, why not I make it into a website as well? LOL (just ignore electron part will do?)

For the Web platform:
- Using same codebase from bear-sweeper, added some minor fixes to cater for mobile browser (because I have OCD in everything)
- Create a new free Heroku app & linked my GitHub repository to the Heroku app
- Set to auto deploy on Git commit
- Login to my GoDaddy account to setup subdomain pointing to my heroku app
- Tada ~ the game is live on my Website too xD

---

So so so... how long does everything takes? From developing to publishing ReactNative app, React+Electron App & Website... Since 23th Dec 2018 (based on my Github first commit for BearSweeper repo) until 5th Jan Today (roughly 2 weeks 🤔)

It's certainly a good and fulfilling 2 weeks of my life because I've learnt a lot from all these crazy days & nights & midnights. (Not working hours ofcourse 😌)

---

Intro to "React with Bear" 😛

Welcome to my blog 🐻I am Carol from Malaysia - Front End Developer (though i wish to learn backend too ">__<"). I love bear(s) a lot that's why the blog name itself is self-explanatory.

Why "React with Bear" ? Actually the intention of starting this blog is to serve as "front end tech guide" (opps I only know frontend ">__<") for other beginner/experienced developers who lost their way out but right now my "expertise" is mostly on React Native & ReactJS so let's just name it "React with Bear" xD

I love to record down stuff so that I can always refer back in future when myself or others face similar issues. In my company, I wrote wiki for projects that I worked on so when a new member joins, he/she can refer to the wiki to setup & run the project instantly xD

I recall when I first joined, there's no documentation/wikis for me to refer. I have to ask around and disturb others in order to get started, so I took the initiative to pave a less suffering road to the future member :p

That's the same thing I would like to do here - Pave a less suffering road for the next great developer to focus on creating the next great app instead of stuck in a black hole researching how this works/how that works & end up giving up :p

However, the things that I going to share will be random and not limited to just React/React Native :p Stay tuned!
---

**Note: I am not 100% correct and everything I share will be solely based on my personal experience :p