title: Adding CSS styling to React Native WebView
body: <p>So I am a bit stumped on this ... I'm using a WebView in a portion of our app, the reason for the WebView is because we are pulling from an API endpoint that returns to us an HTML string. The font size and other things in this HTML string aren't styled for the purpose of using in a mobile app so we are trying to add some stylistic changes to it for better viewability. I've seen people add Style Tags at the top of the html file to add specific html styles to the element, and everything is generally working except the font size in the HTML of WebView renders differently every time I click into the screen that has the WebView contained in it.</p>
  
  <p>Here is the current code (style + html + script):</p>
  
  <pre><code>let rawHTML = htmlStyle + this.props.itemDetails.body_html.replace("\n", "").replace(/("\/\/[c])\w/g, "\"https://cd").replace(/(width: 10.094%;)/g, "").replace(/(width: 84.906%;)/g, "") + heightScript
  </code></pre>
  
  <p>I have also console logged this string out in the debugger to make sure it's stitched well, and have even created and index.html and pasted in there the exact string, to make sure it's just showing up properly there.</p>
  
  <p>Here is the style string:</p>
  
  <pre><code>let htmlStyle = `&lt;style&gt;
                          #height-calculator {
                            margin: 0;
                            padding: 0;
                          }
                          #height-calculator {
                              position: absolute;
                              top: 0;
                              left: 0;
                              right: 0;
                              margin: 0;
                              padding: 0;
                          }
                          body {
                            width:100%;
                          }
                          h2 {
                            font-size: 48px;
                          }
                          p {
                            font-size: 18px;
                          }
                          h3 {
                            font-size: 32px
                          }
                          img {
                            width:98%;
                          }
                          td {
                            display: block !important;
                            width: 95% !important;
                          }
                          img {
                            width:98%;
                          }
                          hr {
                            width: 98%;
                          }
                          ol li ol li ol li {
                            position: relative; right: 85px;
                          }
                          ul {
                            width: 98%,
                            margin-left: -25px;
                          }
                          li {
                            width: 98%;
                          }
                          .tabs {
                            display: none;
                          }
                          .tabs &gt; li {
                            display: none;
                          }
                          .tabs-content {
                            padding: 0;
                            list-style-type: none;
                          }
                          tr {
                            display: flex;
                            flex-direction: column;
                          }
                 &lt;/style&gt;`
  </code></pre>
  
  <p>And finally here is the WebView:</p>
  
  <pre><code>&lt;WebView
    javaScriptEnabled={true}
    onNavigationStateChange={this.onNavigationStateChange.bind(this)}
    scrollEnabled={false}
    source={{html: rawHTML}}
    style={{height: Number(this.state.height)}}
    domStorageEnabled={true}
    scalesPageToFit={true}
    decelerationRate="normal"
    javaScriptEnabledAndroid={true} /&gt;
  </code></pre>
  
  <p>Also, as I mentioned all the other styles applied are working, it's mainly just the font size that is super unpredictable. </p>
  
  <p>Here is the view when I click it one time:</p>
  
  <p><a href="https://i.stack.imgur.com/2ohNJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2ohNJ.png" alt="enter image description here"></a></p>
  
  <p>And then I don't change or exit the app, I just go back, and then click the same button to enter that same display and I get this sometimes (it sometimes takes multiple clicks ... it's very unpredictable):</p>
  
  <p><a href="https://i.stack.imgur.com/TC6Km.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TC6Km.png" alt="enter image description here"></a></p>
  
  <p>I have a video of this as well, if you feel that would help this explanation. I'm trying to retell it the best I can haha. </p>
  
  <p><strong>Edit:</strong></p>
  
  <p>I think this might be a simulator only related issue? If anyone could speak some wisdom into that, that would be awesome still. I can't seem to reproduce this error on production build.</p>