just like a wavin flag
Flagitect just hit version 1.2.0, and so this is a brief introduction into the technical aspects of how the app is structured.
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 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.
There is your standard
Menu etc. components, and a bunch
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
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. ☺️