Search code examples
react-nativevimeovimeo-player

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.


Solution

  • 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)}
                />
            );
        }