i used webview to display some web pages in my expo app like the code bellow :
<WebView
style={styles.container}
originWhitelist={['*']}
source={{ html: '<h1><center>Hello world</center></h1>' }}
/>
it works coorectly on some android phones and not show images on some others phones .
help please .
Related
In react native, the <Image> tag isn't displaying properly and shows an image from a different src URL in the database. I checked the URL multiple times, and it isn't the one displayed in the HTML.
<Image source={{uri: image}} style={styles.image} />
What is causing this glitch?
Your browser caches your url and assumes you are hitting the same url so it populates previous result. Add a random query to the url like:
https://source.com/a/b/c/image.png?randomQuery={random_number_here}
Example:
https://i.pinimg.com/564x/62/ed/6e/62ed6ea71018a57a3ab0c8c959d78cb0.jpg?key=1656566265232
React native:
<Image
source={{ uri: `${imageUrl}?key=${Date.now()}` }}
/>
I am trying to implement Highcharts organization chart in a React Native application, but could not find a perfect tutorial to start with. I tried Highcharts React Native wrapper but its is throwing errors. It will be highly informative if someone could find a perfect tutorial with is compatible with latest react native and expo versions.
I was also running into errors but I managed to fix them in the react-native-highcharts library. It is because the library uses webview as a component from the core react native which has been depreciated.
npmjs.com guide on highcharts
after installing and implementing all as described in the guide, install one more package by running the following command
npm install --save react-native-webview
after this, go to node_modules>react-native-highcharts>react-native-highcharts.js
in here, on the very start, find the import statements and remove WebView import from 'react-native' and add the following line after that.
import WebView from 'react-native-webview';
and now, go to the render method, here on the WebView element, you shall find a prop named 'onLayout={this.reRenderWebView}' like this
return (
<View style={this.props.style}>
<WebView
onLayout={this.reRenderWebView}
style={styles.full}
source={{ html: concatHTML, baseUrl: 'web/' }}
javaScriptEnabled={true}
domStorageEnabled={true}
scalesPageToFit={true}
scrollEnabled={false}
automaticallyAdjustContentInsets={true}
{...this.props}
/>
</View>
Change it to
return (
<View style={this.props.style}>
<WebView
onLayout={this.reRenderWebView.bind(this)}
style={styles.full}
source={{ html: concatHTML, baseUrl: 'web/' }}
javaScriptEnabled={true}
domStorageEnabled={true}
scalesPageToFit={true}
scrollEnabled={false}
automaticallyAdjustContentInsets={true}
{...this.props}
/>
</View>
Now run your app again and see if you still hit any bugs. I hope it fixes your issue
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>
I've created a Modal in Onsen which works great, but sometimes my content spans beyond the page boundaries. The Modal does not naturally support scrolling and the <Scrollable /> element is not supported by the React support in Onsen so I've attempted to make a <section/> scrollable like so:
<Modal isOpen={this.state.selected.title !== undefined} onDeviceBackButton={()=> this.setState({selected: {}})}>
<section style={{margin: '16px', overflow: 'auto', height: '100%'}}>
<h2>{this.state.selected.title}</h2>
{myReallyLongContent}
</section>
</Modal>;
This appears to work when testing on my desktop browser (in "Chrome Mobile testing"); however, when testing on my actual mobile device, the scrolling does not work (via touch swiping). Is there a workaround?
React-native Android, when touchable component is put, such as TouchableOpacity in a scrollView/listView, it's very easy to get touch event when the scrollView/listView is scrolling. In react-native iOS, everything is fine. But in React Native Android, it's very annoying.
It's strange, no one ask this question before.
Has anyone seen this issue?
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
automaticallyAdjustContentInsets={false}
style={styles.listView}
/>
renderRow(rowData:rankRecord, sectionID:number, rowID:number) {
return(
<TouchableHighlight
style={{height:70}}
onPress={() => this.goToProfile(rowData.inner_id)}>
<RankCell rowData={rowData}/>
</TouchableHighlight>
);
}