Architecture: Common Components

There are a few common components that are used around the app. For the most part, these components are meant to be generic enough to be reusable for different, larger components.

CircleIconButton - A circular button with an icon in the middle. A good example of this component is in the drawing classifier. There it is used to switch between the drawing tools.

CloseButton - A button used to denote a closing action. This is basically a more specific use of CircleIconButton and could probably eventually be joined with it.

FittedImage - An image that fits its container to the size of the contained image. That is, instead of fitting the image inside the image a container and leaving padding around the image where it has shrunk to fit the container with the same aspect ratio, the container shrinks to fit the aspect ratio of the image.

FontedText - This component is basically a wrapper around the Text component that React Native provides. All it does is automatically apply our font ‘Karla’ to the style. This component should be used instead of Text.

LoadableImage - This component is basically a wrapper around Reacts image component, except that it shows a loading indicator while the image is loading. This is an important component because many of the images that Zooniverse hosts are very large and can take a while to load on mobile connections.

Separator - This is a simple line separator.

SizedMarkdown - Similar to FontedText except it wraps our markdown library and applies sizing and font. This component should always be used when displaying markdown.

SubjectLoadingIndicator - A loading indicator view. Frankly this component is not as generic as it could be and should probably be made a little more generic.