title: Embedding facebook video in react-native app
body: <p>Is it possible to embed a Facebook video from a public post in a <code>react-native</code> app?</p>
  
  <p>If it is possible, I believe I need to use a <code>&lt;WebView&gt;</code> 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 <code>react-native</code>.</p>
  
  <p>This is the solution I have used successfully for other video types (e.g. Vine, Vimeo), but for FB it just renders an image</p>
  
  <pre><code>&lt;WebView source={{ uri: 'https://www.facebook.com/TheWitBible/videos/1747642252158297/' }} style={ styles.media } /&gt;
  </code></pre>
  
  <p>Here are the docs <a href="https://developers.facebook.com/docs/plugins/embedded-video-player" rel="noreferrer">https://developers.facebook.com/docs/plugins/embedded-video-player</a></p>
  
  <p>Here is a FB SDK component, but I don't think it supports this use case
  <a href="https://github.com/facebook/react-native-fbsdk" rel="noreferrer">https://github.com/facebook/react-native-fbsdk</a></p>
  
  <p>In the web client there are 2 parts to get it to work</p>
  
  <pre><code>&lt;script&gt;
    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'));
  &lt;/script&gt;
  </code></pre>
  
  <p>............................</p>
  
  <pre><code>render() {
      return (
        &lt;div ref={el =&gt; el &amp;&amp; FB &amp;&amp; FB.XFBML.parse(el)} className="fb-media-wrapper" style={{ width: this.props.width + 'px' }}&gt;
          &lt;div className="fb-video" data-href={this.props.url} data-width={this.props.width}&gt;&lt;/div&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>