Navigate between StackRoute and TabsRoute, Cannot pop(-1)

[DenJohX]

I have an app which has a dashboard that needs login and some other screens before enter.

The dashboard has a tabbed layout so I went and use the TabsRoute for the dashboard and children and a StackRoute for the other routes.

It works, but not that very well, This is the structure of the routes I have to make:

• Frontpage screens (StackedRoute, all with the same style)
  • Frontpage
  • Login
  • Terms and coditions
  • ... some other static screens
• Main content (tabbed, and some screens with a header)
  • Dashboard
  • Statistics and other tabs
• Settings (StacedRoute but different styles and headers than the frontpage one)
  • Settings
  • Options and some forms
• Others to define

Here is the code I'm working on:

export class Router extends Component {
    render() {
        return (
            <NativeRouter history={this.props.history} addressBar>
                <StackRoute path="fullscreen" component={Master} >
                    <Route path="/" component={PageOne} />
                    <Route path="/terms" component={Terms} overlayComponent={Header({title: 'Terms of Service'})} />
                    <Route path="/login" component={Login} overlayComponent={Header()} />
                    <Route path="/reset-password" component={ResetPassword} overlayComponent={LeftCancelHeader()} />
                    <Route path="/register" component={Register} overlayComponent={Header()} />
                    <Route path="/verify-mobile" component={VerifyPhone} overlayComponent={CancelHeader({title: 'Verify Mobile', cancelText: 'Close'})} />
                </StackRoute>
                <TabsRoute path='mainApp' component={TabsWrapper}>
                    <Route path="/dashboard" component={Dashboard} />
                    <Route path="/profile" component={Profile} overlayComponent={Header({title: 'My account', back: false})}/>
                </TabsRoute>
            </NativeRouter>
        )
    }
}

Now, the problem I'm having is that there is no way to navigate back to /terms from /dashboard and viceversa. The error says it Cannot pop(-1), the stack cannot be emptied, so it seems to be clearing the complete history before changing between Routes.

By the Aviato example it seems to be possible to do this without loosing history, but as my app has a variety of navigation schemas and styles, I splited it instead of making all of them inside a single route

Any recomendation on how to archieve what I want?

Thanks in advance.

[jonathanglasmeyer]

The way I understand it is that you'll only be able to pop inside of a navigation stack produced by visiting children of a given StackRoute.

The way I actually handled modal-ly screens like Login and Settings in the app I'm currently building is actually using the react-native Modal component. Not optimal, but right now it's the only way to achieve correct from-bottom page transitions (navexp card stack header transitions are incorrect for vertical card stack transitions right now).

Probably couldn't really answer your question, just wanted to share some hints. ;)

Edit: sorry accidentally pressed the close button.

[smontlouis]

@DenJohX did you manage to fix your issue ? I must admit that I'm having quite a hard time to make transition, and navigation (especially pop) works, I simply don't understand. :(

[DenJohX]

@bulby97 Not yet, I kept almost the same routing as posted, and follow @jonathanewerner suggestion to use modals for the settings and other views so I don't have to go back from a StackedRoute to a TabsRoute.

Still, I might need to have a working pop to go from one route to another, so I think this will be remain open until I find a proper solution.

[smontlouis]

@DenJohX Just figured out that you need to use router.goBack() and not router.pop()