React web app to launch and request fullscreen on load - edited

Question

I've deiced to reword the question after more hours of attempting hacks and fixes, with no end result. I am using the SCREENFULL npm for this.

This web application is a fullscreen interactive UI for a menu system used by employee's. I desired to either have the app launch into fullscreen upon loading OR detect if fullscreen to display prompt button to enable fullscreen and launch the app. Neither seem to be doing the job at all.

My attempts included:

goFullScreen (){
  screenfull.request();
}
<button onClick={(e) => this.goFullScreen()}> enable full screen </button>

works fine. Goes full screen. Now to detect to display the app (loggin page, menu etc) or only the fullscreen button (that way the app can only be view in fullscreen).

screenfull.on('change', () => {
    if (screenfull.isFullscreen) {
      console.log("it freaken works");
      return ( 
        <h1> hi </h1>
      )
    } else if (!screenfull.isFullscreen) {
    // display button to go fullscreen
    }
});

Does not return the <h1> hi </hi> or any thing within return, but the console does log. Strange.

UPDATE:

I decided to try a DidComponentMount (along with javascript's "onLoad" events) :

componentDidMount () {
  screenfull.request();
  console.log("request happened");
}

Well, the request did happen, but the fullscreen did not enable. After debugging an error checking I get a webkitfullscreen error using the screen error detector included in the package.

I have no idea why this won't work, even so why this is so difficult.

Is there a work around for this, or am I just making this a lot harder then it should be?

This web app is only running on a Android tablet and google chrome browser.

Answer 1

The solution was simple. https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

It was with the manifest json to get my exact desired result.