Developing Mobile Apps on DragonFly with React Native

The situation is as follows: I want to develop a cross-platform Android/iOS mobile app without the burden of switching from DragonFly to Linux or MacOS during the initial phase of the development of the app. For Android app development, you’d either have to run Linux, Windows or MacOS as the Android NDK is not available for other platforms. FreeBSD might work by using the Linux emulation layer, but on DragonFly this definitly won’t work as we do not have a working 64-bit Linux emulation layer. The situation for developing iOS apps is even worse, as your only choice is MacOS.

Luckily there is React Native and an app called Expo. Expo is an Android/iOS app that will simply load your React Native Javascript code and execute it within the app, so that you get rid of building an Android APK or the equivalent with XCode for iOS. This works pretty well, and even allows you to develop apps from within your browser (no tools installed).

Install instructions for DragonFly

# We need node.js, npm and yarn
sudo pkg ins www/node www/npm www/yarn

# create-react-native-app is a helper script that will setup
# a fully working React Native app template for you.
sudo yarn global add create-react-native-app

# Use create-react-native-app
create-react-native-app --package-manager yarn MyFirstApp

# And start the development server
cd MyFirstApp && yarnpkg start

You should see a QR code in your terminal which you can scan from your Expo client app running on your Android/iOS device. That’s it! Make changes to your App.js and you will see that the UI on your mobile will live update.

Troubleshooting

If Expo won’t be able to connect, ensure the following:

  • Both your computer and the mobile should be within the same network. Can they see each other? Try opening the URL in your mobile’s browser that is written on the terminal. Replace exp:// with http://, e.g. http://yourhost:19000.

  • If you are running a firewall, open up the ports 19000 and 19001. For PF add a somewhat similar line to /etc/pf.conf:

    pass in on $egress proto tcp from any to $egress port { 19000, 19001 } keep state

  • Note that I am using yarn instead of npm above. Somehow npm is severly broken on DragonFly. It is not even possible to install global packages (npm install -g) with it. Also the react-create-native-app script depends on npm version 4, while we have version 5 in ports.