React-native-render-html: "Please provide the html or uri prop"
I have a view that consists of a few
components. The HTML content is displaying in the app, however there is a warning for each of the components - react-native-render-html "Please provide the html or uri prop. - but every component has a html prop.
aaronlinley
All 10 comments
Would you mind sharing your code, or perhaps some steps to replicate the error?
isaiahnixon
on 1 Nov 2017
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;
aaronlinley
on 2 Nov 2017
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 ?
Exilz
on 2 Nov 2017
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;
aaronlinley
on 2 Nov 2017
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} />
}
marceloHashzen
on 3 Mar 2018
Never mind, managed to solve here.
marceloHashzen
on 5 Mar 2018
@marceloHashzen do you mind sharing your solution??
zahirkelloud
on 15 May 2018
@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 (
style={{ width:width, maxHeight: 700}}
itemWidth={width - 60}
threshold={80}
contentOffset={12}
renderItem={({ itemIndex, currentIndex, item }) => (
currentIndex={currentIndex}
easing={Easing.spring}
render={animatedValue => (
transform: [
{
scale: animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0.9, 1],
extrapolate: 'clamp',
}),
},
],
}}>
)}
/>
)}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
//paddingTop: 15,
backgroundColor: 'red',
},
pageContainer: {
flex:1,
}
});
kanikas24
on 11 Jan 2019
Just as a top tip to anyone seeing this, html="" will also cause this warning. It doesn't seem to like empty strings...
MaffooBristol
on 27 May 2019
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>
hoanghuychh
on 15 Sep 2020
Related issues
fahadhaq
·
6Comments
diamanthaxhimusa
·
7Comments
sayem314
·
6Comments
kikoseijo
·
6Comments
Anitorious
·
7Comments
Most helpful comment
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
titleis empty. You're setting its content with asetStateincomponentDidUpdate. That means that when your component is first mounted, you don't have any content to render, then, you usesetStateto update it.You should set all your content directly in your constructor (it has your
propsin its first argument !), and it should be allright.By the way, I'm not sure why you're using two
HTMLcomponents. Why wouldn't you use only one ?