CSS Processing

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.

Inheritance

As stated before, a React Native ​View cannot receive textAlign style. It could even crash the native app. The ​@native-html/css-processor and ​@native-html/transient-render-engine libraries handle inheritable CSS properties by merging inheritable properties in the ​TRT.

CSS Inheritance Example

JSX Source

<div style="text-align: center;">

This text is centered!

</div>

HTML Snippet

import React from 'react';

import { useWindowDimensions } from 'react-native';

import RenderHtml from '@native-html/render';

const source = {

html: `<div style="text-align: center;">

This text is centered!

</div>`

};

export default function App() {

const { width } = useWindowDimensions();

return (

<RenderHtml

contentWidth={width}

source={source}

/>

);

}

TRT Snapshot

<TDocument tagName="html">

<TBlock tagName="body">

<TBlock tagName="div">

<TPhrasing anonymous>

<TText anonymous data="This text is centered!" />

</TPhrasing>

</TBlock>

</TBlock>

</TDocument>

Press on the button below to show how this code renders on your device.

Translation

Every CSS property has a validator registered in the CSS processor, in charge of validating values for those rules. Validators are multipurposed:

1. Handle special units such as absolute (pt), relative (rem) and keywords such as small (font-size) and thin (for borders) and translate those values in DIP (device independent pixels).

2. Group properties by inheritability, native target (block for ​View and text for ​Text), and compatibility (native for properties translatable as native styles and web for other properties).

3. Discard properties which values are invalid.

important

Note that special inherit, initial and unset values are not supported.

Mixed Styles Declaration

Mixed styles declarations (​MixedStyleDeclaration) are a blend between React Native styles (ViewStyle, 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 ​white-space collapsing, ​list-style-type, font selection (see ​Textual page) or ​object-fit support in images (see ​Images page).

A mixed styles declaration.

const mixedStyles = {

whiteSpace: 'normal',

color: 'gray'

}

Specificity

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):

1. Inherited styles

2. User Agent styles (see ​Transient Render Engine, element model)

3. Tags styles (​tagsStyles prop)

4. Classes styles (​classesStyles prop)

5. IDs styles (​idsStyles prop)

6. Inline styles (​style DOM node attribute)

So inline styles will take precedence over IDs styles, which will take precedence over classes styles, ...etc.

important

important! directives, complex selectors such as div > *, pseudo-classes and pseudo-elements are not supported.