I want to get html in web view.
I read react-native-doc(https://facebook.github.io/react-native/docs/webview.html#content) but I cannot found it.
Can I do this?
None of the answers above worked for me, but this did. It displays the received html content of the webview in the console:
const jsCode = 'window.ReactNativeWebView.postMessage(document.documentElement.innerHTML)'
return (
<WebView
injectedJavaScript={jsCode}
source={{ uri: 'https://www.whatever.com' }}
onMessage={event => console.log('Received: ', event.nativeEvent.data)}
javaScriptEnabled
/>
)
I found this.
https://github.com/alinz/react-native-webview-bridge
But I could not use this in android. This works only in android.
I don't know this problem is only my problem or library problem.
In Android I use onNavigationStateChange.
Read https://github.com/facebook/react-native/issues/586#issuecomment-90826117
I think this is not good way. But I really need this. so I used this.
In case anyone comes across this in the future. You options here is to use javascript. You can use injectedJavaScript on the webview to inject a window.postmessge($('body').html()) and then handle the reply in the onMessage function on the webview. The cleaner way would be to fetch the page yourself and then load it into the webview.
Related
Do you know a lib / a way to display a thumbnail of a local video ?
I select a video from my device with react-native-image-picker and i would like to display a thumbnail of this video in a View or flatlist in case of several selections
You can use below plugin for get thubmnail form local path
https://github.com/phuochau/react-native-thumbnail#readme
import RNThumbnail from 'react-native-thumbnail';
let getFilePath = ''
RNThumbnail.get(filepath).then((result) => {
console.log(result.path); // thumbnail path
getFilePath = result.path;
})
After getting path for display purpose you can use react-native-video for play and display
react-native-video and use below code
<Video source={{ uri: getFilePath }} pause={true} />
Hope this will work for you.
If you are using Expo and you are not deploying to web, this package will do the job for you: https://docs.expo.dev/versions/latest/sdk/video-thumbnails/
I'm using the below code to open an URL. Downloading a PDF from React native webview after opening on Android gives:
"invaild pdf format or corrupted"
but it works fine on iOS.
<WebView
renderToHardwareTextureAndroid={true}
startInLoadingState={isLoading}
renderLoading={() => {
return <BarIndicator color="blue" />;
}}
mediaPlaybackRequiresUserAction={false}
javaScriptEnabled={true}
source={{
uri: webviewUrl,
headers: webviewHeaders,
}}
style={drawerWebviewStyles.container}
/>
pdf doesn't work on android webview check this issue here you may look for other solution like download it and open it with pdf viewer
Seems to be a very well known 5 year old problem
https://react-native.canny.io/feature-requests/p/android---webview-cannot-display-pdf
that needs saveas file.pdf then either call the native pdf handler
or
embed/customise a simple maintained js viewer such as
https://github.com/xcarpentier/rn-pdf-reader-js
I'm trying to show some images in my React Native app. It's a simple app, only for Android. The app get informations from an API. The initial View is a list of items and when I click in one item, it gets more info from the API and show in a new page. I also get some urls that points to images that are kept in a S3 bucket in AWS.
This is how I show the images:
<ScrollView>
{this.state.urls.map(url => {
<Image
source={{uri: url}}
style={{width:400, height:200}}
/>
}
</ScrollView>
The problem is that it's not showing those images. I can see that there is a part of the page that is for the image. I can see that because if a put the image first and after that some text, the text will appear at the bottom of the page. I don't know what is going on that the image doesn't appear.
I searched for an answer, found something about using https instead of http (at least for iOS). Found that I need to set width and height. I already did those things and others but it's not working.
I also tried just picking a image from the internet and putting it url direct in uri but it still doesnt't work.
You're missing a return statement in your map function.
<ScrollView>
{this.state.urls.map(url => {
return <Image
source={{uri: url}}
style={{width:400, height:200}}
/>
}
</ScrollView>
UPDATE
I just tried the url that you provided in the above comment and it doesn't work on my device. I tried a different image from the internet this one and it works. There may also be something that is stopping you from accessing the images from within a mobile app.
To debug further I try would a single <Image .../> with the image hosted on AWS and see if you can get that to show. There may need to be some AWS configuration that you need to change to allow the image to be accessed from a mobile device.
Assuming your image URLs are accessible in your application.
The below code will show your images. Actually you forgot to return a component from the map which is a must have.
<ScrollView>
{this.state.urls.map(url => {
return <Image
source={{uri: url}}
style={{width:400, height:200}} /> }
}
</ScrollView>
I have a webview, and I am logging into a website in it, and I want the auth cookies to persist the login, so I can just set the cookie for the user every time, so they don't need to log in every time.
Is this possible?
How can I get the cookie from the webview?
Here is my webview:
<View style={styles.container}>
<WebView
source={{ uri: "anywebsite.com" }}
onLoadStart={this.loadingStarted}
onLoad={this.loadingEnded}
/>
</View>
You can use react-native-cookies for handling cookies in RN.
Note that there is also an attribute on WebView called thirdPartyCookiesEnabled. You should try it out and see if it works for your case, cause manually setting and getting the cookies in the WebView takes some time to set up even with a library like react-native-cookies.
I am trying to find a way to load image reference I get from places api into places photo API using Image component of react-native like below,
const imageLink = 'https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CmRaAAAAuZ36wzrMYCVNWM1smQkRKuQyXecPgRpcsMfrSqbJM0EUTXZ62j8Ljxtk8HsxohXbtAwZAwmj_F3HmDwLoQaH9qt2TZJhhA6EuXK41UFo0Ow750MJujtrr5hgHR2lF7EXEhCkWj_dZ4LefrYzLU1_5RF1GhTR7Ggem5IJ-v7V2U8fjKoU9tBUOg&key=--MyKey--'
return (
<View >
<TouchableHighlight >
<View>
<Image
style={{width:64, height:64,flex:1,backgroundColor:'red'}}
source={{uri: imageLink}}
/>
</View>
</TouchableHighlight>
</View>
);
I am getting only empty placeholder with above code. However, I am able to load this link in browser.One caveat is that google places photo's link is redirecting to some other url which then displays image in browser. Am I doing it right? or is there any other way I can accomplish the same. Note: I tried react-native-network-image library as well.
You can have a look at the ImagePrefetch function in googleplace module:
https://github.com/srirangan/googleplaces.js/blob/master/test/ImageFetchTest.js
However, I am having issue with the whole module at the moment because of the line var https = require("https"); called in this specific function.
Not sure if it's an issue with new version of RN (upgraded to 0.55 recently) or just some other error in my new setup.
This worked perfectly in previous RN (was running on 0.48)