Guide for creating new components

[cobarx]

Is there any kind of guide that covers how to implement a "native view" for react-native-dom? I'd like to build a component to expose the html5 video tag.

I've looked at the ImageView implementation, but am not very familiar with the react-native-dom model to know what's going on there. I can debug my way through it but was hoping there was an easier way.

[vincentriemer]

Sorry there isn't much in terms of documentation/guides, I just simply haven't had the time to spend time on it.

Luckily for you though, my personal presentation library uses react-native-dom and needed a video component so I have a minimal implementation (which I just extracted and open sourced) that should hopefully help you as a starting point!

[cobarx]

That is awesome! I can work with it and follow the pattern to implement more properties and events. I'm the maintainer for react-native-video, so I would love to give this a home in the repo once I have all the key props and events implemented.

One other question. We are building a new video player component for our web app and want to be able to share it via React Native with our mobile & TV apps. Is react-native-dom stable enough where you'd recommend it for production use, or would you recommend using react-native-web for now and switching over later?

[cobarx]

Alright, got a PR put together to bring this into react-native-video: https://github.com/react-native-community/react-native-video/pull/1253 I still need to implement all the event handlers like onLoadStart, onLoadedMetadata, etc. before this is ready to go.

Two things I wasn't sure about:

You are doing both setAttribute on the element and setting the property directly. Is this to support old browsers and if so, when is this necessary? Example:

      this.videoElement.setAttribute("muted", "true");
      this.videoElement.muted = true;

Attempting to click on the video element with the controls attribute set doesn't cause them to unhide. I'm guessing react-native-dom is intercepting the click events and suppressing them. Is there a way to receive these without needing to wrap the Video in a Touchable? The way react-native-video works right now is that controls={true} means that the system controls are enabled, rather than showing, so I'd like to keep it working that way.

[vincentriemer]

Re: Setting both attribute and property

I can't exactly remember why I did that, if I had to guess it was for debugging purposes (so I could see what value was set in "inspect element")

Re: Controls/Touchable

Frankly the touch handling in RNDom is kinda.....touchy (lol). At some point I'm going to need to overhaul it, as there is no documentation for how it actually works in RN proper. I actually asked an RN core team member about how it works and he said the only documentation was in Jordan Walke's head 😅.

There are two things you can try to make the controls work: first I'd try to set this.pointerEvents = "auto"; in RCTVideo's constructor, and if that doesn't help I'd set this.touchable = true; whenever controls becomes true.

[cobarx]

Thanks for the tip. I set this.videoElement.style.pointerEvents = "auto"; and it works perfectly! Love the anecdote :)

It was a little tricky wiring up the events, but I set some breakpoints and figured out that something was munging the names from onX to topX, so I've now got all the events implemented. All the key functionality is there, so the PR has been merged and react-native-dom is now fully supported by react-native-video!

Is there any way we could get support for synchronous events so we can trigger fullscreen? Even if it was a hack like wrapping the element in a div and capturing an onClick, that would be workable for now. Without a way to click a button and immediately go fullscreen, there is no way we can use react-native-dom in production. I work for Crunchyroll, so this would be a big success story for RND.

[cobarx]

Any thoughts on making it possible to go fullscreen?

[vincentriemer]

Sorry for the delay, had React Boston over the weekend which wiped me out.

This is more of a limitation of the web platform than a limitation of rndom (there's another issue discussing it here: https://github.com/vincentriemer/react-native-dom/issues/49)

One strategy to work around this limitation you could do is create a new native view that you can wrap another touchable view that has a main thread onclick handler that activates fullscreen.

[cobarx]

Right on, I heard that React Boston was amazing. I'm excited to say I'll get to give react-native-dom a bit of visibility. I'll be giving a talk at the FOMS conference next week about cross platform video and will be talking including how react-native-dom can bring react-native-video to the web.

I went the native view route and was able to wire it up, but it's not all that optimal. I'll add my notes and suggestions in the issue.