Giter Club home page Giter Club logo

Comments (10)

Exilz avatar Exilz commented on August 23, 2024 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.

marceloHashzen avatar marceloHashzen commented on August 23, 2024 3

Never mind, managed to solve here.

from react-native-render-html.

MaffooBristol avatar MaffooBristol commented on August 23, 2024 3

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.

zahirkelloud avatar zahirkelloud commented on August 23, 2024 2

@marceloHashzen do you mind sharing your solution??

from react-native-render-html.

aaronlinley avatar aaronlinley commented on August 23, 2024 1

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.

isaiahnixon avatar isaiahnixon commented on August 23, 2024

Would you mind sharing your code, or perhaps some steps to replicate the error?

from react-native-render-html.

aaronlinley avatar aaronlinley commented on August 23, 2024

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.

marceloHashzen avatar marceloHashzen commented on August 23, 2024

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.

kanikas24 avatar kanikas24 commented on August 23, 2024

@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.

hoanghuychh avatar hoanghuychh commented on August 23, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    šŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ā¤ļø Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.