Devlog for Days 7 to 10 of my #100DaysOfCode and #Devember coding challenge.

Checklist

Daily Requirements

• 1 hour of coding #100DaysOfCode #Devember
• Devlog #Devember

Extra Tasks

• self study following my own syllabus
• startup or personal project work
• job related tasks
• get involved with Open Source

Progress Report

• I couldn’t do much work during my vacation as I got so sick that I had to visit the hospital. I got prescribed a ton of meds and an antibiotic. However, no diagnosis. I later found out this was strep throat after returning to the US. I tried my best to push through and eventually got some work done once the medicine started working.
• Updated my project configuration to use prettier and eslint.
• I then began work on integrating react-navigation, redux, and redux-persist. I spent a full day on this before my vacation ended.
• Once my vacation ended, I migrated my workspace back to macOS (my main work computer). This took 2.5 days (20+ hours) as I ran into several issues trying to get react-native-maps, react-native-mapbox-gl, and react-native-background-geolocation working nicely together. Turns out that there were a few key issues that I had to work through:
  • react-native-maps explicitly says to not use react-native link. I never did, but apparently using react-native link even for specific modules is also not allowed. I previously used it during my Android setup for react-native-background-geolocation. Figuring this out took a ton of reading and experimenting and was my biggest hurdle in figuring out what was wrong. The guides you need to follow for working results on a clean project are:
  • react-native-maps Installation Guide
  • react-native-mapbox-gl using CocoaPods for iOS
  • react-native-mapbox-gl Android Installation
  • react-native-background-geolocation iOS Installation with CocoaPods
  • react-native-background-geolocation Android Manual Installation
  • Followed by setting up and getting your access tokens for Google Maps and Mapbox.
  • Undoing this required figuring out how to regenerate my ios and android folders from scratch. Turns out that deleting (or moving away) the folders and running react-native upgrade will do this. Oddly named, but works as explained in this StackOverflow answer.
  • Another issue was learning more about CocoaPods and how to merge the various Podfiles for each of those three projects. I ran into various errors and scary warnings.
  • If you see [!] [Xcodeproj] Generated duplicate UUIDs: ... PBXBuildFile ..., this can be safely ignored. There is a way to suppress this warning explained in this issue and this issue, but I figured that seeing the warning is more useful.
  • Even with a correct Podfile, the GoogleMaps import in AppDelegate.m didn’t work because of a dependency bug in react-native-maps. I had to upgrade to v0.19.0 (released quite recently) for the fix. [1] [2]
  • Sidenote: If you’re wondering whether or not you should commit your Pods directory into source control, this StackOverflow answer helped explain things. I committed mine to avoid future issues.
  • I also had to upgrade my AVD image as the old one running API 23 stopped showing the Google Play Services symbol after I updated Android Studio, all my previously installed SDKs, and Intel HAXM. This took a long time to figure out as my old projects from before updating used to work, so I never thought that updating would break things. Looking over the screenshots in this StackOverflow answer helped me notice that the icon had disappeared.
  • macOS defaulted to Java 9 which is not supported by React Native despite what the docs say. You’ll know this is the issue if you get Could not determine java version from '9.0.1'. when you run react-native run-android. The fix is to set your shell to use Java 8.
  • > Download and install JDK 8 or newer if needed.
  • “Newer” is b.s. Many comments in the Github claim that the docs tell you to use Java 8, but as you can clearly see, the wording is different and very misleading. This is just one of my pet peeves about React Native documentation.
  • Also, don’t bother trying to use Java 9. There are workarounds to using it, but you might end up going down a rabbit hole of issues down the line trying to figure out cryptic errors.
  • Once I got things building, I found out that you need to uninstall the previous APK as the package signature will be different as it was built and installed via another computer.
  • Lastly, I never turned off airplane mode on my real Android device which I noticed via a network sync mention in a related issue comment. That was the last key to figuring out why things weren’t fully working with both maps. Silly but it happens.
• Since it took my a long time to figure out that the react-native link react-native-background-geolocation that I ran a while ago was the source of most of my issues, I ended up following threads for various other errors that I did fix but would ultimately lead me to even more cryptic errors. Here are some:
  • RNBackgroundGeolocation ... was built for newer iOS version (8.4) than being linked (8.0) [1] [2]
  • Turns out that this is a warning that you can ignore.
  • duplicate symbols for architecture x86_64 [1] [2]
  • This leads to this error: react native ios failed: Result too large.
  • The following build commands failed: Ld build/Build/Products/Debug-iphonesimulator/ app normal x86_64 [1]
  • Print: Entry, “:CFBundleIdentifier”, Does Not Exist [1] [2]
  • The answer here was the key hint to helping me realize that something in my ios folder was out of whack and that I had to redo it from scratch.
  • [!] The [Debug] target overrides the OTHER_LDFLAGS build setting defined in Pods/Target Support Files/Pods/Pods.debug.xcconfig'. This can lead to problems with the CocoaPods installation - Use the$(inherited) flag, or - Remove the build settings from the target.` [1] [2]
  • The thing that ultimately fixed this was this.
• I learned how to launch my AVD from the command line as opening Android Studio was starting to become a hassle.
• Once I had everything working, I was able to complete my integration of react-navigation, redux, and redux-persist. The base boilerplate of my code now has example code for:
  • basic navigation routes,
  • screens (the former App.js code is now in DemoScreen.js),
  • redux actions,
  • redux reducers,
  • redux-persist PersistGate using a simple animated splash screen,
  • store validation callback code,
  • and redux middleware.
• I also generated an identicon to use as my loading icon in my animated splash screen.
• Lastly, I did some reading and minor attempts at using Flow in my code.

I haven’t been very productive during December due to a lot of factors outside of my control (primarily health). I am back on track though and hopefully will be speeding up my productivity and actually working towards a real streak for #100DaysOfCode. Gamedev will have to remain on the back burner for now as all goals related to getting a job (portfolio, relearning CS 101) are my top priorities.

This post has already gotten quite long so I’ll do a better explanation of the work I did to integrate react-navigation, redux, and redux-persist (v5) as well as explain how it differs from my old project code where I used redux-persist v4 and had a custom implementation of my SplashScreen that was very similar to how the new PersistGate component works.

Copyright © 2011-2020 Ho Yin Cheng