Menu Close

Building Flagitect

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

Flagitect v1.2.0

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 storage1 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. ☺️


  1. For this, I’m using React Native Async Storage as this functionality has been spun off from the React Native core. 

%d bloggers like this: