How to colour <ul><li> bullet points?

I have tried this, but it doesn’t work:

ul: { color: '#fff' }, li: { color: '#fff' },

[koenpunt]

For proper list alignment I found that I have to create a “table” with views.

So something like this:

// The function passed to the `renderNode` prop of the `HTMLView`
const customRenderer = (node, index, siblings, parent, domToElement) => {
  if (node.name === 'ol') {
    return (
      <List
        node={node}
        key={`node-${index}`}
        domToElement={domToElement}
      />
    );
  }
  return undefined;
};

// Custom List component
const List = ({ node, domToElement }) => (
  <View style={styles.list}>
    {node.children.filter(child => child.name === 'li').map((child, index) => (
      <View style={styles.listItem} key={index}>
        <View style={styles.listItemBullet}>
          {index + 1}
        </View>
        <View style={styles.listItemContent}>{domToElement(child.children, child)}</View>
      </View>
    ))}
  </View>
);

const styles = StyleSheet.create({
  listItem: {
    flexDirection: 'row',
    marginBottom: 10,
  },

  listItemBullet: {
    width: 20,
    paddingRight: 10,
  },

  listItemContent: {
    width: 0,
    flexGrow: 1,
  },
});

~However for this to work you have to use the github master, because domToElement is available in the function since 607ab6a805ca9aab448f3a910d610ae53a0708ee, which has not been released yet.~ nevermind, it’s in 0.9.0 now

[Quirksmode]

Thanks guys, this is really helpful, will give it a try.