Comments (10)
Hi, your code formatting broke in your last message, so it's kinda hard to read but I think got it.
In your constructor, your title
is empty. You're setting its content with a setState
in componentDidUpdate
. That means that when your component is first mounted, you don't have any content to render, then, you use setState
to update it.
You should set all your content directly in your constructor (it has your props
in its first argument !), and it should be allright.
By the way, I'm not sure why you're using two HTML
components. Why wouldn't you use only one ?
from react-native-render-html.
Never mind, managed to solve here.
from react-native-render-html.
Just as a top tip to anyone seeing this, html=""
will also cause this warning. It doesn't seem to like empty strings...
from react-native-render-html.
@marceloHashzen do you mind sharing your solution??
from react-native-render-html.
Thanks a lot, that's fixed it! It looks a lot cleaner now ā no need for the state inside the constuctor anymore.
I was using two components because I'm a n00b and reasonably new to the React Native game :P
For those interested, updated code looks as follows:
import React from 'react';
import { StyleSheet, Image, Text, View, Dimensions } from 'react-native';
import HTML from 'react-native-render-html';
class ContentSection extends React.PureComponent {
constructor() {
super();
}
render() {
return (
<View style={this.props.containerStyles}>
<HTML html={ "<h2>" + this.props.title + "</h2>" + this.props.content.replace(/\n/g, "") } tagsStyles={{ p: { marginTop: 0, marginBottom: 12 }, blockquote: { backgroundColor: "#f1f1f1", padding: 12, paddingBottom: 0, marginTop: 6 } }} />
</View>
)
}
}
export default ContentSection;
from react-native-render-html.
Would you mind sharing your code, or perhaps some steps to replicate the error?
from react-native-render-html.
No problem. The below code is rendered multiple times within a FlatList component. There aren't really any steps ā I installed the package and used the HTML component:
import React from 'react';
import { StyleSheet, Image, Text, View, Dimensions } from 'react-native';
import HTML from 'react-native-render-html';
class ContentSection extends React.PureComponent {
constructor() {
super();
this.state = {
title: "",
content: "",
images: []
}
}
componentDidMount() {
this.setState({ title: this.props.title });
this.setState({ content: this.props.content.replace(/\n/g, "") });
this.setState({ images: this.props.gallery });
}
render() {
return (
<View style={this.props.containerStyles}>
<HTML html={this.state.title} />
<HTML html={this.state.content} tagsStyles={{ p: { marginTop: 0, marginBottom: 12 }, blockquote: { backgroundColor: "#f1f1f1", padding: 12, paddingBottom: 0, marginTop: 6 } }} />
</View>
)
}
}
export default ContentSection;
from react-native-render-html.
Hi, I'm using redux saga to fetch the data to render and I'm also getting this warning message every time. How can I solve this issue?
I've added a loading logic to render the content only after it is retrieved:
{ this.props.loading ? <ActivityIndicator /> : <HTML html={this.props.post.description} tagsStyles={textStyles} /> }
from react-native-render-html.
@aaronlinleyI am facing a similar kind of an issue. I am not using props, I am getting html data from an api and it shows this same kind of warning "react-native-render-html Please provide the html or uri prop". the problem is i am able to access the html but the screen comes out to be blank. the html data is not getting rendered.
Find attached my code:
import React, { Component } from 'react';
import {ScrollView, WebView, Animated, Easing, View, Text, StyleSheet, Dimensions, ImageBackground,TouchableOpacity, Button, AsyncStorage} from 'react-native';
import { Constants } from 'expo';
import { Carousel, AnimatedCarouselItem } from 'react-native-sideswipe'; // 0.0.6
import { Card, Badge } from 'react-native-elements'; // 0.18.5
import email from 'react-native-email';
import HTML from 'react-native-render-html';
export default class emailTemplates extends Component {
constructor(props){
super(props);
this.state={
width: Dimensions.get('window'),
content:'',
userId:'',
userToken:'',
htmlContent:''
//emailId:''
};
this.ServerAccess = this.ServerAccess.bind(this);
this.retrieveData = this.retrieveData.bind(this);
}
retrieveData = async() => {
console.warn('retrievedata')
try {
//await AsyncStorage.multiGet(['id', 'token'], value) -> value([['id', this.state.id], ['token', this.state.token]])
//await AsyncStorage.multiGet([['id'], ['token']]);
await AsyncStorage.multiGet(["id", "token", "sno", "job_title"]).then(response => {
// console.log(response[0][0]) // Key1
if (response !== null) {
// We have data!!
this.setState ({
userId: response[0][1],
userToken: response[1][1]
})
// console.warn('resApi', this.state.userId, this.state.userToken)
}
})
}
catch (error) {
// Error retrieving data
}
this.ServerAccess()
}
ServerAccess= () => {
// console.warn('entered',this.letter_no, this.state.userToken)
fetch("https://beta.piana.in/shakir/staffing/Api/mailerData" , {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'id': this.state.userId,
'Authorization': this.state.userToken,
'letter_no':this.letter_no
},
})
.then((response) => response.json())
.then((res) => {
//console.warn(res)
this.setState ({
content: res,
title: res[0].title,
htmlContent: res[0].content
})
// console.warn('here its',this.state.htmlContent, this.state.title)
})
}
componentDidMount() {
this.retrieveData()
//this.ServerAccess()import HTML from 'react-native-render-html';
}
componentWillMount() {
const { navigation } = this.props;
const emailid = navigation.getParam('emailID');
const candName = navigation.getParam('name');
const jobTitle = navigation.getParam('title');
const comp = navigation.getParam('companyName');
const letter_no = navigation.getParam('letter_no')
this.letter_no = letter_no,
this.email = emailid,
this.name = candName,
this.title = jobTitle,
this.companyName = comp
//console.warn('emailTemp', letter_no, jobTitle)
}
render() {
// console.warn('inrender',this.state.htmlContent)
const { width } = Dimensions.get('window');
const data = [
{
heading: ${this.state.title}
,
content: ${this.state.htmlContent}
},
{
heading: 'Template 2',
content: Dear ${this.name}, \n \n Thank you for applying to the ${this.title} position at ${this.companyName}. \n Iād like to inform you that we received your application. Our hiring team is currently reviewing all applications and we are planning to schedule interviews in the next two weeks. If you are among qualified candidates, you will receive a call/email from our one of our recruiters to schedule an interview. In any case, we will keep you posted on the status of your application. \n \n Best regards, \n Team HumanPi
},
{
heading: 'Template 3',
content: Dear ${this.name}, \n \n This is regarding the job you have applied for. We want to congratulate you for your selection at the position of ${this.title} at ${this.companyName}. We will get back to you shortly with the joining information. \n \n Best regards, \n Team HumanPi
},
]
// const data = ['Template 1', 'Template 2', 'Template 3' ]
//console.warn('hey', data[0].content)
return (
<ImageBackground source={require('../../../assets/gradient.png')} style = {styles.pageContainer}>
<Carousel
data={data}
style={{ width:width, maxHeight: 700}}
itemWidth={width - 60}
threshold={80}
contentOffset={12}
renderItem={({ itemIndex, currentIndex, item }) => (
<AnimatedCarouselItem
itemIndex={itemIndex}
currentIndex={currentIndex}
easing={Easing.spring}
render={animatedValue => (
<TouchableOpacity onPress= {()=> this.handleEmail(item.content)}>
<Animated.View
style={{ marginTop:30, borderRadius:5, elevation:10, shadowOffset:{width: 1,height: 1}, shadowColor: 'black', shadowOpacity: 1.0, maxWidth: width - 60, height: 550,
transform: [
{
scale: animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0.9, 1],
extrapolate: 'clamp',
}),
},
],
}}>
<Card containerStyle = {{flex:1, alignItems:'center', borderRadius:8, elevation:10}}
title={item.heading} titleStyle={{color:'#fff', fontSize:22, fontWeight:'700' }}>
<ScrollView style={{flex: 1 }}>
</Animated.View>
)}
/>
)}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
//paddingTop: 15,
backgroundColor: 'red',
},
pageContainer: {
flex:1,
}
});
from react-native-render-html.
that is normal problem, you can check it if props is undefined or null
<View style={this.props.containerStyles}> {this.state.title ? <HTML html={this.state.title} />: null } {this.state.content ? <HTML html={this.state.content} tagsStyles={{ p: { marginTop: 0, marginBottom: 12 }, blockquote: { backgroundColor: "#f1f1f1", padding: 12, paddingBottom: 0, marginTop: 6 } }} /> : null} </View>
from react-native-render-html.
Related Issues (20)
- 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 43
- Can not render superscript <sup> tag HOT 1
- Lots of warnings logged in tests with fake timers HOT 1
- Crashing Issue on Passing Invalid HTML Syntax [ Error: Invalid HTML: <br /></p>Sweep over cheeks with brush, blending from the apples of cheeks back towards the hairline.</p>sampai ke hairline. ] HOT 2
- <sup> looks just like <sub>
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.