Webview help rendering html

[ispcloudservices]

I a trying to obtained this result

this is the output that I want, but instead i get these ones.

IOS

Android

I have searching forever on the net and noting

[thetc]

Can you make an example in snack.expo.io?

[ispcloudservices]

Unnamed Snack - Snack

[thetc]

That one doesn’t run because it is missing some imports / assets / etc. I mean one that runs and demonstrates the issue you’re describing.

[ispcloudservices]

Well i am sowing an html, what I can do is put the html on smack

[thetc]

Yes, you can hard code the source you are passing to the webview

[ispcloudservices]

Unnamed Snack - Snack

[jimmylee]

@ispcloudservices what I would do before you try to integrate your web view, is first style a component on the screen that takes up the full width and height. Use a background color to prove that you have that working first, then bring in the webview.

[ispcloudservices]

Everything is working fine, just with the wrong output

[jimmylee]

@ispcloudservices sorry could you clarify what that means? What is the wrong output? The web document has broken styles? Your styles are broken?

As posted in another thread of yours: WebView - Snack is an example where the WebView is taking up the full screen (your original goal).

[ispcloudservices]

Thanks for replying to my post, I am sorry for not clarifying.

I am connecting to a server, and the server throe me a json with an HTML inside. When I parse the json, I get the HTML witch is what I hardcode on Snack. The problem is the following, I get the wrong output every time, I tried putting the html in a WebView, I tried a external library and still.

This is the image on android

The same image in IOS

And this is what I want

[jimmylee]

@ispcloudservices hey! Thanks for clarifying

I can understand how this is frustrating, the example I sent to you is working on both Android and iOS, which makes me question the contents of the WebView and whether or not the CSS/HTML is written appropriately. If you try the code in this Snack: WebView - Snack inside of your project code you may be able to reach a better understanding of what is going wrong with your layout. What about parent element styles?

A technique I’ve been using, that I suggested you try earlier today is using a background color (cyan, pink, etc) to determine if your layout code is working as intended. Since everything is white, its almost impossible for you to see if your elements are rendered to the space you intended for them.

You’re going to have to go and check all of the details and make sure everything lines up!

[ispcloudservices]

But I don’t know how to manipulate an html,
this is my output

I don’t really know what to do

this is the html from the server

<table style="height: 400px; width: 600px; background-color: #7a91e6;">
<tbody>
<tr>
<td style="text-align: center; width: 416px;">
<div><span style="font-family: 'century gothic', sans-serif; font-size: 36pt;">HAPPY BIRTHDAY</span><br /><br /><br /></div>
<div><span style="font-family: 'century gothic', sans-serif; font-size: 36pt;"><img src="https://storage.googleapis.com/toogleboximage/1f9a92eece658f7910ceaa146b507476a9130eebf150065308a9001dcd4c8f8561b106d0dd882f360696b84a67f176c5b9e39f1a8aeac08226ae8cd84694f8b8/img_1526592060905" width="201" height="198" /></span></div>
<div><span style="font-family: 'century gothic', sans-serif; font-size: 36pt;">DEAR FRANK</span></div>
</td>
</tr>
</tbody>
</table>
<div><span style="font-family: 'century gothic', sans-serif; font-size: 36pt;"><iframe class="html2canvas-container" style="visibility: hidden; position: fixed; left: -10000px; top: 0px; border: 0px;" width="616" height="416" scrolling="no" data-html2canvas-ignore="true"></iframe><iframe class="html2canvas-container" style="visibility: hidden; position: fixed; left: -10000px; top: 0px; border: 0px;" width="616" height="416" scrolling="no" data-html2canvas-ignore="true"></iframe></span></div>

this is the iPhone output

and the desire output

[jimmylee]

Hey @ispcloudservices

• Please try my technique of building a layout first without the WebView. Use a background color and make sure you know how to apply styles to React Native components to take up the entire screen. The purpose of this is to ensure that we know on the React Native styles are not the problem here. A really good programming technique is to isolate the areas of difficulty so we don’t find ourselves trying to fix code that already works.

• Second, you’re using fixed width styles in the HTML and tables. You need to learn what block, inline-block, and inline are and what affect they have on the box model for rendered DOM elements. A technique I recommend is to use width: 100% styles to ensure that they are fluid. But child elements that are fixed width may break the rules of the parent so you need to be careful.

• Each time you post an example, you use different screenshots so I’m not 100% sure if you’re following our help. But it seems like you’re getting closer?

Hope this helps! Good luck

[ispcloudservices]

Thanks for everything dude, are you in slack? It would be too bothersome if I show you my progress

[ispcloudservices]

@jimmylee Thank you very much for your help, I got it to work on IOS look

Android do not work as well, I think I have to put conditionals

but anyway I did it with this

 ref={'webview'}
                source={{html: response}}
                injectedJavaScript={`const meta = document.createElement('meta'); meta.setAttribute('content',
                'width=device-width, initial-scale=0.7, maximum-scale=0.7, user-scalable=1');
                meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `}
                style={{alignItems: 'flex-start'}}
                scalesPageToFit={true}/>