Comments (9)
Exilz
commented on July 21, 2024
4
You're also missing your image's source, try something like this (untested, I wrote it quickly) :
render(){
const HTMLStyles =
{
h2: {fontSize:20,color: '#303235'},
img: {marginBottom:15}
}
const defaultRenderer = {
renderers: {
img: (htmlAttribs, children, convertedCSSStyles, passProps) => <Image key={passProps.key} style={{width:90, height: 90}} source={{ uri: htmlAttribs.src }}/>
}
}
return(
<ScrollView>
<View>
<View style={styles.previewContent} >
<HTML
html={this.state.articleContent}
imagesMaxWidth={Dimensions.get('window').width}
tagsStyles={ HTMLStyles }
{...defaultRenderer}
/>
</View>
</View>
</ScrollView>
)
}Anyway, this has nothing to do with the module. Adding custom renderers is a quite advanced usage, if you're still new with react and react-native, it's a lot to wrap your head around.
The snippet above should be working, or almost working. Good luck with your custom implementation.
Feel free to re open a new issue if you feel like you're encountering an issue due to the module itself.
from react-native-render-html.
aashish-pixere
commented on July 21, 2024
1
You're also missing your image's source, try something like this (untested, I wrote it quickly) :
render(){ const HTMLStyles = { h2: {fontSize:20,color: '#303235'}, img: {marginBottom:15} } const defaultRenderer = { renderers: { img: (htmlAttribs, children, convertedCSSStyles, passProps) => <Image key={passProps.key} style={{width:90, height: 90}} source={{ uri: htmlAttribs.src }}/> } } return( <ScrollView> <View> <View style={styles.previewContent} > <HTML html={this.state.articleContent} imagesMaxWidth={Dimensions.get('window').width} tagsStyles={ HTMLStyles } {...defaultRenderer} /> </View> </View> </ScrollView> ) }Anyway, this has nothing to do with the module. Adding custom renderers is a quite advanced usage, if you're still new with react and react-native, it's a lot to wrap your head around.
The snippet above should be working, or almost working. Good luck with your custom implementation.
Feel free to re open a new issue if you feel like you're encountering an issue due to the module itself.
Hey! I am tried your code and it's not working means images are disappeared without any error in code. So please let me know if there any change for current library version of HTML ("react-native-render-html": "^4.2.0").
========================
Code :
const defaultRenderer = {
renderers: {
img: (htmlAttribs, children, convertedCSSStyles, passProps) => <Image key={passProps.key} resizeMode={'contain'} source={{ uri: htmlAttribs.src }}/>
}
}
<HTML {...defaultRenderer} {...DEFAULT_PROPS} tagsStyles={ HTMLStyles } baseFontStyle={updateFontAndLineHeight(13, 19, this.props.fontPercent)} html={entities.decode(html)}></HTML>
from react-native-render-html.
Exilz
commented on July 21, 2024
Hi, you need to create a custom renderer.
Use the various arguments it receives to render a touchable component for your specific image, and render a plain Image for everything else.
from react-native-render-html.
butavpaul
commented on July 21, 2024
Hi, thank you for your message. I've tried to do something but the images doesn't appear anymore. I'm new to react and I can't figure it out why is this happening.
This is what I have now.
render(){
const HTMLStyles =
{
h2: {fontSize:20,color: '#303235'},
img: {marginBottom:15}
}
const defaultRenderer = {
renderers: {
img: () => <Image style={{width:90}}/>
}
}
return(
<ScrollView>
<View>
<View style={styles.previewContent} >
<HTML
html={this.state.articleContent}
imagesMaxWidth={Dimensions.get('window').width}
tagsStyles={ HTMLStyles }
{...defaultRenderer}
/>
</View>
</View>
</ScrollView>
)
}
It seems that the renderer finds the Image but it doesn't apply any props to it. I've changed <Image... to
<TouchableOpacity onPress={this._showImage()}/> but it doesn't work.
Thank you!
from react-native-render-html.
Exilz
commented on July 21, 2024
I think you're missing the height attribute in your image's style.
from react-native-render-html.
butavpaul
commented on July 21, 2024
It still doesn't work. I also get this error even if I add height.
from react-native-render-html.
ReangeloJ
commented on July 21, 2024
Hey i tried your code and it's almost fully working. However when I add a modal view and use the html.attribs.src as source it only loads the last element in the html body. So im not able to open specific photos.
from react-native-render-html.
mahadevsempire
commented on July 21, 2024
Image is not showing, the htmlAttribs.src is undefined and the passProps.key is also undefined
from react-native-render-html.
Aiosa
commented on July 21, 2024
I believe the API has changed, it is more 'modern' to pass objects instead of argument list to functions, it gives the freedom of 'named arguments'
from react-native-render-html.
Related Issues (20)
- 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) HOT 1
- 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
- Bullet didn't move with text when add padding to list item
- React 0.74 - Update defaultProps to JavaScript default parameters. HOT 36
- Can not render superscript <sup> tag 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.