Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
    );
  }
like image 565
ken4z Avatar asked Nov 09 '22 14:11

ken4z


1 Answers

It worked with me

<WebView 
 style={styles.yourStyles} 
 source={{ uri: 'https://www.facebook.com/video/embed?video_id=<YOUR_ID_VIDEO>'}}  />
like image 160
Thai Ha Avatar answered Nov 15 '22 06:11

Thai Ha