Knowledge of style sheets is required.
Components are styled with the
useStyles() hook (preferred) or the
higher-order-component. Both APIs require a
style sheet that is conditionally rendered to
compose React Native style sheets.
To continue with the example found in the style sheet documentation, let's design and style a button component. The button file would look something like the following.
If you're designing components for a library that'll be consumed externally, we suggest exporting the style sheet so that consumers may customize variants.
Both the hook and HOC APIs provide a style composer function that we aptly name
sx. This function
requires a list of selector names (keys from the style sheet object) in which to determine a list of
As demonstrated above, the
button selector will always be rendered. However, the
button_disabled selectors will only be rendered when the button is conditionally updated via
disabled props respectively.
We can take this a step further by supporting
variants. All that's required is to pass
an object as the 1st argument to
sx() with the name of every variant, and the variant to
NOTE: The order of selectors passed to
sx()determines the specificity, as we create an array of
ImageStyle) objects. Be aware of this when developing.
You can pass non-Aesthetic composed style objects to
sx() by passing an array.