2

We have a custom renderer for span tags but I can't find any way to force the span to full-width. I tried wrapping the custom renderer in a View as well as applying all the usual React-Native styles without luck.

Given input HTML like below

<span>Hello</span><span>Goodbye</span>

How can we render it as below?

Hello     
goodbye

Currently it renders inline like:

hello goodbye

The custom renderer looks like this:


const renderers = {
  span: RenderedSpan,
};

const RenderedSpan = props => {
  return (
      <Text>
        Some hardcoded text
      </Text>
  );
};

I figured I'd finally found a solution for the issue when I came across an example

That inspired me to try this code to set the contentModel to block:

(still no dice)

const customHTMLElementModels = {
  span: defaultHTMLElementModels.span.extend({
    contentModel: HTMLContentModel.block,
  }),
};
Slbox
  • 10,957
  • 15
  • 54
  • 106

2 Answers2

2

React Native Capabilities

React Native has roughly two display algorithms: flex, and text-inline. Any element which has a Text parent will be displayed with the text-inline algorithm, and all other elements will be displayed with the flex algorithm. The former severely limits the set of styles which will be supported, this is what you are stumbling on.

Elements inside text-inline will have the following styles ignored:

  • Margins
  • Percent-widths
  • All flex rules

I suggest you play with a snippet like the one below to have a gist:

import React from 'react';
import {SafeAreaView, useWindowDimensions, View, Text} from 'react-native';

export default function App() {
  const {width} = useWindowDimensions();
  return (
    <SafeAreaView style={{flex: 1}}>
      <Text>
        Hello world!
        <View style={{ /* play with padding, margins, flex... etc! */ }}>
          <Text>I'm inside a view!</Text>
        </View>
        How are you doing?
      </Text>
    </SafeAreaView>
  );
}

Solution 1: force width

Hence, the only way we could achieve what you are looking for via styles would be to set its width to the passed contentWidth:

import React from 'react';
import {SafeAreaView, useWindowDimensions, View} from 'react-native';
import RenderHTML, {
  CustomTextualRenderer,
  useContentWidth,
} from 'react-native-render-html';

const htmlContent = `
<span>Hello</span><span>Goodbye</span>
`;

const RenderedSpan: CustomTextualRenderer = ({TDefaultRenderer, ...props}) => {
  const width = useContentWidth();

  return (
    <View style={{width}}>
      <TDefaultRenderer {...props} />
    </View>
  );
};

const renderers = {
  span: RenderedSpan,
};

export default function App() {
  const {width} = useWindowDimensions();
  return (
    <SafeAreaView style={{flex: 1}}>
      <RenderHTML
        renderers={renderers}
        source={{html: htmlContent}}
        contentWidth={width}
      />
    </SafeAreaView>
  );
}

LINK TO SNACK

Solution 2: use Block content model

You suggested setting the span content model to block and with the snippet you provided, it works great:

import React from 'react';
import {SafeAreaView, useWindowDimensions, View} from 'react-native';
import RenderHTML, {
  defaultHTMLElementModels,
  HTMLContentModel,
} from 'react-native-render-html';

const htmlContent = `
<span>Hello</span><span>Goodbye</span>
`;

const customHTMLElementModels = {
  span: defaultHTMLElementModels.span.extend({
    contentModel: HTMLContentModel.block,
  }),
};

export default function App() {
  const {width} = useWindowDimensions();
  return (
    <SafeAreaView style={{flex: 1}}>
      <RenderHTML source={{html: htmlContent}} contentWidth={width} customHTMLElementModels={customHTMLElementModels} />
    </SafeAreaView>
  );
}

The block content model will force the render engine to guarantee rendered span elements won't have any Text ascendants, thus securing a flex column display. LINK TO SNACK

Jules Sam. Randolph
  • 3,610
  • 2
  • 31
  • 50
  • 1
    Thanks for your reply! Unfortunately we need the custom renderer to override the default content (literally overwrite "hello" or "goodbye" with our own custom element - which is an icon from `react-native-vector-icons`. Is there some way we can do that while using `TDefaultRenderer` as in **Solution 1**? With **Solution 2** there seems to be no effect, the elements are still rendered not as blocks - perhaps because I can't figure out any way to use `TDefaultRenderer` in conjunction with our custom element. Any advice? Thank you again! – Slbox Dec 03 '21 at 19:55
  • When we use **Solution 1** without the `TDefaultRenderer` the first line of these custom elements is reverse-indented and all the latter instances appear properly aligned. Our actual html `source` I think is actually like below, with a newline character: `Hello\nGoodbye` -- Is there some option we can mess with to try to fix that? – Slbox Dec 03 '21 at 20:01
  • 1
    First, you can override children of `TDefaultRenderer` by setting the `children` prop to the empty array, or by passing JSX children. Secondly, you can get rid of `TDefaultRenderer` and instead extract the generated props via `getNativePropsForTNode`, see this example https://snack.expo.dev/@jsamr/rnrh-custom-receiver. If those options don't work, I suggest you share a fully reproducible example which contains your custom renderer and open up a new post, since the issues you are reporting now are out of scope of your OP :-). – Jules Sam. Randolph Dec 04 '21 at 11:39
0

Did you try something like this :

    import * as React from 'react';
    import { Text, View, StyleSheet } from 'react-native';

    export default function App() {

        const renderers = {
          span: RenderedSpan,
        };

        const RenderedSpan = props => {

          const styles = StyleSheet.create({
            container: {
              flex: 1,
              backgroundColor:"#ff0000"
            },
          });
                    
          return (
            <View style={styles.container}>
              <Text>Some hardcoded text</Text>
            </View>
          );
        };

        return <RenderedSpan/>;
    }
Olavo Mello
  • 492
  • 2
  • 8