Handling hybrid root apps (single / tab screen apps)

[smooJitter]

Tab vs Single page App. I'm considering an app that's both single page (onboard login screen) and tab base. I can't figure out how to structure this. It seems that I ha e to choose one or the other. It doesn't appear that o could hide the tabbar

[artald]

It's not a problem to have both.
When you start the app with either a single page or with tabs, you're actually setting this structure to be the root of the app.

Based on your app state, you can call startSingleScreenApp to show the login/onboard screen, and when you need to show the actual tab-based app - make a call to startTabBasedApp which will replace the whole root and show your app.

[smooJitter]

I see, I notice the redux example captures the idea. I'll take a closer look at how the redux example works. I'm not familiar with redux. I was leaning toward an environment that does not rely on redux for state management. I'll see what I can make out of dealing this hybrid root apps, particularly beyond redux. Thank you.

[talkol]

It's actually very easy to implement without redux. On your app launch, usually in src/app.js, you're probably calling:

// post-login state
Navigation.startTabBasedApp({...});

Whenever you want to switch structure, you can simply call startApp again and the structure will be changed in runtime. So, for example, let's assume you have a logout button somewhere that should switch the app state back to single screen for login, you'll do:

onLogoutButtonPress() {
  // pre-login state
  Navigation.startSingleScreenApp({...});
}

[talkol]

@smooJitter I'm closing this, if you don't manage to get this working please reopen

[raffibag]

Hi all - I tried the above suggestions, but am having difficulty getting the calls to startSingleScreenApp and startTabBasedApp to render properly. They will render, but only the last item will render - in the below example, only the Sign In screen (the <LoggedOut /> component will display - with no change in screen/app when the app state changes).

I'm using react-native-meteor to connect to our Meteor app, and am pulling in the various apps into the App index as components. The logic I'm using to determine app states is:

if (status.connected === false || loggingIn) {
    return <LoadingScreen />;
  } else if (user !== null) {
    return <LoggedIn />;
  } else {
    return <LoggedOut />;
  }

<LoadingScreen /> and <LoggedOut /> use startSingleScreenApp, while <LoggedIn /> uses startTabBasedApp.

Navigation, however, seems to be ignoring this logic - and is loading the components automatically and in order once the respective module is imported (e.g., 'import LoggedIn from './LoggedIn'; - in fact, if I remove a module from the if/else statement it will still load; it will only not load if I remove the import from the App index. Is there perhaps something about load order and/or the way I should be calling these app functions that I should be doing differently. Alternatively, maybe I shouldn't be using more than two app instances?

Load order (imports) is:

import LoadingScreen from './components/LoadingScreen';
import LoggedOut from './layouts/LoggedOut';
import LoggedIn from './layouts/LoggedIn';

I thought this issue posting had answered my original question (which I also posted to StackExchange - will update answer there if I can figure this out), but then I ran into the above issues. Thanks much.

[swhamilton]

I am also interested in hooking all this up with react-native-meteor. I setup a repo which tries to accomplish this, but I'm afraid I got a little stuck with how to properly setup the switch in the root.
you can check out the app.js here

According to this thread, it seems that I should be able to load the app with startSingleScreenApp, and if the user is logged in, I can call Navigation.startTabBasedApp({...}); from within the logged in component and it will replace the root with the TabBasedApp.

Is this approach correct or is there a better way to keep a redux store updated with current Meteor information?

Thanks for any guidance in this.

[guyca]

@swhamilton That's indeed the correct approach. Your redux store persists when you call startApp

[ujwal-setlur]

@swhamilton, you may want to try:

swhamilton/react-native-navigation-redux-meteor#1