Flagitect just hit version 1.2.0, and so this is a brief introduction into the technical aspects of how the app is structured.

Stack

The app is written in React Native (currently version 0.62). There is no navigation library in use, as the app only needs some modals in the UI at the moment. The editor uses react-native-svg to render the flags. rn-fetch-blob is used to save the various output files (as a PNG raster or SVG vector inside an HTML) to device storage.

State Management

State is managed using a single useReducer hook near the root of the component tree. The store is currently divided into 3 parts with their own reducer functions: flag, ui, and charges. I found this approach had most of the advantages of Redux (since the component tree was shallow and I didn't need to use the Context API) when it came to composing the state and reducers. I use two useEffect hooks to store the state in device storage¹ whenever it changes, and load it from storage at app start.

Components

There is your standard Header, Footer, Menu etc. components, and a bunch of renderSomething components that render either charges or divisions. Most of the action happens inside the Editor component, and we're using SVG—a fantastic language that really should get more love—for the design and layout of shapes and designs. I used a bunch of SVG features such as patterns and transform to enable various rendering needs.

Finally

Flagitect is completely free and open source (MIT licensed), and I'd love for people using it to submit issues and PRs, or even fork it and make things better. I found that Google Play was lacking when it came to flag design apps, and so I created Flagitect in the hope that amateur vexillologists like myself would find it useful. ☺️