CODEWITHSUNDEEP
facebookreact-native
ken4z
ken4z

Reputation: 1390

Embedding facebook video in react-native app

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

Upvotes: 5

Views: 6403

Answers (2)

Thai Ha
Thai Ha

Reputation: 1379

It worked with me

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

Upvotes: 1

Alain Goldman
Alain Goldman

Reputation: 2908

I mean this worked totally fine for me

<WebView style={{width:350,height:null}} 
 source={{ uri: 'https://www.facebook.com/chris.phillips.56027281/videos/vb.100003747765310/914766415324942?type=2&theater'}}  />

Upvotes: 0

Related Questions