I need a vimeo player for my react-native app, but it can't be an WebView. There are some apps with this behaviour, but I can't find libs for it.
const html = `<iframe ... src="https://player.vimeo.com/video/${video.id}"></iframe>`
<WebView ... source={{ html }} />
This snippet is my current player, but it doesn't offer a good user experience for being webview.
You can use this module. React Native Vimeo Player
You can run npm install react-native-vimeo
Usage
<Vimeo
ref='video'
videoId='2619976' // Vimeo video ID
onReady={ () => console.log('Video is ready') }
onPlay={ () => console.log('Video is playing') }
onPlayProgress={ data => console.log('Video progress data:', data) }
onFinish={ () => console.log('Video is finished') }
/>
Related
I am using react-native-video component to play a video.
Problem:
I would like to know the dimensions of the video so I can adapt some other items.
When I store the ref with
<Video
ref={ref => setVideoRef(ref)}
resizeMode={'contain'}
/>
I can access videoRef.props.scaleX and videoRef.props.scaleY, but they are always undefined, even if the video is fully loaded. How can I access the video shape/ dimensions?
You can pass a callback to the onLoad prop, which will receive the naturalSize of the video. Example:
<Video
onLoad={({ naturalSize }) => {
console.log(naturalSize.width, naturalSize.height);
})}
...
The callback has a lot more info if you need it - see more in the docs.
<Vimeo
videoId={'embeeded'} // embeeded link here.
onReady={() => console.log('Video is ready')}
onPlay={() => console.log('Video is playing')}
onPlayProgress={(data) => console.log('Video progress data:', data)}
onFinish={() => console.log('Video is finished')}
loop={false}
autoPlay={true}
controls={true}
speed={false}
time={'0m0s'}
/>
I don't have any problems with normal videos. I can view them. What I want is to be able to play private videos that are closed to the outside. The "react-native-video-iframe" library.
"react-native-vimeo-iframe": "^1.0.4",
I’ve successfully managed to send a message from React Native (RN) to a WebView.
What I’m struggling with, is getting the message back from the WebView to RN. There’s no errors showing - it’s just that the message never gets through.
Here is the code which I’m using:
React Native Code
<WebView
ref={webview => (this.webview = webview)}
source={{ uri: "http://www.my-web-site"}}
onLoadEnd={() => this.onLoadEnd()}
onMessage={this.onMessage}
cacheEnabled={false}
originWhitelist={['*']}
javaScriptEnabled={true}
/>
onLoadEnd() {
this.webview.postMessage("RN message");
}
onMessage(message) {
console.log("I can’t see this message!");
}
WebView Code
document.addEventListener("message", function (event) {
setTimeout(function(){document.postMessage("WebView message")}, 3000);
}, false);
Please make sure that the data for each receiver is in and use the data that You need.
And always check the prescribed documents to see how to use parameters and grammar before using them.
RN
onLoadEnd() {
this.webview.postMessage("sendmessage");
}
onMessage(event) {
alert(event.nativeEvent.data);
}
WebView Code
document.addEventListener("message", function (event) {
window.postMessage(event.data);
});
React-native version 5.0 or later
window.ReactNativeWebView.postMessage(event.data);
Oh, at last, I finally came across the answer. It was a line of code which I had originally been trying to use to send a message from RN to the WebView. Turns out, it was the code required for sending from the WebView to RN:
WebView Code
document.addEventListener("message", function (event) {
window.ReactNativeWebView.postMessage(event.data);
}, false);
RN Code
<WebView onMessage={event => console.log(event.nativeEvent.data)} />
This works.
React Native
<WebView source={{ ... }}
containerStyle={{ ... }}
onMessage={ e => { console.log(e.nativeEvent.data) } }
/>
WebView
if(window.ReactNativeWebView) {
// send data object to React Native (only string)
window.ReactNativeWebView.postMessage(JSON.stringify(dataObject))
}
If you want to send complete object from webview to react-native android app then you need to stringify your object first
// Reactjs webapp
onClickSendObject = (item) => {
if(window.ReactNativeWebView) {
window.ReactNativeWebView.postMessage(JSON.stringify(item))
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
In react-native app use onMessage (for functional component)
<WebView
ref={webview => (this.webview = webview)}
source={{ uri: "give source url i.e your webapp link"}}
onMessage={m => onMessage(m.nativeEvent.data)} // functional component and for class component use (this.onMessage)
cacheEnabled={false}
originWhitelist={['*']}
javaScriptEnabled={true}
/>
// onMessage function
const onMessage = (m) => {
const messageData = JSON.parse(m);
console.log(messageData)
}
(window["ReactNativeWebView"] || window).postMessage('hello motiur dear','*');
My requirement is when the page loads the video should be start playing from the local storage and but it doesnt play at all.
Initially the state paused:true , and when the video loads i tried to change the state to false , but the video doesnt play automatically.
<Video
onEnd={this.handleEnd}
onLoad={this.handleLoad}
onProgress={this.handleProgress}
autoplay={true}
paused={this.state.paused}
ref={ref=> {
this.player = ref;
}}
resizeMode="cover"
source={{uri:this.state.v_url}}
volume={this.state.muted==true?0.0:1.0}
muted={this.state.muted}
/>
handleLoad = (meta) => {
console.log('Its working',this.props)
this.setState({
duration:meta.duration,
paused:false,
})
Use #coffeebeanslabs/react-native-inviewport to detect whether your component is in your device viewport:
Install using: npm i #coffeebeanslabs/react-native-inviewport
then do the following in your code:
import InViewPort from "#coffeebeanslabs/react-native-inviewport";
checkVideoVisible(isVideoVisible) {
this.setState({videoVisible: isVideoVisible});
}
<InViewPort onChange={(isVideoVisible) => this.checkVideoVisible(isVideoVisible)}>
<Video
paused={!this.state.videoVisible}
/>
</InViewPort>
it is possible to handle URL change on React Native web view.
I try to handle with onNavigationStateChange listener. But it only once time firing. When the page is load firing onNavigationStateChange. And when I navigate to another page, this event not firing.
Any idea?
With the reference to import { WebView } from 'react-native-webview' you may be using old version of webview please try updating or try following code/method to get current navigation path/url.
In your case onNavigationStateChange is not returning navigated path so you can try using onLoadProgress which return every change in url.
Instead of this
onNavigationStateChange={(state) => {
console.log("current_path",path);
}}
try this
This may get called multiple time please handle your condition accordingly.
onLoadProgress={({ path}) => {
console.log("current_path",path);
}}
This is how my WebView looks like
<WebView
source={{ uri: this.state.url }}
onLoadEnd={() => this.hideSpinner()}
onMessage={onMessage.bind(this)}
ref={WEBVIEW_REF => (this.WebViewRef = WEBVIEW_REF)}
startInLoadingState={true}
javaScriptEnabled={true}
domStorageEnabled={true}
onLoadProgress={({ nativeEvent }) => {
//your code goes here
}}
onNavigationStateChange={(state) => {
//your code goes here
}}
/>
Try upgrading your React Native (and React) version.
It should be fixed. Maybe was an old issue, because right now it's working OK.
Check this link: React Native webview get url
onNavigationStateChange={({ url, canGoBack }) => {
console.log("url>>>>>>>>",url);
}}
I load website link in react native WebView and its has button when i click that it navigate to default mobile browser.
Running application in react native android Current scenario: when i click button in website its navigate to default browser and am not getting the url i tried above suggestions.
Expected scenario: When i click that button in website it should not navigate to default browser and i want that url which is opened in default browser.
my react version: "react-native": "0.64.0",
onLoadProgress = {({ nativeEvent }) => {
//your code goes here
}}
onNavigationStateChange={navState => {
console.log("navState ", navState);
}}