CODEWITHSUNDEEP
react-nativevimeovimeo-player
Shankar S Bavan
Shankar S Bavan

Reputation: 962

React Native - Is there any way to use vimeo video player on react native app?

I used this package for vimeo video player. but got following error. Is there any other way to use vimeo player on react native app?

Invariant Violation: Invariant Violation: requireNativeComponent: "RCTWebViewBridge" was not found in the UIManager.

Upvotes: 3

Views: 3141

Answers (1)

Vikram Biwal
Vikram Biwal

Reputation: 2826

I have done using this code:

// NOTE: Injecting code here due to react-native webview issues when overriding
// the onMessage method. See here: https://github.com/facebook/react-native/issues/10865
export const injectedCode = `
(function() {
var originalPostMessage = window.postMessage;
var patchedPostMessage = function(message, targetOrigin, transfer) {
  originalPostMessage(message, targetOrigin, transfer);
};
patchedPostMessage.toString = function() {
  return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');
};
window.postMessage = patchedPostMessage;
})();
`;


   getVimeoPageURL(videoId) {
        return 'https://myagi.github.io/react-native-vimeo/v0.3.0.html?vid=' + videoId;
    }

render() {
        return (
            <WebView
                ref="webviewBridge"
                style={{
                    // Accounts for player border
                    marginTop: -8,
                    marginLeft: -10,
                    height: this.props.height
                }}
                injectedJavaScript={injectedCode}
                source={{ uri: this.getVimeoPageURL(this.props.videoId) }}
                scalesPageToFit={this.props.scalesPageToFit}
                scrollEnabled={false}
                onMessage={this.onBridgeMessage}
                onError={error => console.error(error)}
            />
        );
    }

Upvotes: 2

Related Questions