Meet Romulus: the Open Source React Native Generator

React Native has only really been in the mainstream for the last couple of years. It was brought about to allow developers to build native applications for iOS or Android devices using JavaScript.

We first used React Native to build an app for one of our startup investments back in 2016 but found it took several days to get the basic framework set up. Things like basic app navigation, ability to use the app offline and translation support. The kind of things that are essential to most projects but not unique enough to warrant re-writing every time.

Juggling many complex projects at once, we’re always keen to save time, money and improve developer happiness (by not having to carry out repetitive tasks!). This is where the idea for Romulus was born – a tool designed to provide structure and a set of patterns for React Native applications.

Ben, one of our front-end developers, began by working backwards from the initial startup application to begin the build of a generator that would sort out the basics, saving days getting things off the ground whilst maintaining quality and consistency across all projects.

It’s a tool that means developers can jump ahead when building React Native apps, straight to more complex and custom development.

Since the initial inspiration, the team have continued to build on and improve Romulus and have used it across multiple client application builds, saving them time and money too!

Romulus’ Features

• A sensible README providing consistent instructions between projects
• Router using react-navigation
• Redux setup
  • Store is persisted using redux-persist
  • Helpful state changes logged in the debugger using redux-logger
  • Actions are prevented from being dispatched before the cache is restored
• UI niceities
  • CSS-in-JS support for styled-components
  • Start to a style guide to list your components
  • Example Button component
  • Layout component example to DRY up screen layouts
  • Pattern to organise components and their styles
• Helpful utilities
  • Log helper to output coloured logs to the debug console
  • Visual display of your app’s environment while it’s running, this gets hidden in production
• Optional support for different locales using react-native-i18n
• Environment variables available in JavaScript, Objective C and Java using react-native-config
• Sagas (to handle async tasks like HTTP requests) using redux-saga
• Initial setup for deep linking
• Requests are set up to be handled with axios with clear logging in the debugger provided
• Automatic versioning of iOS and Android versions based on the package.json version
• Pattern to manage Flow types across the app
• Generic app icon that can be processed through a separate generator to handle all your iOS and Android icons

Realising the potential for time and frustration saving for other developers out there, we’ve now open sourced Romulus, so it’s free for anyone to have a go and play around with.

If you do try out Romulus on one of your projects do let us know what you think (bugs and all!). Full instructions on how to use Romulus can be found on the Romulus GitHub page.