meliorence / react-native-render-html Goto Github PK

View Code? Open in Web Editor NEW

3.4K 32.0 568.0 68.92 MB

iOS/Android pure javascript react-native component that renders your HTML into 100% native views

Home Page: https://meliorence.github.io/react-native-render-html/

License: BSD 2-Clause "Simplified" License

JavaScript 8.13% TypeScript 76.81% Ruby 0.06% Shell 0.35% SCSS 3.31% CSS 0.35% MDX 10.98%

react-native render html styling css customizable ios android

react-native-render-html's People

Stargazers

Watchers

Forkers

kuuldor nhtera lvojnovic pdavid0 cabbageslices fauzie811 kyunwang abadikaka duyphambhtech samw2k00 alkshendra yiky84119 kikill95 miguelramosfdz luisliuchao sonnn peacechen mtt87 orekasep getgamba balamirmobile bladesedge nwkeeley radicalization rahmatcmos abinli yeatslu duongifc chadmorrow hshaukatali kevintcao diamanthaxhimusa hongliangbest cl-will tphanliem krizzu hyb175 mjunaidi soundblaster rdnsyh kendjiya stefen barbogast mohamedmoussasoli pacedgroup steffann nyby krystofcelba tothvoj-gl reier360 sergioperez epicode brodybits mchudy theng lakshmiraghavan ikhsanalatsary charpeni l3th2nh gubaojian wangbingqiong alphaadidas effectivecui simek richhuth fengweijp ransquawk pushplaybang triskalweiss guregu junglecatsw amhinson teamairship lordress manutuero newoceaninfosys kikoseijo keenvil 0nlyoung7 ilumy yushimatenjin devbridge sarath-mohan-xelp hzuhyb luo-wenfeng easybroker brcc0 ecency muhamad-rizki adderly avoidborredom andy1dx ryanggrey mixpeal adiadha sorakrisc zhengzhuoxing oncemu neonguyen jtpk2168

react-native-render-html's Issues

issue rendering HTML

Hello i have this html

<p>Alrededor de las 12:45 horas los usuarios de la aplicaci&oacute;n empezaron a reportar la ca&iacute;da del servicio en redes sociales como Twitter, algunos molestos y otros tom&aacute;ndolo con humor.<br /><br />Esta es la segunda ocasi&oacute;n en la que el servicio de WhatsApp sufre una ca&iacute;da en el mes. El 3 de noviembre WhatsApp sufri&oacute; una ca&iacute;da desde alrededor de las 05:00 horas y hasta las 07:00. Dicha ca&iacute;da se suscit&oacute; en diversos pa&iacute;ses de Asia, Europa y el continente americano.<br /><br />WhatsApp ha enfrentado ca&iacute;das generalizadas similares este a&ntilde;o, incluyendo una de varias horas en mayo.<br /><br />El servicio de mensajer&iacute;a es usado por m&aacute;s de mil 200 millones de personas en todo el mundo y es una herramienta clave de comunicaciones y comercio en muchos pa&iacute;ses.</p>
<p>El servicio se restableci&oacute; a la 1:17 de la tarde.</p>

The first <p> is not rendering with the next code, only the second one

<HTML 
  ...
  'p' : {
      fontSize: 18
      color: "black",
      paddingBottom : 15
   },
/>

EDIT.

if i used
ignoredTags={['br']}

im getting this error

any idea whats happening?

RCTJSONStringify() encountered the following error: Invalid Type in JSON write (NSURL)

Hi,

When I load data from a Wordpress, I get this error:
RCTJSONStringify() encountered the following error: Invalid Type in JSON write (NSURL)

I guess that comes from html attributes inside the post content. Any ideas how to sanitize the string so this module doesn't throw this error?

Html prepended with line break whenever tags are inserted

The above shows the affect of html containing an tag.

I have a warning when rendering my HTML

Warning: Failed prop type: Invalid prop fontWeight of value 400 supplied to Text, expected one of ["normal","bold","100","200","300","400","500","600","700","800","900"].
Bad object: {
"fontWeight": 400
}
in Text (at HTML.js:331)

