react-native-htmlview

react-native-htmlview copied to clipboard

Content wrapped in <p> tags followed by some inner tags sometimes leads to the inner tags not inheriting the styling of the <p> tag. Below is an example app which shows the issue. I'm also including a screenshot

Notice how the font-size returns to the default font-size after a couple of tags and then at the end returns to the font-size specified in textComponentProps.

I was only able to reproduce this on Android. I also could not find a shorter sequence of HTML that causes the issue (although any sequence that's longer does seem to have the issue).

Reproduced on: react: 16.5.0 react-native: 0.57.0 react-native-htmlview: 0.13.0

import React from 'react';
import HTMLView from 'react-native-htmlview'
import { StyleSheet, View, TouchableOpacity } from 'react-native';

export default class App extends React.Component {
  render() {
    const htmlContent =
    `<p>
      <i>START</i>
      <i>s</i>
      <b>s</b>
      <i>s</i>
      <b>s</b>
      <i>s</i>
      <b>s</b>
      <b>s</b>
      <b>s</b>
      <i>s</i>
      <i>s</i>
      <b>s</b>
      <i>s</i>
      <b>s</b>
      <b>s</b>
      <i>s</i>
      <i>s</i>
      <b>s</b>
      <b>s</b>
      <i>s</i>
      <i>s</i>
      <b>s</b>
      <i>s</i>
      <b>s</b>
      <b>s</b>
      <b>s</b>
      <i>s</i>
      <b>END</b>
    </p>`;
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
      },
      defaultStyle: {
        color: 'red',
        fontSize: 30,
        lineHeight: 18
      }
    })
    return (
      <View style={styles.container}>
        <HTMLView
          textComponentProps={{ style: styles.defaultStyle }}
          RootComponent={TouchableOpacity}
          value={htmlContent} />
      </View>
    )
  }
}

This is still an issue on React Native 0.63.4