I've tried different methods to render an html content from json response to react native.But I got failed in these methods
https://www.npmjs.com/package/react-native-render-html
https://www.npmjs.com/package/react-native-htmlview
Because there is no package that support table tag of html. So I thought to use WebView in react native.But that also disappointed me. There is no field to give html content from json response in WebView. I've tried the following.
But these are not working
code
<WebView
source={{uri: `<h1>Hello World</h1>`}}
style={{marginTop: 20}}
/>
In my case I'm fetching server response.I've double checked whether response is coming ,the response from server is fine.
return (
<Container style={styles.container}>
<View>
{this.state.section.map(article =>
<View>
<WebView
source={{uri:article.data.description}}
style={{marginTop: 20}}
/>
</View>
)}
</View>
</Container>
);
Is there any other method for rendering html content other than these. Please I'm stuck with this.I don't know what to do.This cause delay in my project.So I'm really disappointed.Please any help would be really appreciable.
I've solved the problem.I was using native-base ui kit.So when I tried to render WebView within Container or Content it won't render.So I removed it with View component but ScrollView don't work.So I've made some changes to Container and it is working perfect.But still remains a problem that border of html table is not displaying.But otherwise it is perfect
This is my working code
<Content contentContainerStyle={{ flex: 1 ,padding:15}}>
{this.state.section.map(article =>
<WebView
source={{ html: article.data.description}}
javaScriptEnabled={true}
style={{backgroundColor: 'transparent'}}
/>
)}
</Content>
Related
I am using #react-pdf render for my react application.
it generated the component in pdf, the problem now is at the level of display of the data coming from my api which are saved in html tags. it displays like this:
<h1>My Title</h1>
or I would like it to display without the tags. there is also no way to use dangerouslySetInnerHTML
I got this as a result :
<PDFViewer style={styles.viewer}>
{/* Start of the document*/}
<Document>
{/*render a single page*/}
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Image
src={`http://127.0.0.1:8000/storage/settings/${setting.logo}`}
alt="Logo"
style={styles.logo}
/>
<Text>N/Réf. : {data.numero_ref}</Text>
<Text style={styles.concerne}>Concerne. : {data.motif}</Text>
{/* content of letters*/}
<Text style={styles.text}>{data.content}</Text>
</View>
</Page>
</Document>
</PDFViewer>
);
I got this as a result
I would like it to display content without the tags.
image code
I need to display some images from api. I am using axios to get images. ids of images is coming from another api one by one. if i use map it will show nothing . I want to show all images as soon as api send the id. map pnly works on loading i guess.
You can use ListView in React
example:
<ListView
dataSource={this.state.dataSource}
renderRow={data => (
<View style={styles.container}>
<Image
source={{ uri: imageSource }}
style={styles.img}
/>
<Text>{data}</Text>
</View>)}
/>
I am adding two props (textProp & imgProp) to my custom component, but I keep on getting this error <Image> component cant contain children. This is what I have soo far
function TextImg(textprop, imgprop) {
return(
<div>
<div>
<Text>{textprop.text}</Text>
</div>
<div>
<Image source={imgprop.imageUri}>!</Image>
</div>
</div>
);
}
Can anyone help me regarding this, Thanks!
Images (img) are considered empty elements and are self-closing, and required to be per the html spec.
https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
The react native Image has the same restriction.
They can't wrap anything or have any children nodes. The "!" is the issue.
<Image source={imgprop.imageUri}>!</Image>
Try instead
<Image source={imgprop.imageUri} />
If you need to display an "!" then it'll have to be outside the image.
if you need to show "!" in image,
Try
<View>
<Image source={img} />
<Text
style={{
position: "absolute",
// some stylng
}}
>
!
</Text>
</View>
<View>
<Text>
{/* Adding notification if exists otherwise ignore */}
{post.hasNotification ? post.notifications: ''}
</Text>
</View>
How could I wrap a View component around post.notifications? When I do this I get an error Nesting View withing Text is not currently supported. I need to wrap it with a View component so I can style it.
You can't use View component inside Text component. Try this,
<View>
{post.hasNotification ? <View><Text>post.notifications</Text></View> : ' '}
</View>
I'm on "react-native": "0.53.3". When navigating to a view with a FlatList containing ~100 components and then navigating back, not all the memory is released, which means that after a few navigations my app is consuming too much memory and crashes. This is my flatlist component which renders comment.js
return (
<Container style={{ flex: 1}}>
<FlatList
data={comments}
keyExtractor={this._keyExtractor}
renderItem={this.renderComment}
removeClippedSubviews
/>
</Container>
);
comment.js looks pretty much like this:
return (
<View>
<TouchableHighlight onPress={this.toggleCollapse}>
{this.renderHeaderWithBorder(depth)}
</TouchableHighlight>
<Collapsible collapsed={this.state.collapsed} align="top">
<TouchableHighlight onPress={this.toggleCollapse}>
{this.renderBodyWithBorder(depth)}
</TouchableHighlight>
</Collapsible>
</View>
);
I've noticed that if i change comment.js to render a simple Text component the problem goes away (the app sits around 300mb with high usage)
I'm using "react-navigation": "1.1.1" and redux.
It seems to me that the memory for each new comment list isn't being released when the component is unmounted, is there anyway I can mitigate this?