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
HTML Snippet
TRT Snapshot

import React from 'react';
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';

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}
    />
  );
}

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:

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

Inherited styles
User Agent styles (see Transient Render Engine, element model)
Tags styles (tagsStyles prop)
Classes styles (classesStyles prop)
IDs styles (idsStyles prop)
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.