Search code examples
htmlreactjsreact-nativereact-native-render-html

React native render HTMl -> classstyle not working


Hi i am rendering HTML contant with using react-native-render-html.

    var strHTML = ''
strHTML = `<html><head></head><body><div id="container"><div id="one"><h3>Sunny</h3><p>Developer</p><p>Ist Floor, Shubham Complex, Ghatlodiya</p><p>Ahmedabad, Gujarat 380061</p></div><div id="two"><h3>9999999</h3><p>Specification </p></div></div></body></html>`

<ScrollView style={{ flex: 1 }}>
            <HTML html={htmlContent} tagsStyles={tagsStyles} classesStyles={classStyles} imagesMaxWidth={Dimensions.get('window').width} />
        </ScrollView>

    const styles = {
  tagsStyles: { 
      p: {margin: 2},
      h3: {margin: 2, color: 'red'}
  }

};

const classStyles = { 
  "container": { height: 200,  background: 'red'}, 
    "one": {   height: 200,float: 'left' }, 
    "two": {   marginLeft: 30,height: 200 }
};

But classStyles(container,one,two) does not have effect on that


Solution

  • You need to change html

    id

    To

    class