I need to develop a full-screen web app. I have tried:
import screenfull from "screenfull";
const HomePage = () => {
if (screenfull.isEnabled) {
screenfull.request();
}
return(
component...
)
}
export default HomePage;But when the page loads, it doesn't put it in full screen. I also reported the same function in another route. (Component2 for example).
import screenfull from "screenfull";
const Component2 = () => {
if (screenfull.isEnabled) {
screenfull.request();
}
return(
component...
)
}
export default Component2;On clicking anywhere on the HomePage the browser renders in Component2, after this event my app becomes full screen.
How do I get my app to start full screen from launch?
Perhaps this is what you are looking for: https://web.dev/native-hardware-fullscreen/. You can use a useEffect to request fullscreen on the document body when it first loads. Hope that helps.