React-native-navigation: What the Stack

Created on 8 Jul 2018 · 7Comments · Source: wix/react-native-navigation

Issue Description

Looking to understand the basic ideas behind various layouts in V2. I don’t understand the necessity of defining a “Stack”. I gather a “Stack” amounts to a singleScreenApp. In V1, other than the root screen, there was no need to add addition screens to a singleScreenApp. Just push and pop screens via a button’s onPress handler. To duplicated this V2, it appears we have to define a “Stack”, which appears to be a “sequence” screens. V2 doesn’t provide a navigation controller (tabs) for navigating within a “Stack” so I don’ quite understand the point of describing a “Stack”. What’s the benefit of pre-defining the the screens of a Stack and what happens if, within a Stack, I push a screen that doesn’t belong to Stack?

Steps to Reproduce / Code Snippets / Screenshots

Consider these layouts.

Navigation.setRoot({
  root: {
    sideMenu: {
      left: {
        component: {}
      },
      center: {
        component: {},
      },
      right: {
        component: {}
      }
    }
  }
});

B
Navigation.setRoot({
  root: {
    bottomTabs: {
      children: [
        {
          component:{},
        },
        {
          component: {},
        },
      ],
    },
  }
});

C
Navigation.setRoot({
  root: {
    bottomTabs: {
      children: [
        {
          stack:{
              children: [
                 {
                    component:{},
                 },
                {
                    component: {},
                },
               ],
           },
        },
        {
          component: {},
        },
      ],
    },
  }
});

I understand A and B, But I don’t understand what’s happening in the case of C.

In V1, there was no need to define a stack for the tabs of a tabScreenApp. Furthermore, layout C is odd because defining the tab (icon etc) for tab1 is far from intuitive. I suppose I would define tab1 via options on “stack”?

Can some one point me to a source (graphical) that explains the notion of layout stacks. In RNN, only Tabs have an obvious impact on navigation layout (a bottom tab to navigate between screens).

Does this make sense?

Environment

React Native Navigation version: V2
React Native version: .55
Platform(s) (iOS, Android, or both?): iOS
Device info (Simulator/Device? OS version? Debug/Release?): Simulation

🏚 stale

Source

smooJitter

👍1

Most helpful comment

I am confused as well. I initially defined all the screens in the stack, and it essentially put all the screens in a stack and navigated to the last screen in the list. So my opening screen was my last screen and I had a back button. Not exactly what I wanted.

So, now I put only the initial screen in the stack and push other screens as necessary.

But, I would like a clear explanation as well.

ujwal-setlur on 13 Jul 2018

👍4

All 7 comments

So, now I put only the initial screen in the stack and push other screens as necessary.

But, I would like a clear explanation as well.

ujwal-setlur on 13 Jul 2018

👍4

Stack is the UINavigationController(iOS). Similar to Web History API.
With wrapping the component object into a stack, it provide the screen with the NavigationBar. Else it will be just a UIViewController.

For setRoot, we just need to define the stack root screen.

Navigation.setRoot({
  root: {
    sideMenu: {
      left: {
        component: {
          name: 'SomeApp.SideMenuLeft'
        }
      },
      center: {
        stack: {
          children: [{
            component: {
              name: 'SomeApp.ItemsListScreen'
            }
          }]
        }
      }
    }
  }
})

https://developer.apple.com/documentation/uikit/uinavigationcontroller?changes=_4
https://developer.android.com/topic/libraries/architecture/navigation/navigation-principles

DazChong on 20 Jul 2018

👍3

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.