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.

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

iOS: CSS border-style=none is invalid - causes RN red screen warning #319

Closed
tdoran opened this issue Nov 22, 2019 · 1 comment
Closed
Labels
bug Crush'em all. domain:css Related to inline CSS.

Comments

@tdoran
Copy link

tdoran commented Nov 22, 2019

iOS native styling can't accept border style as none. If HTML containing style="border-style: none; is passed in, RN Red-screen warning is shown on RN debug mode:
Invalid RCTBorderStyle 'none'. should be one of: (dashed, dotted, solid)

Simulator Screen Shot - iPhone X - 2019-11-22 at 11 18 45

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?

iOS only

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

Not testable at present

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

Environment

Environment:
React: 16.9.0
React native: 0.61.2
react-native-render-html: 4.1.2

Target Platform:
iOS 12.4

Steps to Reproduce

  1. pass in any html with style="border-style: none;
  2. Try to render it in debug mode
  3. There is no visible border, but there is a warning

e.g. <iframe src="www.example.org" scrolling="no" style="border-style: none; width:100%; height:290px;"></iframe>

Expected Behavior

react-native-render-html renders the HTML without warning - and converts border-style=none to the correct format for iOS native styling.

Actual Behavior

RN gives red screen warning:
Invalid RCTBorderStyle 'none'. should be one of: (dashed, dotted, solid)

@WLYau
Copy link

WLYau commented Jan 6, 2020

I'm experiencing the same issue and tried using ErrorBoundary to capture the error but that didn't work.

@jsamr jsamr added bug Crush'em all. domain:css Related to inline CSS. labels Jul 4, 2020
jsamr added a commit that referenced this issue Jul 17, 2020
Any CSS rule which has a "none" value will be discarded if and only if
it is not a display: none; rule.

fix #319
fix #361
jsamr added a commit that referenced this issue Jul 17, 2020
Any CSS rule which has a "none" value will be discarded if and only if
it is not a display: none; rule.

fix #319
fix #361
@jsamr jsamr closed this as completed in 93cb9c5 Jul 17, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Crush'em all. domain:css Related to inline CSS.
Projects
None yet
Development

No branches or pull requests

3 participants