Styling

tip

You are kindly advised to read CSS Processing before continuing.

Inline Styles#

Inline styles set via the HTML style attribute are processed by the @native-html/css-processor library. You don't need to wonder if a CSS property will break your app: the CSS processor acts as a compatibility layer between React Native styles and CSS properties. This library gives you leverage on inline CSS processing via multiple props:

enableCSSInlineProcessing: Disable inline styles processing altogether.
allowedStyles: Whitelist the camel-cased CSS properties that you wish to be included.
ignoredStyles: Blacklist the camel-cased CSS properties that you wish to be excluded.

Let's try it out:

Minimal Inline Styles 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: `<p style="color: purple; font-size: 2rem;">
  <span style="text-align: center; text-decoration-line: underline;">
    Hello world!
  </span>
</p>`
};

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.

Props#

The RenderHTML component has four props to customize elements styles:

baseStyle: The styles for the root component. Inheritable styles will be inherited by all children.
idsStyles: Target elements with the HTML id attribute.
classesStyles: Target elements with the HTML class attribute;
tagsStyles: Target elements by tag name.

Each of these props is a record mapping identifiers with a MixedStyleDeclaration.

note

There is not (yet) ways to provide CSS selectors to target elements. Because it would require a full-featured CSS parser to build an AST, this feature might be supported in the future with an extension.

Mixed Style Records#

Introduction#

A mixed style declaration is an object similar to StyleSheet's create method argument values. However, it supports a blend of React Native ViewStyle, TextStyle and camel-cased CSS properties. See CSS Processing for a complete reference.

A mixed styles declaration record.
const tagsStyles = {
  body: {
    whiteSpace: 'normal',
    color: 'gray'
  },
  a: {
    color: 'green'
  }
}

In the above snippet, mixed-style declarations are the objects defined as values of the tagsStyles record. A few important comments:

Line 2. The <body> will always be present and can be confidently targeted, event when missing in the HTML snippet.
Line 3. This is the default property, with the exception of <pre> and a few other tags.
Line 4. Thanks to CSS inheritence, all textual children of <body> will default to this property.
Line 7. The TRE implements CSS specificity. A rule targetting the <a> element will override rules defined for its ancestors (in this case, <body>).

warning

You should never provide styles from React Native StyleSheet. These will not work.

Example#

Running The Mixed Style

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: `
<p style="text-align:center;">
  Hello world!
  <a href="#">A link!</a>
</p>
`
};

const tagsStyles = {
  body: {
    whiteSpace: 'normal',
    color: 'gray'
  },
  a: {
    color: 'green'
  }
};

export default function App() {
  const { width } = useWindowDimensions();
  return (
    <RenderHtml
      contentWidth={width}
      source={source}
      tagsStyles={tagsStyles}
    />
  );
}

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