The HTML contains the tag.

Styling issue on version 3.5.1

We just updated from 3.5.0 to 3.5.1 and now all the individual tags are not picking up font size styling through tagsStyles. Below are some screenshots:

Before updating:

After updating:

I went into the code and removed the change (https://github.com/archriss/react-native-render-html/blob/master/src/HTML.js#L274) and the styling returns. Other styling like colour and spacing seem to carry through fine.

onPress on img

Hi, how can I make onPress over the <img src""> I want to open a specific image from the entire article.
Thank you!

Question: Able to exclude some elements from incoming html

Hi - Love your app its greater for displaying the content that we are receiving from a rich text editor.

I am using Expo.io and as such I need to load all the font prior to the app starting. I am pulling in some rich text and I am getting an error that I've not loaded the Verdana system font. The problem I am facing is that I don't know what fonts may exist within these rich content snippets.

What I would like to do is strip out all fontStyle from the rich text. Is there a way with react-native-render-html to say that I do not want any fontFamily styles but still render things like paragraphs, bullets etc.

Thanks for the great work!

Need help with nested markup

Hi, I'm having a bit of trouble while trying to render this markup:

<p class="textNormal">
    Classifica a afirmação como verdadeira ou falsa.
</p>
<p class="textNormal">
    <p class="textItalic">
        Na potência
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAYCAYAAAAcYhYyAAACKUlEQVQ4T9WUPYgTURSFz32JEwKZ8acSW4MIQSHzCBIb04laiFqIFluo4F9joazCsrgKslvqdoI2Cq5a+ceigo5aBDJvHmHwBxWFLWzsZLIqM5O5MpINu7CbRN3Gqe/75pxzz3uEZfhoGRgYCFKr1bJBEBwHsAnAFgDTAC54nvc9FTEQpFKpbEuS5GQ2mz0Sx3ERwANmHtNaXx0YYtv2HiKaZObdRDQD4CGA96ZpHnUc52dXiZRyIxGdT5JkloiqzPwyjuNR3/e/zs/Ntu3NRHSfmUe01je7Ssrl8joiupv61Fo/7gxOE9GrMAwP+74/mw6XSqVCPp+/AuBToVCYcBwn7kI6nh0Az8Mw3GcYRqYjeS0z79Bav0vDbbVaw0mSfLEsayoIArEgWCnlegD3ALwAcCaKooJhGI+Y2QKw0zTNmSAIzgH4liTJLSLaJYQQSqnrSwYrpUzX+BTAFIBTzLydiG4DWDGXDxENKaVuLAqpVqtroii6zMwbhBCHXNd906+QC3qSrhKAJKKtAJ5EUTQ5F2ov0KJlS9WEYZhua3W73d7fbDY/9oVIKVcyczGXy72t1+s/0gNSynEAwwBGPc+72BPSuRfXAAwBmPA87+x8CBGNKKUuAeClQL/tSClPADhGRAeVUq/T8gkh7gBYlclk9jYajQ997RSLxZxlWQeI6DSAEEDaj2dCiHHXdT//0Xb6Dfe087eHu8X7V8DA70m/Hw30sv0/kF/YJNkZw95t5QAAAABJRU5ErkJggg=="></img>
        , ao 
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAUCAYAAAC07qxWAAABb0lEQVQ4T8WSO0sDQRhF7zeRTSPxUYmti1gJ2SFIbEyrnVqIFhbaiJWFooUEUZBYirW9aCUoooLPIpDdWcLiAxT9AbYhCjPJjuziBiERY+XUZy5z7lxCk4ea5FADOed9RLTm+36ZiNJa65tKpZL1PO8tCAvBZDLZTUQHANZd1z21LKufiE6I6FZKOet5XjkEU6nUkO/7VwAupZTjhmHEABwB6NJaD7uu+xiCnPMeAIcArgEsKaVaDcM41lonAIwIIV4aynDOBwCcA9gDsCCEeK8D0+l0p1JqW2vdyxibsW37viYTVWRZ1mjwEiIaBHCmlNoJROrA6EKQKqUMWuioVqsTxWLxOZJp01qb8Xj8IZ/Pf3wJ5gAsA8gKITYok8m0lEqlXQDTALaEECvfQSJadRxnM0qcBzBHRFOO49wFH8AY2wfQHovFxgqFwlMImqYZTyQSk0S0CEACCPq7YIzlbNt+/VGm0VD+vp7f5vaPiZ+46IsWimqlqwAAAABJRU5ErkJggg=="></img>
        chamamos base e ao 
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAUCAYAAAC07qxWAAABWUlEQVQ4T9WSvUoDQRSFz511ZQLbaCEo+AQLgexkizSilRAbC2s7bRQsBQ02itgG/IEI/jQ22uQJDKkkuzuVNiG+Q9IIG2SuTDBbxICxdNr55rucM5cw4aEJOWRgoVBYEEKcAlgCMEVEFc/zHhqNxqeVDcBSqTTb7/dvmPkqTdNnKeUhgCMLx3FsH/MALBaLG8y8BmAnSZIPa3ccp87MM47jlFutVnsAKqWOAVS+wUvf96ellOcAtohoPY7j+tC4accy867W+s6OUkqdAdhn5m2t9fXY1L7ve7lc7p6ZV5i5rLV+GQsGQbBKRI8Aqr1e76TT6aQ/wDAMfWPMExHddrvdqoWyeoalh2G4yMw1Y0xNa11XSkl7Z5vIjEqpeQAXQohqFEVNGygIggMhxFuWOp/Pz7muWwNgALxaCIBLRMtEtBdFUTTa4+jXtwGUkyR5//tS/LZF/8H4BXYBjRU2RJ5mAAAAAElFTkSuQmCC"></img>
        chamamos expoente.
     </p>
</p>

This is what I'm getting:

What I'm targeting is having the second <p> break line as it is, but the next images and text to keep inline, instead of breaking line and to keep the styles as it is not applying any.
Can't seem to understand why it is happening, and any help will be appreciated.
Thank J.

Cannot handle style="font-size: 1em;"

I have html that has inline styles. this particular one causes an error.
`Error while updating property 'fontSize' in shadow node of type : TCTVirtualText

TypeError: expected dynamic type double', but had type string'

Global font properties

This is perfect for what I need, thanks for the good work. The only problem I have is that aside from baseFontSize, there doesn't seem to be an prop that I can use to change the color, fontFamily and the other attributes for all the text. Targeting each element using the tagsStyles work, but I just need a global ('*') rule to make all the text fit in (look the same) with the rest of my application.

Is there a workaround for this?

Can you add onLayout prop?

I know that it is possible to pass onLayout with customWrapper, but it will be good to have it as top level prop.

Can't style some tags

Hi,

This sounds like a stupid question (it might be a stupid question) but I have trouble styling <a> and <li>.

Let's consider this example:

<p>
  Bla bla bla <a>test</a>. 
</p>
<ul>
  <li>test li</li>
</ul>

And these styles:

  li: {
  lineHeight: 24,
  fontFamily: fonts.regular,
  fontSize: 16
},
  ul: {
  lineHeight: 24,
  fontFamily: fonts.regular,
  fontSize: 16
},
  a: {
    fontFamily: fonts.regular,
    fontSize: 16,
    color: 'red'
  },

The issues are:

the <a> element doesn't take color property, it isn't applied (when fontSize and fontFamily are applied)
I simply can't apply styles to <li> element, nothing is applied

I'm searching in the docs but can't find anything to help me. Any idea?

Empty unordered list causes exception

An empty unordered list <ul></ul> appearing anywhere in the markup causes an exception children.map is not a function in HTMLRenderers.

Line 52 does not check for empty children

children = children.map((child, index) => {

Unfortunately I can't control the incoming content and it is valid HTML. Working on a PR.

Setting global font size & styles

The docs & example show how to set individual tag styles with the tagsStyles prop. Is there a way to set a global font size (as well as other styles) without having to specify individual tags? I'd like to scale the entire HTML block responsively and a global size would help.

For example, given the HTML block with no explicit sizing:

<h2>Some heading</h2>
<p>First paragraph</p>
<p>Second paragraph</p>

v3 incorrect render of special character

This page doesn't render correctly with special character :
this link

Render fine with v2.1.0

Invariant Violation: Nesting of <View> within <Text> is not supported on Android

Hi @Exilz

Sorry for all the activity on a Friday afternoon. I am seeing this error come up on some of my job descriptions

Exception

Invariant Violation: Invariant Violation: Nesting of <View> within <Text> is not supported on Android.

This error is located at:
    in View (at HTML.js:428)
    in RCTText (at Text.js:559)
    in Text (at JobComponent.js:26)
    in RCTView (at View.js:113)
    in View (at HTML.js:460)
    in HTML (at JobComponent.js:258)
    in RCTView (at View.js:113)
    in View (at JobComponent.js:338)
    in RCTView (at View.js:113)
    in View (at ScrollView.js:744)
    in RCTScrollView (at ScrollView.js:852)
    in ScrollView (at JobComponent.js:272)
    in App (created by Connect(App))
    in Connect(App) (at SceneView.js:32)
    in SceneView (at CardStack.js:399)
    in RCTView (at View.js:113)
    in View (at CardStack.js:398)
    in RCTView (at View.js:113)
    in View (at CardStack.js:397)
    in RCTView (at View.js:113)
    in View (at createAnimatedComponent.js:134)
    in AnimatedComponent (at Card.js:26)
    in Card (at PointerEventsContainer.js:55)
    in Container (at CardStack.js:440)
    in RCTView (at View.js:113)
    in View (at CardStack.js:370)
    in RCTView (at View.js:113)
    in View (at CardStack.js:369)
    in CardStack (at CardStackTransitioner.js:103)
    in RCTView (at View.js:113)
    in View (at Transitioner.js:187)
    in Transitioner (at CardStackTransitioner.js:55)
    in CardStackTransitioner (at StackNavigator.js:48)
    in Unknown (at createNavigator.js:48)
    in Navigator (at createNavigationContainer.js:205)
    in NavigationContainer (at SceneView.js:32)
    in SceneView (at TabView.js:79)
    in RCTView (at View.js:113)
    in View (at TabView.js:78)
    in RCTView (at View.js:113)
    in View (created by ViewPagerAndroid)
    in AndroidViewPager (at ViewPagerAndroid.android.js:235)
    in ViewPagerAndroid (at TabViewPagerAndroid.js:153)
    in TabViewPagerAndroid (at TabViewAnimated.js:77)
    in RCTView (at View.js:113)
    in View (at TabViewAnimated.js:252)
    in TabViewAnimated (at TabView.js:216)
    in TabView (at withCachedChildNavigation.js:66)
    in withCachedChildNavigation(TabView) (at TabNavigator.js:54)
    in Unknown (at createNavigator.js:48)
    in Navigator (at createNavigationContainer.js:205)
    in NavigationContainer (at SceneView.js:32)
    in SceneView (at CardStack.js:399)
    in RCTView (at View.js:113)
    in View (at CardStack.js:398)
    in RCTView (at View.js:113)
    in View (at CardStack.js:397)
    in RCTView (at View.js:113)
    in View (at createAnimatedComponent.js:134)
    in AnimatedComponent (at Card.js:26)
    in Card (at PointerEventsContainer.js:55)
    in Container (at CardStack.js:440)
    in RCTView (at View.js:113)
    in View (at CardStack.js:370)
    in RCTView (at View.js:113)
    in View (at CardStack.js:369)
    in CardStack (at CardStackTransitioner.js:103)
    in RCTView (at View.js:113)
    in View (at Transitioner.js:187)
    in Transitioner (at CardStackTransitioner.js:55)
    in CardStackTransitioner (at StackNavigator.js:48)
    in Unknown (at createNavigator.js:48)
    in Navigator (at createNavigationContainer.js:205)
    in NavigationContainer (at App.js:241)
    in AppWithNavigation (created by Connect(AppWithNavigation))
    in Connect(AppWithNavigation) (at App.js:341)
    in Provider (at App.js:340)
    in App (at withNetworkConnectivity.js:140)
    in withNetworkConnectivity(App) (created by AwakeInDevApp)
    in RCTView (at View.js:113)
    in View (created by AwakeInDevApp)
    in AwakeInDevApp (at registerRootComponent.js:36)
    in RootErrorBoundary (at registerRootComponent.js:35)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:126)
    in AppContainer (at renderApplication.js:34)
  at invariant (/./node_modules/react-native-scripts/build/bin/crna-entry.bundle:6225:24)
  at View_render (/./node_modules/react-native-scripts/build/bin/crna-entry.bundle:26971:14)
  at finishClassComponent (/./node_modules/react-native-scripts/build/bin/crna-entry.bundle:9007:118)
  at performUnitOfWork (/./node_modules/react-native-scripts/build/bin/crna-entry.bundle:10017:33)
  at workLoop (/./node_modules/react-native-scripts/build/bin/crna-entry.bundle:10036:142)
...
(15 additional frame(s) were not displayed)

Note this works fine on iOS.... its only Android thats throwing the issue

The HTML that is causing it is:

<p>Acme Inc. has an immediate opening for an experienced <strong>Commercial Property Underwriter</strong> for our Coastal Condominium Program program. This position is based out of our <strong>City, St</strong> office. We are looking for Underwriters who feel confident in their abilities to select and price new business, build a strong rapport with agents, and uphold our company's underwriting guidelines and excellent service.</p>
<p><strong>The right Underwriter has a great attitude, is self-directed, has strong analytical skills, and loves to work in a fast-paced, team-oriented environment.</strong></p>
<p><br /></p>
<p><strong>RESPONSIBILITIES:</strong></p>
<ul>
  <li>Underwriting of complex property accounts</li>
  <li>Risk selection by qualifying leads and identifying target markets</li>
  <li>Communication with brokers for new business opportunities</li>
  <li>Issuance of multiples quotes with selected markets</li>
  <li>Development and maintenance of strong broker relationships</li>
  <li>Monitors claims activity and reporting</li>
  <li>Performs other duties as assigned</li>
</ul>
<p><br /></p>
<p><br /></p>
<p> <strong>REQUIREMENTS:</strong></p>
<ul>
  <li>Bachelor’s degree is preferred</li>
  <li>3-5 years proven track record of underwriting commercial property accounts</li>
  <li>Ability to develop and foster carrier and broker relationships</li>
  <li>Strong written and verbal communication skills</li>
  <li>Aptitude to negotiate, influence and close deals</li>
  <li>Ability to work in a fast-paced environment</li>
  <li>Excellent organizational and time management skills</li>
</ul>
<p><br /></p>

Not getting htmlAttribs in some case

when i create a custom renderer ,if a text is wrapped inside a div like <div prop="value"> hello </div>
then htmlAttribs is equal to an empty object.
But if the text inside the div is wrapped into a paragraph like <div prop="value"><p> hello</p> </div>
everything work fine , htmlAttribs is equal to {"prop":"value"}

Some image sizes not working

First of all, thank you for this repo, it is by far the best html renderer for React Native that I've tried.

The problem I'm having is that not all images are being sized correctly. I'm using the Dimensions.get('window').width trick but some images are rendered at full size and spill off the screen. I'm not sure exactly what the cause is but it seems to only apply to images who have their sizes specified in this format: sizes: "(max-width: 100px) 100vw, 603px"

I'm building a rss feed reader using the Feedly API so I've been noting which feeds give me problems with their images and they all have that sizing format in common. Some examples of the feeds that do this:

https://postsecret.com/
https://waitbutwhy.com/
http://www.poorlydrawnlines.com/

Here's a screencap of the debug output when the screen is rendered:

And the html I'm rendering look like this:

<p>
  <img sizes="(max-width: 700px) 100vw, 700px" src="http://www.poorlydrawnlines.com/wp-content/uploads/2017/10/poltergeist.png"
    alt="" width="700" srcset="http://www.poorlydrawnlines.com/wp-content/uploads/2017/10/poltergeist.png 700w, http://www.poorlydrawnlines.com/wp-content/uploads/2017/10/poltergeist-300x264.png 300w"
    class="wp-image-6468" height="615">
</p>

I'm sure I didn't do a great job explaining all this but I'm happy to provide any additional information needed to figure this out.

Force image width

Hi again,

I'm trying to use style to set a width to the img element, but it does nothing. As far as I understand, right now, the module is getting the image URI to set its original width / height.

Any way to force image width? Should I use a renderer for this?

Android: Not display any content or paragraph HTML.

It's working fine with iOS, but it's not working on Android.
All the paragraph display in White (Blank) but image appear in the paragraph.
Could anyone give an advise please???

failing to import the Shallow Compare module

Using:

"react-native": "0.43.1",
"react": "16.0.0-alpha.6",
"react-native-render-html": "2.0.0",

After installing and running the android version of the app I got an exception in the packager because the module 'react-addons-shallow-compare' was not found.

npm install react-addons-shallow-compare

Fixes the problem.

I can only guess that this module, that the docs now describe as legacy, used to be included with react but now needs to be installed separately with the use of React.PureComponent being the recommended way to achieve the same goal.

Quick fix: add react-addons-shallow-compare as a dependency
Proper fix: change to PureComponent

Styling lists

Hi there,

Can I ask if there is a reason for the paddingLeft: 20 located here: https://github.com/archriss/react-native-render-html/blob/master/src/HTMLRenderers.js#L100

I can't seem to find a way to overwrite it. Will I need to make use of listsPrefixesRenderers to do so?

Thanks.

How to use tagStyles property ?

Hi,

It seems to be a dumb question, however, I recently updated this package (from v2.xx to v3.4), which brings a lot of stuff. So first of all, thanks.

Then, I'm simply using tagStyles property:

<HTML
              html={I18n.t('ProfileEditCGU.content')}
              tagStyles={{
                p: {
                  color: colors.darkGray,
                  lineHeight: 1.6,
                  fontFamily: fonts.regular,
                  textAlign: 'center'
                },
                strong: {
                  marginBottom: 0,
                  color: 'red'
                } }}
              textAlign={'left'}
              onLinkPress={(evt, href) => this._onLinkPress(href)}
            />

The content I provide is a simple text wrapped with HTML tags:

    <p><strong>Title</strong>
    </p>
    <p>Test content.
    </p>

However, none of these style properties are applied. I don't know what I'm doing wrong. My only guess is I'm not using tagStyles the right way.

Any ideas?

bold

<HTML html={'<div>Lorem Ipsun <b>Bold</b>  Foo <i>Italic</i>.</div>'} />

Bold and Italic text is breaking the line.

tagsStyles property cannot edit all React Native StyleSheet properties because it is not called until after mounting

The problem arises when a property that affects the mounting of the referenced component is adjusted through tagsStyles. To replicate my exact error simply adjust the resizeMode of an img tag from a create-react-native-app.

Why the images are always be rendered first

I have html content with images, although they are at the bottom of the content.
But during rendering, they will be put on top

How to style li tag?

Can you help with <li>...</li> tag styling?

I did not find another solution other than this

html={content.replace(
  new RegExp('<li[^>]*>([\\s\\S]*?)<\\/li>', 'g'),
  '<li><p>$1</p></li>'
)}

tagsStyles={{
  p: styles.contentParagraph,
}}

Feature proposal: Accept an uri as input?

Would be great if we could also provide this component a source uri rather than the html source string.
htmlparser2 seems to be able to parse a stream. So it should be feasible to add a source props tag to the component that would accept an uri parametter. Then the component should download, parse and render the content of this uri on the fly (rather than downloading it entirely and then render it afterward).
I don't know if it would be complicated to implement but it would be a nice enhancement ;)

TaskQueue: Error with task : undefined is not and object (evaluating '_attribs.style')

Hi again,

switching from 3.4.0 to 3.5.0, I get this issue:

Which points to this line: https://github.com/archriss/react-native-render-html/blob/master/src/HTML.js#L350

I didn't have this issue with previous versions, my content and styles didn't change, so I don't know what I should check.

Ignored Styles prop doesn't seem to work!

Hi @Exilz, great work!

I'm having an issue, with style 'display: block' app just stops.
I tried
ignoredStyles={['display']}
but this prop doesn't seem to work, thanks!

"react-native": "0.50.4"
"react-native-render-html": "^3.5.2"

Could we make classesStyles be applied after tagsStyles?

Just wanted to say thanks for the great library, we're really impressed with the performance of it vs using a WebView!

We've noticed that, at the moment, tagsStyles override classesStyles - e.g. with the following code, the last-paragraph will come out grey rather than teal, because the styling for 'p' tag is applied after the "last-paragraph" class styling:

// props
    tagsStyles: { p: { color: 'grey' } },
    classesStyles: { 'last-paragraph': { color: 'teal' } }

const html = `
    <p class="last-paragraph">Finally, this paragraph is style through the classesStyles prop</p>`;

We think it would make more sense to swap this round to be more similar to CSS Specificity, where class selectors take precedence over type selectors. What do you think?

I think it might be as simple as just swapping over lines 324 and 325 in HTML.js

Let me know if you approve of this change and I can submit a PR for it. I just wanted to check whether you agree with the idea of the change first!

<br> make a space

How can we use br ?

Unrecognised font family openSans-light

Hi any time I render my html with the above font family I am getting an error. Can you pease let me know what I am doing wrong. The html is valid as I have tested it on web page

Thanks in advance.

Calling PropTypes validators directly is not supported by the `prop-types` package.

Errors when using css inline style. E.g.:

<h1 style="margin-top: 20px;">Header</h1>

Using:

"react": "16.0.0-alpha.12",
"react-native": "0.45.1",
"react-native-render-html": "^2.0.0",

Fail on import HTMLStyles in project Demo

Hi @archriss

On Demo project this import fail

react-native-render-html/Demo/snippets.js

import { _constructStyles } from 'react-native-render-html/HTMLStyles';
to
import { _constructStyles } from 'react-native-render-html/src/HTMLStyles'; OK

Support <table> tag

Hello,

Does it support <table> tag ?

Thank you,

EDIT: solution here

Android issue: View within Text

Getting Nesting of <View> within <Text> is not supported on Android. error when trying to use custom renderer for iframe.

Note: You must add iframe to HTMLUtils.js in order to allow it to render.

Sample renderer:
const renderers = { iframe: (htmlAttribs, children, passProps) => { return (<View><Text>Video here</Text></View>); } }

Styling all text

Hi, I was wondering if there was an easy way to style all <Text/> elements, i.e. change the color.
Reading the docs, the only ways I can see of doing this would be:

add every element to tagStyles
add a custom renderer for every tag to add a class and add that to classesStyles

Maybe something like:

renderedTagStyles: {
    {text: {color: "red"}}
}

Warning for unique "key" prop when rendering HTML

Hi,

I upgraded to 3.5.0 as well as some react modules and I am now receiving a warning on rendering html.

"Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of HTML. See https://fb.me/react-warning-keys for more information.

It goes away if I comment out return <HTML html={description} renderers={renderers} />; so I know it has to do with the HTML I am attempting to render.

It also calls out this line specifically
p: (htmlAttribs, children, passProps) => <Text style={{ fontWeight: 'normal', color: '#333', fontSize: 14, fontFamily: 'roboto_slab' }} {...passProps}>{children}</Text>,

Here is my package.json

  "dependencies": {
    "@expo/vector-icons": "^5.2.0",
    "axios": "^0.16.2",
    "expo": "^22.0.0",
    "moment": "^2.18.1",
    "numeral": "^2.0.6",
    "react": "16.0.0-beta.5",
    "react-native": "https://github.com/expo/react-native/archive/sdk-22.0.1.tar.gz",
    "react-native-button": "^2.1.0",
    "react-native-communications": "^2.2.1",
    "react-native-loading-spinner-overlay": "^0.5.2",
    "react-native-navigation": "^1.1.262",
    "react-native-offline": "^3.1.0",
    "react-native-render-html": "^3.5.0",
    "react-native-search-box": "^0.0.13",
    "react-navigation": "^1.0.0-beta.11",
    "react-redux": "^5.0.5",
    "redux": "^3.7.2",
    "redux-persist": "^4.8.3",
    "sentry-expo": "^1.6.0"
  }

img bug

If the img is in the end of post, will go to the start of post.

set a customizable warper container to be able to switch from Portrait to Landscape

To be able to smoothly switch from Portrait to Landscape, even encapsulated into
Animated.createAnimatedComponent( HTML );
the view container doesn't handle Animated Object.

Could you convert the render() func returned View (line 131)

from:

 return (
    <View style={this.props.containerStyle || {}}>
       { RNNodes }
    </View>
 );

to:

 return (
    <Animated.View style={this.props.containerStyle || {}}>
       { RNNodes }
    </Animated.View>
 );

So we can send styles.containerStyle with Animated effect without rebuilding the view.

JSON value 'inherit' of type NSString cannot be converted to NSNumber

import React, {Component} from 'react';
import {View} from 'react-native';
import HTML from 'react-native-render-html';

const htmlContent = `<h3 style="margin: 0px 0px 1.25rem; padding: 0px; border: 0px; font-variant-numeric: inherit; font-stretch: inherit; font-size: 1.25rem; line-height: 1.3; font-family: 'Open Sans', Helvetica, Arial, sans-serif; vertical-align: baseline; text-align: center;"><strong style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline;">TEAM</strong><br />T- Together<br />E- Everyone<br />A- Achieves<br />M- More</h3>`

export default class MessageView extends Component {
    render(){
       return(
          <View>
                <HTML html={htmlContent}/>
            </View>
       )
    }
}

Following error was shown:

Custom Inline Tags

As far as I can tell, even if a custom tag is inside something like a <p> tag, its rendered component won't be rendered inside that parent tag's Text node.

e.g. given this HTML markup

<p>Foo <x-mytag>Bar</x-mytag> Baz</p>

I'd like to render something like this

<Text>Foo <MyTag>Bar</MyTag> Baz</Text>

But instead what i get is this

<Text>Foo</Text>
<MyTag>Bar</MyTag>
<Text>Baz</Text>

Is there any way to achieve this?

TagsStyles for <p> tags

Setting color style on a p tag that contains children seems to throw a warning:

"Warning: Failed prop type: Invalid props.style key 'color' supplied to 'View'.

Any idea why this happens? I'm guessing there's some logic to check whether it has children and change it to a View instead of a Text component?

Is there a way to set the default of ALL text to white?

Thanks for your help.

"Please provide the html or uri prop"

I have a view that consists of a few components. The HTML content is displaying in the app, however there is a warning for each of the components - react-native-render-html "Please provide the html or uri prop. - but every component has a html prop.

Request: <meta> tags support

Thanks for an incredible addon! It's super fast and easy to use.

I have a request though: I would be nice if we could include some custom meta tags.

Specifically, I need this to be able to zoom in on some HTML text.
I would use this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=2.0">

link's doesn't opening

When i click on html view's link nothing is happening. I checked my html string and everything looks good on that side. Is that a bug or am i doing something wrong?

r.n version 0.49.3
react-native-render-html version 3.5.2