Comments (7)
Exilz
commented on May 13, 2024
1
Hi @chadmorrow, thanks for the kind words !
As documented in the README :
Please note that if you set width AND height through any mean of styling, imagesMaxWidth will be ignored.
In your example with the ghost comic, you do have height and width, so imagesMaxWidth isn't doing anything.
It resizes properly as long as I remove them
I'm not sure what's the best in your situation, because I guess you can't make sure these attributes aren't in your HTML. Well, you could use alterChildren to remove them but it feels like hacking. I really think height and width should override anything if they're supplied.
Please tell me if you have some ideas to resolve this.
Regarding your other issue, at the moment, there is no behavior regarding <iframe> to make sure it's not rendered off-screen, it depends on height and width attributes, or defaults to 200x200, which is kinda terrible I guess.
It would be nice to add a fallback depending on the width of the screen instead of a static value.
from react-native-render-html.
Exilz
commented on May 13, 2024
1
I improved the iframe renderer in 3.5.0. It's not perfect, but at least, iframes cannot be rendered with a width superior to your device's viewport. That's a little better, but for advanced usage you'll need to write your own renderer.
Feel free to re open another issue if your image rendering problem actually comes from this plugin.
from react-native-render-html.
chadmorrow
commented on May 13, 2024
I don't know if this is a related issue but all youtube embedded videos also spill off the screen.
Oh and I'm currently using 3.5.0-rc.3 of react-native-render-html
from react-native-render-html.
chadmorrow
commented on May 13, 2024
Oh, the iframe issue might just be a misunderstanding on my part. I thought I had read on a different issue that had been closed that there was support added for iframes similar to images but now I don't see where I would have read that.
Thanks for looking into the issue with the images. I can't quite figure out why the height and width attributes are always set to 1 on some of these problem images and it doesn't seem to matter what I try to override them to, they always render full size. I'll keep working on it though and let you know if I figure anything out. Thank you again for taking the time to look into this!
from react-native-render-html.
Exilz
commented on May 13, 2024
When I request the image of your example it's actually a 1x1 image, so your issue must come from your feed.
I'll think about improving the iframe renderer and keep you posted.
from react-native-render-html.
Stevevelt
commented on May 13, 2024
The image size issue is still a problem for me as well. It seems like this did not get resolved
from react-native-render-html.
gvsakhil
commented on May 13, 2024
@Stevevelt
Try this
<HTML html={textToRender} {...htmlConfig} ignoredStyles={['height', 'width']} imagesMaxWidth={Dimensions.get('window').width} style={{ width: '100%' }} />
Try adding ignoredStyles
from react-native-render-html.
Related Issues (20)
- Style is not working in img tags
- use a custom component for rendering HOT 4
- tagsStyles not working with custom font HOT 2
- Adjust the height container when inject a custom component in renders (image)
- other fonts don't work for children tags if you set font for parent HOT 1
- Failed prop type: Invalid prop `textDecorationColor` supplied to `Text`
- Render Error, maximum call stack size exceeded (native stack depth) HOT 2
- `<img>` embeds possibly not making use of `srcset` attribute resulting in blurry images HOT 3
- It is slow, it takes to import the components around 2 seconds
- Need Help for Break Lines Implementation HOT 1
- webView props mediaPlaybackRequiresUserAction not work HOT 2
- Not working android Realme device HOT 1
- defaultTextProps style overwrites renderers HOT 1
- Email or text is not showing proper way
- Slow navigate to a screen contains 12k words (including table)
- RTL is not working on p or div tag HOT 1
- the app crashes while rendering the table on Android. `table-plugin`
- How to disable Font Scaling in react-native-render-html v6 HOT 1
- Font family not working HOT 2
- React Native 0.74 (Bridgeless) Support HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-render-html.