Skip to content

font-size contains medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit cause crash #122

@ikhsanalatsary

Description

@ikhsanalatsary

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 Sure

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

Both, especially Android

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

YES, cause crash in production

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

YES

Environment

Environment:
React: 16.2.0
React native: 0.51.0
react-native-render-html: 3.9.0

Target Platform:
Android (5.1)
iOS (11.2)

Steps to Reproduce

(Write your steps here:)

  1. Create a react native component using react-native-render-html
  2. Load a URL that uses CSS that defines font-size with 'medium' or 'xx-small' or 'x-small' or 'small' 'large' or 'x-large' or 'xx-large' or smaller' or 'larger' or 'length' or 'initial' or 'inherit'
  3. I used this:
`<p style="font-family: Helvetica, Verdana, sans-serif; font-size: large;">React Native JS code runs as a web worker inside this tab.</p>
<p style="font-family: Helvetica, Verdana, sans-serif; font-size: large;">Press&nbsp;<kbd id="shortcut" class="shortcut" style="border-radius: 4px; color: #eeeeee; background-color: #333333; font-family: Monaco, monospace; font-size: medium; letter-spacing: 3px; padding: 4px;">⌘⌥I</kbd>&nbsp;to open Developer Tools. Enable&nbsp;<a href="https://stackoverflow.com/a/17324511/232122" target="_blank">Pause On Caught Exceptions</a>for a better debugging experience.</p>`

Expected Behavior

The usage of the string value of font-size in CSS converts nicely (at least does not crash) to React Native elements.

Actual Behavior

ExceptionsManager.js:73 Warning: Failed prop type: Invalid prop `fontSize` of type `string` supplied to `Text`, expected `number`.
Bad object: {
  "marginTop": 0,
  "fontSize": "large"
}
    in Text (at HTML.js:460)
ExceptionsManager.js:73 Warning: Failed prop type: Invalid prop `fontSize` of type `string` supplied to `Text`, expected `number`.
Bad object: {
  "borderRadius": 4,
  "color": "#eeeeee",
  "backgroundColor": "#333333",
  "fontSize": "medium",
  "letterSpacing": 3,
  "padding": 4
}
    in Text (at HTML.js:460)

and the app has stopped

Reproducible Demo

Demo crash via snack expo

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementAn enhancement is a change that is not a feature.new feature

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions