Native System

A set of utils, views and systems to help you structure and use your theme
and create your dynamically themed components using glamorous.
Inspired by styled-system & focused on react-native.

The idea

The library makes use of a theme containing a set of colors,
an array of easily accessible spacings and sub-themes.
Every sub-theme contains a default styling, but also modified versions, which
can be merged with the default one, making it easy to create variations of
existing components.
The theme-object will look something like this when written out:

{
colors: {
[colorName: string]: Color,
},
spacing: number[],

[subThemeName: string]: {
default: {
// ... some styles
},
[modifier string]: {
// ... some different styles
}
}
}

An api to build the theme up from scratch (or from a default one) is provided.

Aside from the theming structure, the library provides a set of utilities to
easily extract certain colors or sub-themes from the root-theme, including easy
helpers to provide dynamic styling to glamorous-type components (this would also
work with styled-components or emotion).
* [Theming][theme-docs]

Additionally, there are components included which I personally find
important when creating my React Native apps (they are not compatible for web, sadly).
Some might be more useful to you and your app than others.
These include the following:
* [Keyboard Handling][keyboard-docs]
A component sent using context to easily animate components across a component-tree
to handle the keyboard gracefully.
* View/SystemView: an easily styled View-alternative
* Containers
A range of containers:
* Screen: easy wrapper to configure properties related to your app's screen,
like the StatusBar.
* Row: a row/list-entry component with a wide range of configurations.
* Card: a material design-styled card.
* Absolute: a pre-styled component that's positioned absolutely and takes
positioning props.
* Modal: A wrapper around React Native's native modal, with included overlay and
a component to prevent propagation of the close-event.
* SimpleModal: A pre-composed modal. Just pass in some children and handlers.
* CardModal: A modal styled like a card.
* DismissArea: A component handling touches outside of TextInputs to dismiss
the keyboard.
* [Coordinator][coordinator-docs]
A powerful helper-component to easily coordinate more complex
animations, so you don't have to spend ages writing interpolations and positioning.
* Input: A wrapper around React Native's TextInput & a helper to more easily wire
up your inputs with Formik. Also contains styled TextInputs with error-handling and such.
* Button:
* Base: A wrapper for your mark-up to easily add native touch handling without
impacting your layout.
* Button: A styled button component.
* Misc:
* Text: A text component. Wow.
* Separator: A line. To separate things.
* WithThemeFAC: I like FACs. So I made this. Allows you to get values out of
your theme without using a higher order component per se.
* Spinner: For when your app has not loaded data yet.

[theme-docs]: src/Components/Theme/Theming.md
[keyboard-docs]: src/Components/Keyboard/Keyboard.md
[coordinator-docs]: src/Components/Coordinator/Coordinator.md