Building a browser extension for iOS with React Native

For a side project I’m building an extension for Safari on iOS using React Native.  This actually involves writing more Objective-C than I’m used to (I suck at Objective-C), so I wrote a tutorial to remind myself, and you the lucky reader, about all the pitfalls and how to avoid them.

The instructions, along with sample code, are on Github at

ReactDependentScript – Load 3rd party scripts first

I’ve come up against a common problem when writing React components that depend on a 3rd party JS and CSS files.

Do I load these 3rd party files every time, and pay the performance cost, or manually hack a way to load them when my component is first used?

I decided to fix this properly, which has resulted in a simple React component I’ve open sourced called ReactDependentScript.  You simply wrap your components in <ReactDependentScript …. >, telling it what JS and CSS files to load, and it loads them first, and only when they successfully load does it render the child components.

It also supports taking a function prop to call to render the child components lazily.

For example, you can load jQuery, and then render jQuery plugins or simply use the $ function.

Screen Shot 2017-10-30 at 15.23.38

You can do more interesting things like load the Stripe JS code for their Checkout flow.

Screen Shot 2017-10-30 at 15.25.56

Have a play with it at, or install it from NPM ( with

yarn add react-dependent-script

It’s MIT licensed so use it as you wish.  Please feel free to provide feedback or changes through Github.

Consolidated everything on

Many years ago I wrote a search engine site called, that I thought was pretty cool.  It pulled together search results from Google, Bing, Flickr and many other search services all into one UI.

Time has moved on, and most of the APIs have been shut down, so I’ve decided to shutter the site.  At the same time, the internet server for my alma mater on which I served all my academic research has shut down after 25 years in operation.

So, I’ve thrown together a simple site for which provides links to many of the things I’ve built over the years that still have some value (it was a shock to see how useless stuff gets over 15 years!), including my mobile apps for non-dead platforms, my robotics research and Voronoi graph code, and more.

Screen Shot 2017-05-02 at 22.56.14

folder-backup-service: Consolidate your files

A common problem I’m come across is that of similar files being scattered around my computer by various services, that I wished were all located in the same place.  For example, my iPad syncing photos to Dropbox’s “Camera Uploads” folder, whereas my phone syncing with the Mac’s Photos hidden folder, since I plug it in much more often.

My preference is that they would all just be in a single folder.  But I don’t want to do this manually, on a regular basis.

To fix this I’ve written a simple script that can be installed on a Mac as a service.  It is called folder-backup-service, and can be downloaded either as a ZIP file, or checked out out using Git (if you’re more of a web engineer) from GitHub at .

For usage, see the README file.

Some benefits of using this include

  • Keep the amount of space used in Dropbox low.  As soon as any device puts a file in a Dropbox folder you’ve specified, and it syncs to your computer, it will be moved off Dropbox to your local machine.
  • Should keep the local cache usage on mobile devices by Dropbox low, rather than using up gigabytes on iPads and iPhones.
  • Makes it easier to find your original images when syncing through Photos, rather than having to dig around for them in the hidden folders that Apple insists on storing them in.

This is open source, licensed with MIT, and I’m very open to people sending pull requests if you’re interested in getting the service working with operating systems other than Mac.

Dark Legacy Comics for Android launched!

Over the past few months I have been building an app for a friend called Dark Legacy Comics in my spare time.  I previously wrote about the iOS version I released, and now I’m very happy to say that I’ve launched the Android version!

You can get the app from, using any Android device.

As with the iOS version, the app costs $2, and all proceeds go the author of the comic to help with funding his site costs.  Given the comic gets about 200k visitors per month, it’s quite expensive!

On a technical level this is very cool, as I got to reuse about 98% of all the code from the iOS version due to building it with React Native from Facebook.  This allowed me to write the app in JavaScript, but it runs using fast native code on both iOS and Android.  The process wasn’t exactly smooth, as there are still a lot of differences between the platforms that have not been papered over by the framework (some of which I describe here), but in general it’s far, far more efficient than learning both Objective-C and Android development.  So, thanks to my colleagues at Facebook for building such great tools!




Troubleshooting setting up a React Native Android dev environment

React Native is awesome, but the docs leave something to be desired, particularly for Android (the RN team is working on it!).  I recently wanted to get started on building an Android version of the completed iOS app I previously shipped using React Native, but it turned out to be an overly painful process.  The docs assume knowledge of Android development, which I do not have, so here are the steps I used to get up and running on my Mac.

My setup

  • React Native version 0.32
  • Mac OSX 10.11.6 (15G1004)
  • javac version 1.8.0_011


  1. Follow the instructions for installation in Dependencies for Mac & Android.
  2. Open Android Studio from Applications, step through the setup wizard to download all the packages it needs (about 250MB)
  3. To run the emulator, you need to create a Virtual Device
    – Use AVD Manager to create a virtual device (   I chose to use a Nexus 5X emulator for no other reason as it was the default selected one.Screen Shot 2016-09-08 at 10.04.40 PM.pngScreen Shot 2016-09-08 at 10.05.50 PM.png
    – Run that device by clicking on the green Play button
  4. In your terminal, change directory to the root of your React Native app, and run
    react-native run-android

If at this point your React Native app shows up in your emulator, congrats, you’re now a React Native Android developer!

If not, read on.


You might see this error:
Could not run adb reverse: spawnSync

If so, add the following to ~/.bash_profile if not already there:
export ANDROID_HOME=~/Library/Android/sdk
then run
source ~/.bash_profile
and run
react-native run-android
from the root of your app again. (From Stack Overflow:

If you get the error
failed to find target with hash string ‘android-23’
try deleting the folder
and running the command again (from  This apparently worked for some people, but not me.

You should install:

  •  “SDK Platform” for android-23
    • Go to Tools/Android/SDK Manager
    • Click the “SDK Platforms” tab, if not already selected
    • Check the box for Android 6.0, which is API version 23

Screen Shot 2016-09-08 at 9.28.01 PM.png

  • Android SDK Build tools for version 23 (I installed 3 of them, see screenshot)
    • Go to Tools/Android/SDK Manager
    • Click the SDK Tools tab
    • Check the “Show Package Details” box in the bottom right
    • Under “Android SDK Build Tools” check all boxes for anything with version 23.

Screen Shot 2016-09-08 at 8.21.11 PM.png

This got me past this error.

I then got the errors:
<project folder>/android/app/src/main/java/com/dlc/ error: method does not override or implement a method from a supertype


<project folder>/android/app/src/main/java/com/dlc/ error: constructor FBSDKPackage in class FBSDKPackage cannot be applied to given types;
            new FBSDKPackage()
  required: CallbackManager
  found: no arguments
  reason: actual and formal argument lists differ in length

It turns out I had generated my project on an earlier version of React Native, as I was working on the iOS version first, and the Android code it generated was no longer compatible with React Native v0.32.  To fix this:

  • Create a temporary folder
    • mkdir ~/tempFolder
    • cd ~/tempFolder
  • Now create a new React Native application with the exact same name as your application in that folder.  This is important as the React Native tools embed that in a number of files that they generate.
    • react-native init MyAppName
    • Rename the folder in your original app “/android/app” to something else, e.g. “/android/app_old_and_busted”
    • Copy the folder ~/tempFolder/MyAppName/android/app to the “android” folder in your app.
    • run the command “react-native run-android” from the root of your app again.
  • Woohoo, it worked for me!

Dark Legacy Comics, my first React Native app

I’ve been a fan of the React Native framework for a while, even ignoring the fact it’s built by my colleagues at Facebook.  However since I spend my work days talking to engineers rather than coding these days, I haven’t had a chance to build anything real with it.  While I had some time off recently I fixed that, and built a fun new app for a friend, Dark Legacy Comics, now available on the Apple App Store.

It was a fun process, getting to build an app that runs really fast and smooth using all native UI components on iOS, but writing 99% JavaScript.  Given that I neither know Objective-C nor have the time (nor inclination) to learn it, it’s pretty amazing that I can now write an app that works this well.

The process was nowhere as smooth as it needs to be, given I ran into many tricky roadblocks with upgrading versions, importing 3rd party libraries, weird iOS build errors and more.  Still, with a little perseverance and quite a bit of cursing, I got it all working.  So, try it out (sorry it’s not free, all proceeds to the author of the comic, but he’s awesome and more than deserves it after 10 years of hard work) and let me know what you think!

Mobile Tesla Motors forum

I like to keep up with discussions about the Tesla Model S in their online forum, but this is very difficult to do on a mobile device, since it it not optimized for that, and still focuses on a desktop layout.

So I fixed it!  Behold the mobile Telsa Motors forum – .

Open this on a mobile device and enjoy browsing through all the comment threads.

Since I do not work for Tesla and don’t have access to their forum code there are some limitations:

  • It’s read only.  If you want to comment you have to go to their site.
  • It can’t show private posts, so only public posts are visible
  • To save on server costs, it refreshes every 10 minutes, so sometimes may not be as up to date as the real forum.  This should be mostly fine though


URL & JSON Decoder in ReactJS

I was debugging some network traffic, and needed to decode a URL that contained JSON values.  It looked like there was no good example readily discoverable on Google, so I threw together one using ReactJS, the amazing JavaScript library from my colleagues at Facebook.

Check it out at

It’s a simple single page application, and can be used as a good example of how to structure a simple ReactJS application. The source code is available on GitHub at .

Screen Shot 2014-07-19 at 6.21.10 PM