react-native-youtube-iframe

react-native-youtube-iframe copied to clipboard

I was wondering if it's feasible to add support for Expo Web for this module?

To my knowledge you need to swap out Webview with an iframe, but since you provide an API for interacting with the Webview I'm not quite sure how much additional work is required.

you will have to make a web compliant module that

• supports the rn-webview props being used by default (at least)
• make a function that mimics injectJavaScript() function

I don't have much experience in webdev, but you can give it a go!

Works fine on react-native-web. So must work on Expo web too. There is one remark: instead of RN Metro bundler (used for building js for native platforms), Webpack (used for web) does not build deps by default. You need to transform jsx only. All works fine!

@Kaseaa will wait for PR-review. For now you can use my way:

1. Install deps: yarn add react-native-web-webview github:oxyii/react-native-youtube-iframe#dist
2. Use this lib according to the docs

import YoutubePlayer from 'react-native-youtube-iframe';

...

seems to work perfectly fine, nice work

awesome @oxyii !!

I will go through the PR soon and will get it merged :)

This MR is merged! A very basic support for react native web will be available. Thanks @oxyii

A few points to note

• layout options remain identical, so anyone using this can expect this to look the same on both native and web.
• react-native-web-webview does not support injectJavascript
  • This mean most of the ref functions will not work. (eg. play/pause, sound toggle, getDuration, seek ...)
  • but if they do add support, users can expect this lib to work out of the box

Leaving this issue open. Any future development to react-native-web or web-webview can be discussed here.

react-native-web-webview does not support injectJavascript

@LonelyCpp What you mean? https://github.com/react-native-web-community/react-native-web-webview/blob/278b6fd669852b06e3dc1ab318475d039ed71830/src/index.js#L97-L107 Play / pause works fine, just re-checked

Updated Oh.. I understand. You mean manual control by ref. Sorry, I didn't check it

yeah play / pause will work once during mount, but will not react to changes post mount.

I must be doing something wrong. Installed this, react-native-web-webview, and react-native-webview. Compiler failures. Without web-webview and webview it will compile, but the iframe doesn't render. Is there a clear guide I'm overlooking?

Hey make sure you're on the master branch (the npm version does not have these changes)

Try removing the package (remove from package.json and run install), then reinstalling the master branch

Thanks, will try that

To make sure I understand the current state of this: currently it works on web, but we can't use ref functions to play, pause and seek? Is this something that will be available anytime soon?

Having this error message while trying to run it on expo web v44.

Any idea on how I could fix this?

./node_modules/react-native-youtube-iframe/dist/WebView.web.js:1:202
Module not found: Can't resolve 'react-native-web-webview'
> 1 | Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"WebView",{enumerable:true,get:function get(){return _reactNativeWebWebview.WebView;}});var _reactNativeWebWebview=require("react-native-web-webview");

@joevo2 https://github.com/LonelyCpp/react-native-youtube-iframe/pull/85#issuecomment-730463392

To make sure I understand the current state of this: currently it works on web, but we can't use ref functions to play, pause and seek? Is this something that will be available anytime soon?

I was wondering the same...