How to play vimeo videos in React Native?

Question

I have a requirement to play Vimeo videos in my react native app. I am using webview to play videos, Videos play but I can not see anything on screen, audio is coming but the screen is blank. Below is my code. Is there something I am doing wrong or any other way to play Vimeo ? Any help would be appreciated.

<AutoHeightWebView
    startInLoadingState
    style={{ width: "100%", height: '100%', borderColor: 'white', borderWidth: 2 }}
    source={{
        uri: 'https://player.vimeo.com/video/299264098?autoplay=1' //'this.state.videoUrl'
    }}
    onError={() => console.log('on error')}
    onLoad={() => console.log('on load')}
    onLoadStart={() => console.log('on load start')}
    onLoadEnd={() => console.log('on load end')}

    bounces={false}
/>

Answer 1

I found a way to run a vimeo video in react native. simply you've to request on URL to get it's detail config through vimeo id. Inside config you'll find videoUrl, that can be easily run on react-native-video-controls.

Here is example

const VIMEO_ID = '179859217';
fetch(`https://player.vimeo.com/video/${VIMEO_ID}/config`)
      .then(res => res.json())
      .then(res => this.setState({
        thumbnailUrl: res.video.thumbs['640'],
        videoUrl: res.request.files.hls.cdns[res.request.files.hls.default_cdn].url,
        video: res.video,
      }));

In Render

<VideoPlayer
        ref={ref => {
          this.player = ref;
        }}
        source={{uri: this.state.videoUrl}}
        navigator={this.props.navigator}
        fullscreen={true}
        resizeMode={'cover'}
      />