Request: Lists (<ol> and <ul>) should align/indent properly

Currently, react-native-htmlview treats bullets and numbers in ordered and unordered lists as simply additions to the beginning of list item strings (enclosed in <li></li> tags). This results in improper alignment of multiline word-wrapped list items.

This is a request for properly left-aligned lists in this repo. In the meantime, are there any existing forks that have addressed this list alignment issue?

Example desired alignment:

[donni106]

I have played around a bit with some possibilities. With the following renderNode method I can achieve an usable result @koesbong @sunweiyang @dann1609:

  renderNode(node, index, siblings, parent, defaultRenderer) {
    if (node.name == 'li') {
      return (
        <View key={index} style={{ marginTop: index === 0 ? 10 : 0 }}>
          <View style={{ flexDirection: 'row' }}>
            <View style={{ flexDirection: 'column', marginLeft: 20, width: 20 }}>
              <Text>{'\u2022'}</Text>
            </View>
            <View style={{ flexDirection: 'column', width: '90%' }}>
              <Text>{defaultRenderer(node.children, parent)}</Text>
            </View>
          </View>
        </View>
      );
    } else if (node.name == 'ul') {
      return (
        <View>
          {defaultRenderer(node.children, parent)}
        </View>
      );
    }
  }

Before:

After:

I don’t know why, but the list is endless growing without the second part:

 else if (node.name == 'ul') {
      return (
        <View>
          {defaultRenderer(node.children, parent)}
        </View>
      );
    }

Any ideas what is happening there @isilher and @ everybody?

[koesbong]

@isilher I am also having the same issue as @dann1609 where I am getting an Invariant Violation: Objects are not valid as a React child error and this is on iOS.

Here is my code:

function renderNode(node, index, siblings, parent, defaultRenderer) {
  // TODO: how do I get the number for an ordered list?
  let bullet;

  if (node && node.name === 'li') {
    bullet = '\u2022';

    if (parent && parent.name === 'ol') {
      bullet = index;
    } 
  }

  return (
    <View style={styles.bulletedTextContainer}>
      <Text>{bullet}</Text>
      <Text style={styles.contentStyle}>{node.children}</Text>
    </View>
  )
}

const styles = {
  p: {
    fontSize: 15,
    marginBottom: 10
  },
  ul: {
    marginBottom: 10
  },
  strong: {
    fontWeight: '600'
  },
  bulletedTextContainer: {
    flexDirection: 'row'
  },
  contentStyle: {
    flex: 1,
    paddingLeft: 5
  }
};

Is there something I am missing?