Knowledge of component 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 activate.
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.