(React) How to make routes that use the whole screen?

I set things up based on the split screen template, and it is working fine. But I need onboarding, and don’t want it to fill just part of the page.

Trial 1: Use different routes, and have the LeftPanel use some Redux state to rerender itself as blank. This only works sometimes, since F7 keeps its own state around.

Trial 2: Since I wanted it to use a centered box when on tablet/desktop and the full screen on mobile, this sounds like something for a popup! This creates a popup but does not blank the background. I try setting classes to clear everything, and it sort of works. But often gets in a re-render cycle and react errors out.

Trial 3: I try a popup defined in a page and change the routes to not use popup:{component: …}} anymore, and use normal page routes. The page has a popup defined inside. This works once but on next navigation goes into another infinite loop.

Trial 4: Back to basics. Simple page but I use page events to see hide/show the left and right panels. BUT… I get two (2) onPageBeforeOut events when I navigate around. And if I go back and forth between one page and this one, i get all sorts of spurious events. I get onPageBeforeOut before I get onPageBeforeIn even though I already received onPageBeforeOut when I left the page.

I am running out of ideas.

I guess you want something like this: https://app.finderscrowd.com/

On app load:

After login:

Don’t try to put anything in routes. This app shows Login Screen first, and after that it shows Panel + View. The main app component looks something like:

if (isLoggedIn) {
 return (
} else {
  return (
    <View main>...</View>

And Login screen has own View inside to have navigation within onboarding pages

1 Like

Yeah, but onboarding is rarely as easy as just a login screen. I have routes for onboarding, login, register, verify email, reset password, etc.

Exactly what is in this app. Just put own View in that login screen with own routes, to keep navigation between these pages within Login Screen

In case i have 2 panels as navigation? (like an inbox email),; how can I setup the layout?