CSS and HTML rendering in Android/iOS ReactNative/Native

Question

I have been trying to understand the feasibility of rendering a HTML with CSS styling in Android/iOS. To give some background, we have web presence where based on some user actions, the HTML is generated and rendered. The HTML contains CSS styles (reference W3), attributes, tags (div/span/a), anchor with url and mailto protocol, custom classes, so on and so forth.
The goal is to have good visual fidelity, great performance, code reuse and less maintenance.

Choices we have so far:

Render the HTML in WebView: Hosting in WebView doesn't look like a great option as it would kill user experience. Plus I've heard WebView doesn't great performance (please correct me of my research is incorrect)
ReactNative: Parse HTML and map it to ReactNative controls
Go pure Native

It looks like Android/iOS doesn't directly support CSS. Before I write about the research I have done so far, I need help in couple of questions:

Does ReactNative cover all CSS styles well? As RN components map to Android/iOS native views, how does the mapping of CSS styles to Android Style props look like?
Is there a way to use CSS in Android/iOS native directly?

react-native-htmlview takes HTML as input and converts it to RN components. But it doesn't seem to support HTML tags with styles. Is there something (a 3rd party library, or a custom solution) that can be used here?

Lenoarod · Accepted Answer · 2019-10-15 05:38:45Z

I suggest you use the native web view tag handler( Html.TagHandler). it can handle the custom tag so that some tag webView does not support can also use. you should override the handleTag method.

@Override
public void handleTag(boolean opening, String tag, Editable output, XMLReader xmlReader) {
    if (opening) {
        if (tag.equalsIgnoreCase("code")) {
            start(output, new Code());
        } else if (tag.equalsIgnoreCase("center")) {
            start(output, new Center());
        } else if (tag.equalsIgnoreCase("table")) {
            start(output, new Table());
            if (tabLevel == 0) {
                tabHtmlBuild = new StringBuilder();
                output.append("table placeHolder");
            }
            tabLevel++;

        } else if (tag.equalsIgnoreCase("th")) {
            start(output, new Th());
        } else if (tag.equalsIgnoreCase("td")) {
            start(output, new Td());
        } else if (tag.equalsIgnoreCase("tr")) {
            start(output, new Tr());
        }

    }

.... }

the solution you can get from source code.

On the other hand, react native is a new platform supports both android and ios, it uses js bridge, and translate view to native UI. It only supports limited CSS style. the detail CSS that supported is listed here, you can look up it. At the same time, you can read the office doc:

the view support style:View style props

the text support style:Text style props

Collectives™ on Stack Overflow

CSS and HTML rendering in Android/iOS ReactNative/Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related