Doesn't handle incompatible value property

[louisiscoding]

Everytime i'm facing some HTML using property such as 'initial', 'normal', ect.
It is isn't handled properly by this library

Warning: Failed prop type: Invalid prop `textDecorationColor` supplied to `Text`: initial
Warning: Failed prop type: Invalid prop `display` of value `inline` supplied to `Text`, expected one of ["none","flex"]
Warning: Failed prop type: Invalid prop `letterSpacing` of type `string` supplied to `Text`, expected `number`.
Bad object: {
  "letterSpacing": "normal"
}
Warning: Failed prop type: Invalid prop `textDecorationStyle` of value `initial` supplied to `Text`, expected one of ["solid","double","dotted","dashed"].
Failed prop type: Invalid prop `textAlign` of value `start` supplied to `Text`, expected one of ["auto","left","right","center","justify"].

I can't possibly ignore all these styling.

Using react-native-render-html: 3.9.3,

[Exilz]

I think we should set up some kind of object that holds every conversion that needs to be done when a style property is available both in the browser and react native but with different accepted values.

The current logic where '18px' is converted into 18 just doesn't cut it. We need to remove specific code and handle all of this into a single helper.

This should be one of the last major steps towards being able to render any HTML string without crashing.

[iamdurui]

I also have this crash!! Failed prop type: Invalid prop display of value inline supplied to ForwardRef, expected one of ["none","flex"].

[sorakrisc]

any follow up on this?

[M4rcDev]

For me its an invalid propety in 'letterSpacing'

[MrLich]

any one fixed this bug successful . I have faced it with props display 'inline': should be one of (flex, none)

[zedtux]

I have this issue too :

Warning: Failed prop type: Invalid prop `letterSpacing` of type `string` supplied to `ForwardRef(Text)`, expected `number`.

[evan0204]

I have this issue too
Invalid property caused a crash

Warning: Failed prop type: Invalid prop textAlignof valuestartsupplied toForwardRef, expected one of ["auto","left","right","center","justify"].

[khaledwj90]

I fixed this issue by adding ignoredStyles={['letter-spacing']} Prop.
https://github.com/archriss/react-native-render-html#ignoring-html-content

[zhugy-yami]

I have this issue too!
Please follow up on this
v4.1.1

[ronyv]

Had the same issue with this library and spend almost 2 days trying to prevent the app from crashing. At the end i've fixed this issue in a different way. I have used the inbuilt WebView component for html rendering. Two issues i faced with WebView component are:

1. Dynamic height for the view based on the html content.
2. to make the clickable links to open in an external browser.

I've fixed both the above issues in the following way.

1. Declare these const variables. This will be used in the WebView.

const script = '<script>
window.location.hash = 1;
var calculator = document.createElement("div");
calculator.id = "height-calculator";
while (document.body.firstChild) {
calculator.appendChild(document.body.firstChild);
}
document.body.appendChild(calculator);
document.title = calculator.scrollHeight;
</script>';

const style = '<style>
body, html, #height-calculator {
margin: 0;
padding: 0;
}
#height-calculator {
position: absolute;
top: 0;
left: 0;
right: 0;
}
</style>';

2. implement the WebView with onNavigationStateChange

<WebView
ref="webview"
originWhitelist={['*']}
source={{html: this.state.htmlcontent + style + script}}
style={{ height: this.state.contentHeight}}
scrollEnabled={false}
onNavigationStateChange={this.onNavigationChange.bind(this)}>

3. create onNavigationChange listener method.

onNavigationChange(event) {
if(event.navigationType && event.navigationType === 'click') {
this.refs.webview.stopLoading();
Linking.openURL(event.url);
}
else if (event.title) {
const htmlHeight = Number(event.title) //convert to number
this.setState({contentHeight:htmlHeight});
}
}

Hope this helps...

[ds8k]

What would be the simplest way of completely ignoring the style attribute entirely?

[saadzaman]

ds8k !! was wondering the same. Ignoring styles fixed this issue. I ignored this by using this prop allowedStyles={[]}

[ManigandanRaamanathan]

ds8k !! was wondering the same. Ignoring styles fixed this issue. I ignored this by using this prop allowedStyles={[]}

This solution worked well.

[priyanka931]

Thanks @saadzaman !! Good to go

[yuezonglun]

ignoredStyles={['font-family', 'display','text-align',]}
allowedStyles={["none","flex"]}

[jsamr]

I have implemented a bunch of fixes, see #382, which should also fix what you've all encountered here. If you happen to still have an issue after release 4.2.2, please open an new ticket. Closing now, expecting release very soon.

[jsamr]

This issue will be fixed in version 4.2.2.
A pre-release is already available if you want this fix now, see #385.