Embedding facebook video in react-native app

Question

Is it possible to embed a Facebook video from a public post in a react-native app?

If it is possible, I believe I need to use a <WebView> component which is what I have used for several other types of video embeds, but the Facebook embed is different. We have achieved it on our web client, but there are some DOM specific aspects to it that I'm not sure how to recreate in react-native.

This is the solution I have used successfully for other video types (e.g. Vine, Vimeo), but for FB it just renders an image

<WebView source={{ uri: 'https://www.facebook.com/TheWitBible/videos/1747642252158297/' }} style={ styles.media } />

Here are the docs https://developers.facebook.com/docs/plugins/embedded-video-player

Here is a FB SDK component, but I don't think it supports this use case https://github.com/facebook/react-native-fbsdk

In the web client there are 2 parts to get it to work

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml: true,
      version: 'v2.6'
    });
  };
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

............................

render() {
    return (
      <div ref={el => el && FB && FB.XFBML.parse(el)} className="fb-media-wrapper" style={{ width: this.props.width + 'px' }}>
        <div className="fb-video" data-href={this.props.url} data-width={this.props.width}></div>
      </div>
    );
  }

Answer 1

It worked with me

<WebView 
 style={styles.yourStyles} 
 source={{ uri: 'https://www.facebook.com/video/embed?video_id=<YOUR_ID_VIDEO>'}}  />