FSComponents
FSComponents is Flagship's React Native component libraries.
Storybook
A great way to see some of the components and options that FSComponents offers is to visit Flagship's Storybook on our wiki.
It is often helpful to run a development version of storybook on your local system to interactively develop and test changes to the components in a controlled environment with a rapid re-compile time. To run:
- Verify that yarn is installed on your computer. If you are not sure if it is, type “which yarn” into your terminal. If the terminal does not output a path, install yarn.
- Clone flagship
cd flagship
-
yarn
to install all required dependencies -
yarn dev:storybook
to compile and run local version that will watch for and update according to changes. The default port is 9001.
Individual Component Guides
Below you will find some guidance and advice on using some of our most-used and most-customizable components.
Form
Basic Info
Flagship's Form component utilizes the t-comb-form-native
library for its excellent validation capablities. As such, each form instance requires types
to be passed in via the Form's fieldsTypes
property. T-comb-form options
are passed in via our Form component's individual fieldsOptions
, fieldsStyleConfig
, style
,
and templates
props, respectively.
Important Note: T-comb-form-native instances are immutable, which means attempts to dynamically
update them can result in unexpected behaviors. Consult the
Disable a field based on another field's value
section in t-comb-form-native's
api guide and t-comb's
updating immutable instances
for more info.
Label Positions
Our basic form component can be configured to display the textbox (other structures in development)
field labels above, inline with, or floating in the textbox, or hidden altogether. The default
position is inline - the other options can be configured through the labelPosition
property which
accepts the enums FormLabelPosition.Above
, FormLabelPosition.Floating
,
FormLabelPosition.Hidden
, and FormLabelPosition.Inline
, respectively.
The labelPosition templates are implemented as templates. Templates in t-comb-form native must be
functional components. Because we need each field to ultimately be a stateful component in order to
display activity and errors, these functional components return our stateful textbox field
component and passes it locals
and labelPosition
as props. The constructor conditionally generates
styles values from the locals stylesheet based on the labelPosition prop.
These labelPosition templates are passed into the templates field in the options object between the
default templates (t-comb form) and the templates
prop templates to ensure that
- If we have not configured a custom template, the default t-comb form templates will be used
- If a user inputs a field template, that field template will overwrite ours.
const _options = {
stylesheet: { ...stylesheet, ...fieldsStyleConfig },
fields: fieldsOptions,
templates: { ...defaultTemplates, ...LabelMap[labelPosition], ...templates },
};
In order to ensure that our customized form label positions were still overwritable by an individual
user's fieldsStyleConfig
or template
choices
Active, Inactive, and Error Colors
Our form component changes color and style when active, inactive, and when the validator has found
an error. The default colors are black (#000000), grey (#cccccc), and red (#d0021b), but they can
be changed through the activeColor
, errorColor
, and inactiveColor
props. On render, the form
component dynamically generates a stylesheet with the correct colors.