There are significant differences between the CSS standard and how styles are handled in React Native. Most notably,
Text styles don't inherit from
View styles. The reconciliation is handled by the TRE.
As stated before, a React Native
View cannot receive
textAlign style. It could even crash the native app. The
@native-html/transient-render-engine libraries handle inheritable CSS properties by merging inheritable properties in the TRT.
Every CSS property has a validator registered in the CSS processor, in charge of validating values for those rules. Validators are multipurposed:
Handle special units such as absolute (
pt), relative (
rem) and keywords such as
thin(for borders) and translate those values in DIP (device independent pixels).
Discard properties which values are invalid.
Note that special
unset values are not supported.
Mixed styles declarations (
MixedStyleDeclaration) are a blend between React Native styles (
TextStyles) and CSS properties such as those handled by the CSS processor. This format enables features that cannot be handled directly by React Native style engine. For example
list-style-type, font selection (see Textual page) or
object-fit support in images (see Images page).
Despite its lack of complex selectors, CSS specificity will be honoured by this library. Most notably, a CSS property will be resolved by applying the following precedence in ascending order (latest will override formers):
User Agent styles (see Transient Render Engine, element model)
Tags styles (
Classes styles (
IDs styles (
Inline styles (
styleDOM node attribute)
So inline styles will take precedence over IDs styles, which will take precedence over classes styles, ...etc.
important! directives, complex selectors such as
div > *, pseudo-classes and pseudo-elements are not supported.