Custom renderer wrapper property being ignored

[tomdaniel-it]

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

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?

Yes

Environment

Not environment specific

Steps to Reproduce

1. Add a html string to be given to the HTML component with a tag included in the TEXT_TAGS array (<span></span> for example)
2. Add a custom renderer, including a renderer for the span tag which returns a View component with anything inside
3. Add a custom wrapper to the custom renderer for the span tag, which is wrapper: 'View'

Expected Behavior

Because span is in the list of TEXT_TAGS, it gets wrapped by a Text component by default. Since we are using a View in the custom renderer, this can not happen since Text's in View's throw errors. The custom wrapper with value 'View' will make sure it is wrapped with a View component instead.

Actual Behavior

The mapDOMNodesTORNElements function maps each DOMNode, setting a wrapper property at the end with a value of 'View' or 'Text'. This is done with an if-else structure:

• 1: if (children need a view)
  • then: set wrapper to 'View'
• 2: else if (tagname (span) is present in the array of TEXT_TAGS or MIXED_TAGS)
  • then: set wrapper to 'Text'
• 3: else if (custom renderer is present and this renderer has a wrapper property)
  • then: set wrapper to the wrapper property of the custom renderer

The tagname span is present in TEXT_TAGS, making the wrapper having the value 'Text'. This makes it that our View's (defined in custom renderer for span tag) are wrapped with a Text component, crashing the application.

The order of the if statements should be 3, 1, 2, giving custom properties priority over the default properties.

Reproducible Demo

https://snack.expo.io/@tomdaniel-it/react-native-render-html-bug

[jsamr]

The fix has been backported to v4.2.3-beta.1. See the instructions to test and report here #390!