React-native-render-html: "Start" attribute not working for Ordered List

Created on 22 Jan 2020 · 2Comments · Source: meliorence/react-native-render-html

Is this a bug report or a feature request?

Bug Report.

Have you read the guidelines regarding bug report?

Yes

Have you read the documentation in its entirety?

Yes

Have you made sure that your issue hasn't already been reported/solved?

Yes

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Both Android and iOS

Is the bug reproducible in a production environment (not a debug one)?

Yes

Have you been able to reproduce the bug in the provided example?

 When rendering an HTML ordered list the "start" attribute is ignored (i.e. <ol start='3'> still 
 renders a list starting with 1 instead of 3)

Environment

Environment:

React native: 0.59.8
react-native-render-html: 4.1.2

Target Platform:
Android (7.0)
iOS (10.3)

new feature

Source

bbah93

Most helpful comment

I wrote this to support the <ol start> attribute.

listsPrefixesRenderers={{
  ol: (htmlAttribs, children, convertedCSSStyles, passProps) => 
     {
         const { allowFontScaling, rawChildren, nodeIndex, key, baseFontStyle, listsPrefixesRenderers, index } = passProps;
         const baseFontSize = baseFontStyle.fontSize || 14;

         const bulletNumber = htmlAttribs.start ? htmlAttribs.start : index + 1;
         return (
             <Text 
                 allowFontScaling={allowFontScaling} 
                 style={{ marginRight: 5, fontSize: baseFontSize }}>
                     {bulletNumber})
            </Text>
          );
       }
}}

Just add it as a prop to wherever you need to support the start attribute like so:

<HTML
    html={exampleHtml}
    listsPrefixesRenderers={{
        ol: (htmlAttribs, children, convertedCSSStyles, passProps) => 
           {
               const { allowFontScaling, rawChildren, nodeIndex, key, baseFontStyle, listsPrefixesRenderers, index } = passProps;
               const baseFontSize = baseFontStyle.fontSize || 14;

               const bulletNumber = htmlAttribs.start ? htmlAttribs.start : index + 1;
               return (
                   <Text 
                       allowFontScaling={allowFontScaling} 
                       style={{ marginRight: 5, fontSize: baseFontSize }}>
                           {bulletNumber})
                  </Text>
          );
       }
}} />

ezchen on 28 Jan 2020

👍2 🎉1

All 2 comments

I wrote this to support the <ol start> attribute.

listsPrefixesRenderers={{
  ol: (htmlAttribs, children, convertedCSSStyles, passProps) => 
     {
         const { allowFontScaling, rawChildren, nodeIndex, key, baseFontStyle, listsPrefixesRenderers, index } = passProps;
         const baseFontSize = baseFontStyle.fontSize || 14;

         const bulletNumber = htmlAttribs.start ? htmlAttribs.start : index + 1;
         return (
             <Text 
                 allowFontScaling={allowFontScaling} 
                 style={{ marginRight: 5, fontSize: baseFontSize }}>
                     {bulletNumber})
            </Text>
          );
       }
}}

Just add it as a prop to wherever you need to support the start attribute like so:

<HTML
    html={exampleHtml}
    listsPrefixesRenderers={{
        ol: (htmlAttribs, children, convertedCSSStyles, passProps) => 
           {
               const { allowFontScaling, rawChildren, nodeIndex, key, baseFontStyle, listsPrefixesRenderers, index } = passProps;
               const baseFontSize = baseFontStyle.fontSize || 14;

               const bulletNumber = htmlAttribs.start ? htmlAttribs.start : index + 1;
               return (
                   <Text 
                       allowFontScaling={allowFontScaling} 
                       style={{ marginRight: 5, fontSize: baseFontSize }}>
                           {bulletNumber})
                  </Text>
          );
       }
}} />

ezchen on 28 Jan 2020

👍2 🎉1

🚀 This feature has been shipped in the last foundry pre-release (6.0.0-alpha.23)
See #430 for install instructions.

import React from 'react';
import { ScrollView } from 'react-native';
import RenderHTML from 'react-native-render-html';

const html = `
<ol start="10">
  <li>The World Wide Web Consortium (W3C) develops international standards for the Web: HTML, CSS, and many more.</li>
  <li>The World Wide Web Consortium (W3C) develops international standards for the Web: HTML, CSS, and many more.</li>
  <li>The World Wide Web Consortium (W3C) develops international standards for the Web: HTML, CSS, and many more.</li>
</ol>
`;

export default function App() {
  return (
    <ScrollView style={{ flexGrow: 1 }}>
      <RenderHTML source={{ html }} />
    </ScrollView>
  );
}

SHOW RESULT

Screenshot_1618696865