im building a summary view where i import text from and uri inside a webview ad i inject js to change size but when i do that the text go outside the webview.

This is how the uri loads into the webview:

and this is what i get when i change the font-size:

this is the webview :

  <WebView 
    key={this.state.value}
    ref={webview => this.setState({WebViewRef:webview})}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    scalesPageToFit={false}
    onLoadEnd={
      this.setState({
        visibleBack:false
      })
    }
    automaticallyAdjustContentInsets={false}
    source={{ uri: `http://backend.iferu.com/cleanbook.php?idbook=${this.props.product.id}` }} style={{paddingLeft:15,height:this.state.webViewHeight ,width: Dimensions.get('window').width - 50}}
    key={this.state.key}
    injectedJavaScript={jsBeforeLoad}
    onMessage={this.onMessage}
    scrollEnabled={false}
    style={{ height : this.state.webViewHeight}}    
/>

and this is the js im injecting to change font-size:

sendDataToWebView(){
    let injectedData =
    `
      // document.getElementsByTagName("body")[0].style.fontSize = '${this.state.fontSizeState}px';
      $('#takeAways').css({
        'font-size':${this.state.fontSizeState},
      });
      $('#recomClass').css({
        'font-size':${this.state.fontSizeState}
      });
      $('#summaryTitle').css({
        'font-size':${this.state.fontSizeState}
      });
      $('#summaryText').css({
        'font-size':${this.state.fontSizeState}
      });
      $('#auteurTitle').css({
        'font-size':${this.state.fontSizeState}
      });
      $('#auteurText').css({
        'font-size':${this.state.fontSizeState}
      });
      window.ReactNativeWebView.postMessage(Math.max(document.body.offsetHeight, document.body.scrollHeight));  
    `;
    this.state.WebViewRef.injectJavaScript(injectedData);
  }