Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

"Start" attribute not working for Ordered List #336

Closed
blobitty opened this issue Jan 21, 2020 · 2 comments
Closed

"Start" attribute not working for Ordered List #336

blobitty opened this issue Jan 21, 2020 · 2 comments
Labels
new feature

Comments

@blobitty
Copy link

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)
@ezchen
Copy link

ezchen commented Jan 28, 2020

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>
          );
       }
}} />

@jsamr jsamr mentioned this issue Jul 4, 2020
Closed
jsamr added a commit that referenced this issue Apr 17, 2021
@jsamr
feat: support "start" attribute in ol and ul elements
0f87b22 
This commit is a substantial refactor of lists, which now use
@jsamr/react-native-li library to display markers with wide and rich
generation algorithms.

fix #336
@jsamr
Copy link
Collaborator

jsamr commented Apr 17, 2021

🚀 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

@jsamr jsamr closed this as completed in b9d3154 Jun 8, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
new feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jsamr @ezchen @blobitty